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).