Mouse Parallax Scene
Multiple layers shift with the mouse to create depth, with a gyroscope fallback.
Several ParallaxLayers inside a container follow the mouse inversely by a depth coefficient, smoothed with a spring, producing a camera-pan-like parallax depth; when the mouse leaves, every layer drifts gently back to centre, and on mobile devices the gyroscope drives it instead (staying static if permission is denied) — ideal for hero scenes and showcase cards.
npx shadcn@latest add https://webberui.com/r/mouse-parallax-scene.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<MouseParallaxScene />
Installation
npx shadcn@latest add https://webberui.com/r/mouse-parallax-scene.jsonOr, once registries are configured in components.json, install it as @webberui/mouse-parallax-scene.
Usage
import {
MouseParallaxScene,
ParallaxLayer,
} from "@/components/ui/mouse-parallax-scene";
<MouseParallaxScene
intensity={24}
className="relative h-80 overflow-hidden rounded-2xl"
>
<ParallaxLayer depth={0.3} className="absolute inset-0">
Background shapes
</ParallaxLayer>
<ParallaxLayer
depth={1}
className="absolute inset-0 flex items-center justify-center"
>
Main card
</ParallaxLayer>
<ParallaxLayer depth={1.7} className="absolute inset-0">
Foreground badge
</ParallaxLayer>
</MouseParallaxScene>Tip: make each layer's content slightly larger than the container (for example left-[-5%] w-[110%]) so the edges never show through during displacement.
Props
MouseParallaxScene
| Prop | Type | Default | Description |
|---|---|---|---|
intensity | number | 24 | Maximum displacement strength (px): how far a depth = 1 layer moves when the mouse reaches the edge |
tilt | number | 4 | Maximum tilt of the whole scene with the mouse (degrees); set 0 to turn off the 3D tilt |
stiffness | number | 120 | Spring stiffness; higher makes the layers follow more immediately |
damping | number | 18 | Spring damping; lower makes the residual wobble on return to centre more noticeable |
gyro | boolean | true | Whether to enable the gyroscope fallback on mobile devices |
className | string | — | Forwarded to the outermost container; use it to set the scene size, corner radius, and overflow |
children | ReactNode | — | Scene content — put several ParallaxLayers in here |
ParallaxLayer
| Prop | Type | Default | Description |
|---|---|---|---|
depth | number | 1 | Depth coefficient: 0 does not move at all, higher moves more; positive values move inversely to the mouse, negative values follow it |
className | string | — | Forwarded to the layer container, usually together with absolute inset-0 positioning |
children | ReactNode | — | Layer content |
Accessibility
- When the user has "reduce motion" enabled at the system level, every layer stays fixed and centred and tracks neither the mouse nor the gyroscope
- The displacement is purely CSS transform, so text and interactive elements inside a layer are still read and focused normally by assistive technology
- The iOS 13+ gyroscope permission is requested on the first touch; if it is denied or unsupported, the scene stays static and no error is thrown
- Decorative-only layers (mountain SVGs and the like) should carry
aria-hiddenorpointer-events-none— the demo code shows how
Easter Egg Trigger
A hidden interaction that listens for a key sequence to trigger an easter egg, with a progress indicator.
Roadmap Lane Board
A Now / Next / Later three-lane roadmap board where item cards move between lanes with shared layout animation, supporting both read-only display and interactive dragging.