The right half of the view lifts at the spine and turns over like a magazine page, with the next view printed on its back. Shading follows the angle of the page as it travels.
Salt, wind and the long coast road
Three weeks along the Atlantic edge, from Porto to Sagres.
npx shadcn@latest add https://hyperblur.dev/r/transition-page-turn.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/transition-page-turn.tsx.
import { TransitionPageTurn } from "@/components/hyperblur/transition-page-turn"
<TransitionPageTurn active={page === 2} from={<SpreadOne />} to={<SpreadTwo />} />| 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 | 3000 | Milliseconds between switches when autoPlay is on. |
| duration | number | 1100 | Turn time in milliseconds. |
| paper | string | "#111111" | Color under the content of the turning page. |