Parallax Depth

A pointer-driven parallax scene. Stack <ParallaxLayer depth> children — positive moves with you, negative against.

pointercss-varsscene4 files · 193 locdeps: clsx, tailwind-merge

DEPTH

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/parallax-depth.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs parallax-depth

Usage

import { ParallaxDepth, ParallaxLayer } from "@/components/opus/effects/parallax-depth";

<ParallaxDepth className="h-96">
  <ParallaxLayer depth={-0.3}>sky</ParallaxLayer>
  <ParallaxLayer depth={1}>foreground</ParallaxLayer>
</ParallaxDepth>

API

Prop	Type	Default	Description
travel	number	30	Max travel for depth 1 (px).
ParallaxLayer.depth	number	1	Layer multiplier (negative = opposite).

Notes

Pointer position is written to CSS variables from one rAF loop — React never re-renders while you move, and the loop sleeps when idle.

← PreviousImage Trail Next →Liquid Glass