Small behaviours. Shared everywhere.

Pulls its child toward the pointer, with a smooth falloff and a hard travel cap.

<Magnetic strength={0.4} range={110}>
  <button>Get started</button>
</Magnetic>

Elastic lean, drift and settle, with squash and stretch on press.

<Jelly elasticity={0.35} intensity={0.18}>
  <Card />
</Jelly>

Rigid perspective tilt with an optional specular highlight.

<Tilt max={4} glare>
  <Cover />
</Tilt>

Expands one surface into another as a single object, with dialog semantics, a focus trap and focus restoration.

<Morph label="Details" expanded={<Details />}>
  <Preview />
</Morph>

Translucent surface with a pointer-tracked specular highlight and refracting edge. No SVG filters, no per-frame JavaScript.

<LiquidSurface intensity={0.2} blur={18} tint="cloud">
  <Content />
</LiquidSurface>

Shares one pointer subscription across a set of items, giving each a springed 0–1 closeness value.

<Proximity distance={120} axis="x">
  {items.map((item) => <DockItem key={item.id} {...item} />)}
</Proximity>

Lights the face of a surface under the pointer — the counterpart to edge glow.

<Spotlight size={300} intensity={0.5}>
  <Card />
</Spotlight>

Pointer-driven depth: layers inside move by different amounts from one shared pair of motion values.

<Parallax>
  <Face />
  <ParallaxLayer depth={0.6}><Badge /></ParallaxLayer>
</Parallax>

Press feedback that answers pointer and keyboard alike, as spreadable handlers plus a scale motion value.

const press = usePressSpring({ scale: 0.96 });
<motion.button style={{ scale: press.scale }} {...press.handlers} />

The shared motion vocabulary, plus hover, focus and press feedback in one wrapper.

<Spring hoverScale={1.03} preset="snappy">
  <Chip />
</Spring>

Ambient light that follows the pointer across a region.

<CursorGlow size={420}>
  <section>…</section>
</CursorGlow>

The hook underneath the light: writes pointer position into CSS variables so lighting stays pure CSS.

Low-level hook for custom surfaces; Cursor Glow is the complete wrapper. See Cursor Glow

const ref = usePointerGlow<HTMLDivElement>({ range: 80 });