A push navigation: the new view slides over the old one, which drifts back and darkens under it. Children marked data-depth 1 to 3 inside either view travel at their own speed for depth.
Step 1 of 3
Plan the route
Drop pins, we work out the stops and the fastest order.
npx shadcn@latest add https://hyperblur.dev/r/transition-parallax-slide.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/transition-parallax-slide.tsx.
import { TransitionParallaxSlide } from "@/components/hyperblur/transition-parallax-slide"
<TransitionParallaxSlide active={step === 2} from={<StepOne />} to={<StepTwo />} />| 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 | 900 | Slide time in milliseconds. |
| direction | "left" | "right" | "left" | Direction the content moves when switching to the second view. |
| parallax | number | 24 | Extra travel in pixels per depth level for data-depth children. |