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 @compronents/frame-sequence-heroInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| 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



