scrolling-index-dual-rail

name	scrolling-index-dual-rail
description	motion-graphic primitive — paired text-list + media-list rails scrolling vertically in lock-step. text rail on left, media rail on right. each row advances together as the user "scrolls" through an archive. canonical hermès sessions layout. renderer = hyperframe-gsap (html + css scrolling is more natural than remotion).

scrolling-index-dual-rail

Purpose

Render two vertically-scrolling rails — a text list (titles) on the left, a media list (thumbnails) on the right — moving in lock-step. As rows pass the focal center, both the text and the corresponding media row are highlighted.

The hero mechanic of SP-D editorial-magazine pack.

Params

{
  "viewport_height_pct": 0.92,
  "viewport_radius_px": 40,

  "text_rail": {
    "x_pct": 0.05,
    "width_pct": 0.40,
    "align": "right",
    "font_family": "Cormorant Garamond",
    "font_size_px": 56,
    "line_height_px": 96,
    "font_style": "italic"
  },

  "media_rail": {
    "x_pct": 0.48,
    "width_pct": 0.50,
    "thumbnail_size_px": [320, 400],
    "thumbnail_radius_px": 16,
    "thumbnail_gap_px": 24,
    "stack_count_visible": 3
  },

  "rows": [
    { "title": "Session 02", "media_src": "assets/s02.mp4" },
    { "title": "Sessions", "media_src": "assets/sessions.mp4" }
    // …
  ],

  "scroll_velocity_px_per_sec": 60,
  "scroll_direction": "bottom-to-top",
  "easing": "linear",

  "fade_mask_top_pct": 0.08,
  "fade_mask_bottom_pct": 0.08,

  "active_row_focal_y_px": 960            // canvas_h / 2 for 1920-tall
}

Behaviour

1. Render the viewport (rounded-rect) with the two rails inside.
2. Animate transform: translateY on each rail in lock-step.
3. Apply CSS mask-image: linear-gradient(...) for soft top/bottom fades.
4. Each thumbnail in media_rail is a real <video autoplay loop muted> element.
5. Each row's opacity ramps based on distance from active_row_focal_y_px (see active-row-darken effect).

Style pack overrides

• SP-D (editorial-magazine) — default. Off-white bg, ink text.

Quality Checks

• Both rails scroll in true lock-step (same translateY at same frame).
• Inner videos are real video, not stills.
• Fade masks render — content fades cleanly at viewport edges.
• Scroll is linear, no easing.

Failure Modes

• Rails drift out of sync. Use a single shared translateY variable, not two.
• Thumbnails are static images. Switch to <video> elements with autoplay loop muted.
• Fade masks invisible. Use CSS mask-image not linear-gradient overlay (which only fades to one color).