React Wind Background
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.
React Wind Background preview
Imagine pulling up a weather map and watching the wind itself draw across the screen. That's the signature of the Wind background — a flowing field of thin streamline curves that trace the local direction of a self-contained 2D gradient-noise vector field, evolving every frame as the underlying field slowly breathes. It's rendered on a single canvas with a hand-rolled noise function (no external libraries), so it drops into any React or Next.js project with zero dependency diff. The result reads as atmospheric, scientific, and calm — a perfect fit for data-heavy SaaS heroes, climate or infrastructure dashboards, research-lab landing pages, or any product that wants to quietly signal "something is being measured here".
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 wind background into my projectRelated Components
Vortex
Simplex-noise particle vortex with heavy glow
Paths
Static bezier path mesh
Wavy
Stacked horizontal flowing waves
Aurora
Emerald northern-lights gradient sheets
Light Waves
Ambient vertical color washes
Fog
Drifting horizontal atmospheric mist
FAQ
Was this page helpful?
Sign in to leave feedback.