Framed Video Hero
A framed hero with a poster, an ambient video, and a control to pause the motion.
- Dependencies
- gsap
- Size
- 314 lines
- Controls
- 8 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/framed-video-hero.json1 · Dependencies
npm install gsap2 · Copy the source
components/onycx/framed-video-hero.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the framed-video-hero.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| poster / posterAlt | string | "/media/cinematic-hero/onex-hero.webp" | Poster image, loaded eagerly; empty alt marks it decorative. |
| videoSrc / videoType | string | "/media/cinematic-hero/onex-ambient.webm" / "video/webm" | Muted, looping, inline film (preload none) that fades in over 1.2s on loadeddata. Empty removes the film and its toggle. |
| topline | string | — | Status line beside the accent dot; newlines become breaks. |
| kicker / line1 / line2 / body | string | — | Headline block; line 2 is set at .62em and never wraps. |
| ctaLabel / ctaHref | string | — | Squared accent button with a split icon cell. |
| calloutLine1 / calloutLine2 | string | — | Right-hand callout with a −32° accent leader (hidden at 600px). |
| sideIndex / scrollLabel / scrollHref / centerCaption | string | — | Vertical 7px index, scroll cue and centre caption (hidden at 900px). |
| entrance | boolean | true | Fade the copy up 28px on mount; turn off when a preloader already reveals the page. |
| accent | string | "#ff652e" | Status dot, callout, CTA fill, film icon and focus outline. |