# Timeline Scroll > A scroll-driven expedition timeline whose center rail fills with a glacial-azure gradient as you scroll. Day badges anchor beside their rail nodes and country-tagged cards reveal in a soft cascade with flag markers, activity tags and a leg stat to the next stop. - Category: Card - Frameworks: Vanilla, React + CSS, React + Tailwind - Design system: Aperture - Dark mode: yes - Access: premium (Atheros AI Pass) - Tags: timeline - Page: https://builder.atheros.ai/components/timeline-scroll - Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_timeline_scroll/preview-ae97abf33996.webp ## Features - Semantic ordered-list markup (`
    `/`
  1. `) so the route sequence is meaningful to assistive technology - Center rail fills with a cool glacial-azure gradient as the page scrolls โ€” a rAF lerp eases `--ts-progress` toward the scroll target so the fill and marker glide without stepping - A glowing marker rides the leading edge of the gradient fill down the rail - Day badges are flat tinted pills anchored immediately beside their rail node โ€” the active day fills with a deep primary while the rest stay quiet, so badge, node, and card read as one row - A dashed connector tick links each rail node to its card, fading in with the reveal - Alternating cards interleave vertically for a tight zigzag rhythm around the rail - Entries reveal on scroll via IntersectionObserver, sliding gently from their side with a per-element cascade (photo, title, meta, body, tags, footer) using only `transform` and `opacity` - Card photos fade and settle in when they finish loading (`is-loaded` class) over a tinted placeholder, so images never flash in - Each card carries a wide destination photo, a title, a location-and-country line with a flag marker, a short description, an activity-tag row, and an edge-to-edge tinted footer band (an accent-tiled โ€œNext stopโ€ block with destination and distance/duration left, Visit action right) - Country flags are emoji (๐Ÿ‡ต๐Ÿ‡น ๐Ÿ‡จ๐Ÿ‡ญ ๐Ÿ‡ฎ๐Ÿ‡น ๐Ÿ‡ฌ๐Ÿ‡ท ๐Ÿ‡ณ๐Ÿ‡ด) stored per stop in `js/data.js`, so no image assets or hand-drawn icon markup are needed - Data-driven from `js/data.js` through an async `js/api.js` fetch seam (`fetchTimeline`) with a shimmer skeleton that mirrors the final zigzag layout, so nothing jumps when content lands - A text-only "Follow the route" wayfinding control under the header smooth-scrolls to the first stop and fades away once the journey is underway - Visit actions use the exact design-system selection fill with its paired selection ink; only their supporting border remains softly mixed - Wayfinding and Visit controls retain at least a 44px interactive target - A cool page background wash keyed off the azure palette, with smooth dark/light transitions - Collapses to a single left-aligned column on narrow screens - Fully respects `prefers-reduced-motion` (instant reveals, snapped rail progress, instant scroll-to) ## Accessibility - **Semantic order** โ€” Stops are an `
      ` of `
    1. ` so sequence is conveyed without visuals - **Decorative art** โ€” Rail, marker, and node dots are `aria-hidden="true"` - **Flag markers** โ€” Flag emoji are `aria-hidden="true"` and paired with a visible country name - **Real links** โ€” Each card has a native `` with an explicit `aria-label` - **Labeled badges** โ€” Day badge buttons carry `aria-label` and `aria-current="step"` when active - **Wayfinding control** โ€” "Follow the route" is a native `