Frame Sequence Hero
A scroll-scrubbed video played as 207 individual frames on a canvas. Every frame is preloaded before the trigger is created, so scrubbing never lands on a blank canvas, and each draw recomputes its own cover fit so the sequence fills any aspect ratio without distortion. Over the same pin the nav fades in the first tenth, the headline recedes on Z and fades by a quarter, and the product shot flies in from a thousand pixels forward.
npx shadcn@latest add https://ui.aryank.space/r/frame-sequence-hero.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| frameCount / frameBase | number / string | 207 / Blob asset base | Sequence length and the base URL. Frames are addressed as frame_0001.jpg through frame_0207.jpg. |
| productImage / clientLogos / logoImage | string / string[] | Blob-hosted assets | The dashboard shot, trust logos, and the nav mark. |
| heading / brand / navLinks / outroHeading | string / string[] | BLANK copy | Navigation and editorial copy. |
| embedded | boolean | true | Own the scroll container so it fits a bounded box. Set false to drive it from the window scroll. |
headingtextThe hero headline that recedes on Z.
frameCount / frameBasetextHow many frames to load and where they live.
gsaplenis