Backgroundprototypev0.1.0

Mouse Reactive Gradient

A surface with a soft radial gradient glow that follows the pointer, Apple-subtle spotlight style. Pointer position drives CSS custom properties directly (rAF-throttled), so it repaints without React re-renders or layout thrashing. Ships with a static fallback for touch and reduced-motion, and an opt-in subtle tilt.

Demo

Move your cursor

The glow and tilt follow the pointer inside this card. Touch devices and reduced-motion get a static fallback.

Install

npx shadcn add https://motion.thesafari.cz/r/mouse-reactive-gradient.json

Requires the @safari registry namespace configured in components.json, or use the raw URL above directly with the shadcn CLI.

Metadata

Compatibility: React >=19.0.0 · Tailwind >=4.0.0 · Client-only
Browsers: chrome >= 100, safari >= 16, firefox >= 100
Mobile strategy: static fallback
Reduced motion: Guarded at mount via matchMedia('(prefers-reduced-motion: reduce)'). When it matches, no pointer listeners are attached at all — the gradient stays fixed at the surface center and the tilt transform (if enabled) is neutralized to `transform: none` in CSS, in addition to the global reduced-motion rule in the app stylesheet.
Performance: ~1.5KB gzip, zero runtime dependencies — Listeners are scoped to the surface element itself (pointermove/pointerleave), not window/document, so there is no offscreen cost — the browser simply never fires events for a surface the pointer isn't over. Pointer updates are rAF-throttled (one pending update coalesced per frame) and only touch CSS custom properties on the surface node — no layout reads/writes in the hot path beyond the one getBoundingClientRect() per move, no state, no re-render. Verified mount/unmount cycles clean up all listeners and cancel any in-flight rAF (no leaks).
Accessibility: Purely decorative background layer, marked aria-hidden. Does not trap focus, does not affect tab order, and children remain fully readable/interactive on top of it. No motion is imposed on users who have not opted into precise pointer input or who have prefers-reduced-motion set.
Known limitations: pointer: fine gating means the effect is intentionally inert on touch/coarse-pointer devices — this is a deliberate fallback, not a bug.
Tilt uses a CSS transform on a wrapping layer around children; deeply nested 3D/transform-dependent children of their own may interact with transform-style: preserve-3d in unexpected ways.
Gradient color uses color-mix(), which requires a modern browser baseline (already reflected in compatibility.browsers).
License: MIT

Version

v0.1.0 (immutable)

View registry JSON →