A split-screen poster for two leads, a rain-soaked night harbor against a desert at dusk, divided by a glowing diagonal seam. Hovering or focusing a side pushes the seam across, opens that character's line and recolors the shared title.
npx shadcn@latest add https://hyperblur.dev/r/cinema-split-reveal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cinema-split-reveal.tsx.
import { CinemaSplitReveal } from "@/components/hyperblur/cinema-split-reveal"
<CinemaSplitReveal title="Day / Night" left={{ name: "Ava", role: "Day shift", quote: "...", accent: "#ffd166" }} right={{ name: "Leo", role: "Night shift", quote: "...", accent: "#7c9cff" }} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Two Shores" | Title drawn across both halves, tinted by each side. |
| tagline | string | "A Coldwater original · Season one" | Pill at the top center. Empty hides it. |
| left | { name: string; role: string; quote: string; accent: string } | Mara, harbor police | Content and accent of the left half. |
| right | { name: string; role: string; quote: string; accent: string } | Elias, salvage pilot | Content and accent of the right half. |
| autoPlay | boolean | true | Alternates between the sides until the user interacts. |
| interval | number | 2600 | Milliseconds between automatic moves. |
| slant | number | 6 | Horizontal offset of the seam in percent at the top and bottom. 0 makes it vertical. |
| onSideChange | (side: "left" | "right" | null) => void | undefined | Called when the user picks a side or leaves the section. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the title. Use h2 when the page already has an h1. |