Teaser-style words slam into frame one beat at a time with a camera shake, a white flash and an anamorphic flare, then resolve into the title and release date. It loops for showcases or plays once.
npx shadcn@latest add https://hyperblur.dev/r/cinema-trailer-slam.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cinema-trailer-slam.tsx.
import { CinemaTrailerSlam } from "@/components/hyperblur/cinema-trailer-slam"
<CinemaTrailerSlam words={["This summer", "No one", "Gets out"]} title="Undertow" release="July 4" />| Prop | Type | Default | Description |
|---|---|---|---|
| words | string[] | ["This winter", "One signal", "Changes", "Everything"] | Beats shown in order before the title card. |
| title | string | "Deep Relay" | Title shown after the last beat. |
| release | string | "Only in theaters 11.27" | Monospace line under the title between two accent rules. |
| studio | string | "From the studio behind Coldwater" | Small line above the title. Empty hides it. |
| beat | number | 1150 | Milliseconds each word stays on screen. |
| hold | number | 3600 | Milliseconds the title card holds before the sequence restarts when loop is on. |
| loop | boolean | true | Restarts the sequence after the hold. The Replay button always restarts it. |
| ctaLabel | string | "Watch the trailer" | Label of the main link on the title card. |
| ctaHref | string | "#" | Destination of the main link. |
| accent | string | "#4aa8ff" | Color of the flare, the glow behind the words and the progress pips. |
| onComplete | () => void | undefined | Called each time the title card appears. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the title. Use h2 when the page already has an h1. |