A dark theater where the projector beam flickers on over the audience, dust drifts through the light and the screen runs a reel card before the title appears with scratches and flicker. Built for film clubs and screening nights.
The Northern Light Film Society presents
Restored prints · Every Friday · 11:45 PM
npx shadcn@latest add https://hyperblur.dev/r/cinema-projector-intro.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cinema-projector-intro.tsx.
import { CinemaProjectorIntro } from "@/components/hyperblur/cinema-projector-intro"
<CinemaProjectorIntro title="Noir Week" schedule="Seven nights · Seven classics" loop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| presenter | string | "The Northern Light Film Society presents" | Small line above the title on the screen. Empty hides it. |
| reelLabel | string | "Reel" | Word on the reel card before the number. |
| title | string | "Midnight Matinee" | Title projected on the screen. |
| schedule | string | "Restored prints · Every Friday · 11:45 PM" | Monospace line under the title. Empty hides it. |
| cta | { label: string; href: string } | null | { label: "See this month's program", href: "#" } | Glass pill under the audience with a live dot. null hides it. |
| duration | number | 12 | Seconds for the whole sequence, from the beam igniting to the end of the title hold. |
| loop | boolean | true | Repeats the sequence. When false it plays once and keeps the title on screen. |
| beam | string | "#cfe2ff" | Color of the projector light. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the title. Use h2 when the page already has an h1. |