Hero Film
Cinematic hero with slow Ken Burns stills, film grain, a play control and chapter markers.
- Type: Hero section
- Styles: Dark, Gradient
- Licence: Charcoal UI Pro
About Hero Film
Hero Film fills the screen with slow-moving stills under a large headline, with film grain over the top, a play control for the showreel and chapter markers that fill as each scene plays.
It is a full-width hero section for React and Tailwind CSS 4, in a dark and gradient style. Preview it at any width above, then install it with one command.
When to use Hero Film
- Film and video production studios.
- Photographers and travel brands.
- Outdoor clubs and adventure companies.
- Festivals, bands and course trailers.
How it is built
Ken Burns animates each still, the chapter bar shows progress and lets visitors jump, and pausing stops the slideshow. Chapters are just a title and an image.
It is composed from Grain, Ken Burns, so installing it also installs those components, and you can restyle each one the same way you would on its own.
Goes well with Hero Film
Hero Film is part of 9 full templates, so you can see it in a finished page.
- Hartwell template: Let the pictures do the talking.
- Northlight template: Showreel first, everything else second.
- Summit template: Memberships, classes and coaches.
- Halden template: A band site: album, tour, merch.
- Reel template: Ten days, ninety films.
- Trailhead template: Guided hikes, every weekend.
- Darkroom template: A course people finish.
- Tideline template: A nonprofit site that raises money.
- Backstage template: Members-only videos, done properly.
- Hero Ember: A dark React hero section with drifting embers, an announcement pill and two CTAs
- Hero Split: A split React hero: copy on the left, a live product window with stats and a chart
- Hero Rotating: A React hero with a rotating headline word, email capture and avatar proof
- Hero Terminal: A developer React hero with light beams on a grid and a typing terminal
- Grain: A React film grain overlay that removes gradient banding
- Ken Burns: A React Ken Burns slideshow: slow pan and zoom crossfading through images
Install Hero Film
npx shadcn@latest add @charcoal/hero-filmHero Film is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- Does Hero Film work with Next.js?
- Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
- Can I change the copy and colours?
- Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.