Skip to content

component

Aisol Reel Rail

By ulz song

Details

Summary

Aisol Reel Rail is a horizontal rail of video cards where only the card in focus plays.

Description

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

Introduction

Video cards — one plays at a time

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600178529/79/99/119/139/15
  • All · #7852