Pleated stage drapes swing shut from both wings with a lagging hem, a valance drops and a warm spot hits the closed curtain. The scene changes behind it and the drapes part again.
The Letter Arrives
Lyric Hall · 7:30 pm
npx shadcn@latest add https://hyperblur.dev/r/transition-curtain-call.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/transition-curtain-call.tsx.
import { TransitionCurtainCall } from "@/components/hyperblur/transition-curtain-call"
<TransitionCurtainCall active={actTwo} from={<ActOne />} to={<ActTwo />} />| Prop | Type | Default | Description |
|---|---|---|---|
| from | ReactNode | built-in scene | The first view, shown while active is false. You can also pass two children instead of from and to. |
| to | ReactNode | built-in scene | The second view, shown while active is true. |
| active | boolean | Controlled state. False shows from, true shows to. Pair with onActiveChange. | |
| defaultActive | boolean | false | Initial state when uncontrolled. |
| onActiveChange | (active: boolean) => void | Called whenever the view switches, including switches made by autoPlay. | |
| autoPlay | boolean | false | Switch back and forth by itself. Stops when the user prefers reduced motion. |
| interval | number | 3600 | Milliseconds between switches when autoPlay is on. |
| duration | number | 2000 | Full close, hold and open time in milliseconds. |
| color | string | "#5a1220" | Fabric color. The pleats are shaded from it. |
| trim | string | "#c9a45c" | Color of the hem and valance trim. |
| spotlight | boolean | true | Show the warm spot on the closed curtain. |