Shadcn.io is not affiliated with official shadcn/ui
React Resonance Background
Chladni resonance background for React and Next.js — particles chase morphing standing-wave patterns on a canvas, producing bilaterally symmetric nodal fields that continuously rearrange.
React Resonance Background preview
Based on Ernst Chladni's 1787 vibrating-plate experiment, rebuilt in vanilla canvas with zero dependencies. Over two thousand particles individually hunt the minima of a morphing harmonic field, settling on its zero-crossing lines the same way sand grains settle on a vibrating membrane. Two harmonic modes drift independently over time so the nodal pattern never repeats — particles abandon old lines and swarm onto new ones in unbroken motion. Perfect for scientific landing pages, research dashboards, generative-art portfolios, and any hero where motion should read as deliberate rather than decorative.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this background for you — no copy-paste, no CLI:
use shadcnio to install the resonance background into my projectRelated Components
Vortex
Simplex noise particle vortex with glowing trails
Constellation
Connected node network
Topography
Nested contour rings like a terrain map
Magnetic Field
Curved field lines between two poles
Wavy
Stacked standing-wave lines
Paths
Animated bezier curves
FAQ
Was this page helpful?
Sign in to leave feedback.
Reflection
Aurora-style flowing gradient sheets mirrored as a rippled water reflection for React and Next.js — the top half drifts like northern lights while the bottom half ripples back as if painted on a still Nordic lake.
Retro Grid
80s synthwave perspective grid with infinite scrolling animation—that classic Tron/outrun look