The camera dives into a focal point: the first view rushes past and blurs out while the second grows into place from deep behind, with light streaks for speed. Switching back zooms out the same way.
Europe
12 offices
npx shadcn@latest add https://hyperblur.dev/r/transition-zoom-through.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/transition-zoom-through.tsx.
import { TransitionZoomThrough } from "@/components/hyperblur/transition-zoom-through"
<TransitionZoomThrough active={zoomed} origin={{ x: 20, y: 60 }} from={<Region />} to={<Street />} />| 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 | 2800 | Milliseconds between switches when autoPlay is on. |
| duration | number | 1100 | Dive time in milliseconds. |
| origin | { x: number; y: number } | { x: 50, y: 50 } | Focal point of the dive, in percent of the frame. |
| depth | number | 3.2 | How far the first view scales up as it rushes past. |
| streaks | boolean | true | Show the radial speed streaks. |
| accent | string | "#7fb3ff" | Color of the streaks and the flash at the focal point. |