Film Strip Hero

A hero section for photography, film, event and portfolio home pages: a left-aligned title, copy and CTAs on top, and below them a dark film strip pinned to the bottom of the section that bleeds to both edges — two rows of sprocket holes with 3:2 frames in between, each stamped with an edge code like 01A or 02A in the bottom-left corner. The film loops sideways at a steady speed, runs faster the faster the page scrolls, and reverses when you scroll up; rest the pointer on a frame and it enlarges while the rest dim, and the film springs down to 20% speed. Without images, every frame draws a warm gradient and a geometric scene placeholder.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<FilmStripHero/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/film-strip-hero.en.json

Usage

import { FilmStripHero } from "@/components/ui/film-strip-hero";

<FilmStripHero
  eyebrow="Sandbar Pictures · Spring Screening 2026"
  title="One roll of film, twenty-four frames of everyday life"
  subtitle="A year of work from eight street photographers, screened back to back."
  primaryAction={{ label: "Book a visit", href: "/tickets" }}
  secondaryAction={{ label: "See the lineup", href: "/lineup" }}
  frames={[
    { src: "/photos/harbor.jpg", alt: "A fishing harbour at dawn" },
    { src: "/photos/market.jpg", alt: "Stalls at an evening market" },
    { src: "/photos/alley.jpg", alt: "An old alley after the rain" },
  ]}
  speed={48}
/>

Inside a nested scroll container

By default the component tracks window scroll. When it sits inside a fixed-height overflow-y-auto container, pass that container's ref to container. The velocityBoost speed-up is driven by the container's scroll velocity instead of the window's.

const scrollerRef = React.useRef<HTMLDivElement>(null);

<div ref={scrollerRef} className="h-[400px] overflow-y-auto">
  <FilmStripHero container={scrollerRef} />
</div>

When the window itself is the scroll container, container can be omitted and behavior is unchanged.

Props

FilmStripHeroFrame

FilmStripHeroAction

CSS variables

How it works

• The offset accumulates frame by frame with useAnimationFrame; the content is duplicated once and the offset loops between minus one copy width and 0. Every cell width plus gap is a multiple of 24px, so the sprocket holes line up at the seam too.
• Scroll velocity runs through useScroll → useVelocity → useSpring (stiffness 400, damping 50) and maps to a 0–4 extra multiplier; scrolling up reverses the film until you scroll down again.
• On hover the frame scales to 1.06 and the others drop to 60% opacity (200ms), while the whole strip springs down to 20% speed instead of stopping dead.
• Offset updates stop while the strip is off-screen; the CSS variable is re-read every 500ms, so speed changes from Theme Studio or global styles apply live.

Accessibility

• The root is a section with aria-labelledby pointing at the title; switch the heading to h2 with as to avoid multiple h1s on a page
• The film strip is decorative and fully aria-hidden; when frames carry alt, an sr-only list exposes the frame descriptions to screen readers
• When keyboard focus lands on a CTA inside the section (focus-within), the film slows to 20% as well
• CTAs are a or type="button" with a focus-visible ring
• When the user has reduce motion enabled, the film stops looping and shows a static composition, scroll boost and hover enlarge are disabled, and the entrance becomes a 150ms fade