Cinematic Video Scrub
Cinematic hero that advances a background video frame by frame on scroll, with text overlays.
Install
npx shadcn@latest add "https://webberui.com/r/cinematic-video-scrub.json?t=<install token>"The whole page lands in app/templates/cinematic-video-scrub/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.
Sections it ships with
Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.
- 1
Scroll-Scrubbed Film Hero
A nav bar over a full-bleed black sticky frame stage that advances through six scenes frame by frame on scroll, with a REC timecode HUD.
hero - 2
Director's Note
An oversized pull quote lit by a parallax glow, closing on a cinematic manifesto paragraph signed by the director.
content - 3
Six Chapters
Six gradient frame-still cards labelled with scene number, runtime and location, surfacing in sequence as they slide in.
gallery - 4
Production Spec Bar
Six icon-and-figure pairs covering the 8K master, Atmos sound, runtime and shoot days.
stats - 5
Crew Behind the Film
A wall of six gradient circular portraits for the lead creatives, with names and roles.
team - 6
Watch and Subscribe
A release-trailer headline paired with an email sign-up form for first word on the premiere.
cta - 7
Footer
Studio blurb, three link columns and social icons, closing on a hairline-divided copyright row.
footer
What you get is source code
Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.
Browse the other 103 templates →