React Wavy Background
Simplex noise wave lines with blur—flowing colored ribbons creating calm ambient motion
React Wavy Background preview
Soft, flowing wave lines driven by simplex noise. Each wave follows the noise field, creating organic motion that never quite repeats. A blur filter softens everything into these dreamy, ethereal ribbons of color that blend as they cross. The default palette goes sky blue, indigo, purple, fuchsia, cyan—very calming. It's canvas-based, so smooth 60fps even with the blur filter. The whole thing has this serene, meditative quality that works well for wellness apps, music players, creative portfolios, or any interface where you want ambient motion without distraction. You can tweak the speed to be barely perceptible or more noticeable.
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 wavy background into my projectRelated Components
Aurora Background
Gradient aurora waves
Vortex
Particle flow vortex
Gradient Animation
Animated gradient mesh
Ripple
Concentric wave circles
Light Waves
Flowing light animation
Paths
Animated SVG curves
FAQ
Was this page helpful?
Sign in to leave feedback.
Wave Grid
3D perspective wave grid with animated surface mesh and dynamic lighting
Wind
Animated wind-field streamline background for React and Next.js — thin curved lines trace a Perlin-noise vector field in real time, producing a scientific, weather-map visualisation with fully tunable density, scale, and speed.