design-infraReport a problem or share feedback← Catalog
Kinetic field
curatedtheme-awarefreeoc/kinetic-field
Original cursor-reactive particle sculpture with Orbit, Wave and Sphere forms, free Motion springs, pause/play, an SVG fallback and offscreen cleanup. Theme-aware Canvas 2D; no GPU or Motion+ requirement.
$
npx shadcn@latest add @design-infra/kinetic-fieldnpm deps: motion
Our notes
♥ The user explicitly asked to keep Kinetic Field in the homepage examples. Retain its pointer-responsive particle forms and controls.Live demo — under each design system
brutalist-mono
A small playground for good motion.
editorial
A small playground for good motion.
linear-dark
A small playground for good motion.
soft-glass
A small playground for good motion.
- Source
- oc
- Kind
- component
- Categories
- background, 3d
- Use as
- drop-in — replaces your component
- Applies to
- backgroundhero
- Motion
- on loop, cursor, state · medium · canvas + motion · medium cost · respects reduced motion
- Tags
- oc
- Live demo
- www.owencoonahan.xyz
Similar
Compare all 4 →- 3D Marqueeaceternity/3d-marqueeA 3D Marquee effect with grid, good for showcasing testimonials and hero sections
- Canvas Fractal Gridcult-ui/canvas-fractal-gridInteractive canvas-based fractal dot grid with mouse tracking and wave effects
- Canvas Reveal Effectaceternity/canvas-reveal-effectA dot background that expands on hover, as seen on Clerk's website