A camera diaphragm of overlapping metal blades rotates open to reveal a city at dusk and the title, with a live f-stop readout. It cycles by itself or opens and closes on demand.
npx shadcn@latest add https://hyperblur.dev/r/cinema-aperture-open.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cinema-aperture-open.tsx.
import { CinemaApertureOpen } from "@/components/hyperblur/cinema-aperture-open"
<CinemaApertureOpen title="Opening night" blades={8} autoPlay={false} defaultOpen />| Prop | Type | Default | Description |
|---|---|---|---|
| kicker | string | "A film by Rafa Moreno" | Monospace line above the title. Empty hides it. |
| title | string | "Glass Harbor" | Title revealed inside the opening. |
| subtitle | string | "Premiere screening · Friday, 9:00 PM · Screen 2" | Line under the title. Empty hides it. |
| cta | { label: string; href: string } | null | { label: "Reserve seats", href: "#" } | White pill link. Not focusable while the iris is mostly closed. null hides it. |
| blades | number | 9 | Number of blades, from 5 to 14. |
| autoPlay | boolean | true | Opens, holds and closes in a loop until the user presses the iris button. |
| open | boolean | undefined | Controlled open state. Disables the automatic cycle. |
| defaultOpen | boolean | false | Initial state when uncontrolled. |
| onOpenChange | (open: boolean) => void | undefined | Called when the user presses the Open or Close iris button. |
| accent | string | "#ff5fa2" | Color of the title glow, the readout ticks and the button shadow. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the title. Use h2 when the page already has an h1. |