Aisol Reel Rail

Aisol Reel Rail is a horizontal rail of video cards where only the card in focus plays. Every other card holds its poster, so a page with ten clips downloads and decodes one at a time.

Focus comes from each card's own intersection ratio inside the rail. There are no scroll listeners and no measuring anywhere in the component — the browser keeps doing the scrolling and snapping, and the canvas stays still.

- Reduced motion is respected properly: autoplay turns off and every card gets a play button instead, so the clips are still reachable.

- The canvas shows posters only — no video element is created until the page is live.

- Playback is driven directly (play/pause on the element), so switching cards actually switches the clip.

What you control

• Reels as an array: title, subtitle, badge, video file or URL, poster image or URL, alt text, link — or bind a CMS collection through the reel slots

• Shape: portrait 9:16, landscape 16:9 or square

• Plays: the card in focus, on hover, or button only; loop on or off

• Turn and shrink for the cards leaving the centre, card width, gap, radius, arrows

• Card heading level, rail name and play/pause labels for screen readers, empty-state text

• Text size; accent, text, muted and card colours

Limits: one clip plays at a time by design. Clips are muted (browsers require it for autoplay).