FX · Interactions

Layers that drift with the pointer at different depths.

Depth on demand

bash
npx shadcn@latest add https://www.rad-ui.com/r/pointer-parallax.json
React
import PointerParallax from "@/components/fx/pointer-parallax"

<PointerParallax strength={28}>
    <PointerParallax.Layer depth={-0.4}>…</PointerParallax.Layer>
    <PointerParallax.Layer depth={0.8}>…</PointerParallax.Layer>
</PointerParallax>
  • Purely visual: layout, reading order and focus order never change.
  • Touch input never moves the layers.
  • prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) keeps every layer still.
PropTypeDefaultDescription
strength
number
24

Max shift in px for depth 1.

Layer depth
number
0.5

How far a layer moves; negative moves the other way.

Edit this page on GitHub →