Chrono Rail Timeline

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

3. Add the effect HTML anywhere in your <body>:

Code snippet omitted: it ships with the download.

Swap chrono__facts for chrono__changes (a plain <ul>) on entries where a short "what changed" list reads better than labelled facts. Both carry the same distance-from-head fade.

Using It With Your Own Design

What the effect needs from your markup. Only the data- hooks, never the class names. [data-chrono] is the pinned section; inside it [data-chrono-track] is the element the rail transform is written to and [data-chrono-inner] is the flex row of entries that the settle glide moves. Every [data-chrono-entry] must be a direct child of the inner row, laid out horizontally and in chronological order. Everything else is optional and simply not driven if absent: [data-chrono-card] (the child that blooms on settle — put it inside the entry, not on the entry itself), [data-chrono-readout], [data-chrono-era-title], [data-chrono-band], [data-chrono-ruler], [data-chrono-live] (a polite live region announcing the entry under the head), and [data-chrono-jump="<era>"] buttons. The jump buttons are positioned by the script at the scroll position of their era's first entry, and their shared parent gets an is-placed class once that has happened, so style the un-placed state as a plain row: that is what a visitor with no JS gets.

Per-entry data: data-chrono-stamp is written into the readout, data-chrono-era pairs the entry with a jump button, data-chrono-era-name fills the era title, data-chrono-hue (0-360) sets the era wash hue.

What is only the demo's styling. The grey ground, the paper card with its hairline border, Mona Sans with tabular figures for the dates, the hot pink on the playhead and the live entry, the photographs in chrono__mark (baked into assets/img/), the small arrow caps on the playhead, and the ruler's ink hairlines. Restyle all of it freely; none of it is read by the script. Only --chrono-fringe, --chrono-flare and --chrono-blur on the section, and --chrono-t on each entry, are written by the script, so keep whatever you want to respond to velocity or distance reading those.

CSS the effect depends on:

• [data-chrono-inner] must be display: flex; width: max-content with transform-style: preserve-3d, and its parent chain must set min-width: 0 or the max-content rail stretches the whole page sideways.
• Put overflow: hidden on the element above the one carrying perspective, not on the perspective element itself. Clipping on a perspective ancestor clips its 3D descendants in perspective space, and an unfiltered entry sitting at z: 0 — the one under the head — vanishes from the raster while every measurement still says it is on screen.
• The section is height: 100svh; the pin distance is scroll length, not section height. The shipped card fills the deck's height (the viewport stretches, the inner row is height: 100%, and the photograph row is minmax(0, 1fr)), because the product frame is short and wide and a content-height card floats in it. On phones the card sizes to its content instead, or the photograph becomes a poster.
• Every entry publishes its distance from the head as --chrono-t (0 at the head, 1 at the edge of the focus range). Fade your body copy and any detail block off that value — the shipped CSS uses calc(1 - var(--chrono-t, 0) * 1.15) on the lead and * 1.35 on the detail block — or a rail of full-length entries reads as a wall of unreadable small print. Anything you fade this way must be readable at --chrono-t: 0, which is the state without JS.
• The entries carry no .has-js pre-hide: nothing here is a reveal, so without JS the rail renders as a plain horizontal row of readable cards.
• Restore a static layout under prefers-reduced-motion (the shipped CSS turns the rail into a grid). The script adds chrono--static in that branch, so style that class too if your markup differs.

Options

Set on the [data-chrono] element.

Accessibility

• Reduced motion: prefers-reduced-motion: reduce skips the pin entirely. The rail becomes a static grid of entries, all readable, in both CSS and the JS branch.
• Keyboard: Left/Right move one entry and work as soon as the rail is on screen, with no click or tab first — the listener sits on the document and only claims the key while the rail owns the middle of the viewport, so the rest of the page still scrolls normally. Home and End jump to the ends but stay scoped to focus inside the rail, because taking those from a visitor who wants the top or bottom of the document costs more than it buys. The rail is still focusable, and the era marks on the ruler are real <button> elements with aria-current and a padded press target around the hairline tick. Anything focusable inside an entry brings that entry under the head, so tabbing never lands on something off screen.
• Announcement: [data-chrono-live] is a polite live region carrying the year and title of the entry under the head. Scrolling moves focus nowhere, so without it the rail is silent to a screen reader.
• No JS: nothing is pre-hidden. Without the script the rail is a plain horizontal row of readable cards.
• Touch: the mechanic is unchanged on a phone — vertical scroll still drives the rail. One entry fits beside the head, so the distance-from-head compression does more of the work, and the entry type steps down rather than the content being cut.

Dependencies

• GSAP 3.15.0
• ScrollTrigger
• Lenis (optional; era jumps route through it when it is present)