Wind Background for React

Q: How do I make it denser or swirlier?

density sets the streaks per area (1 is about one per 1,100 px², up to 1,500 in all), scale sets the size of the eddies, and direction turns the prevailing wind, in degrees: 0 blows toward the right, 90 down.

Q: Can I change the color?

Pass lineColor, any CSS color, or set --wind-color on the component. By default it's your text color with a hint of sky blue, so the streaks are dark on a light page and light on a dark one, and they follow a theme switch. Depth and the tails' fade set their opacity.

Q: Does it react to the pointer?

Only with interactive: within about 140 px of the pointer the wind turns aside into a swirl. Touch never stirs it, so scrolling on a phone isn't disturbed.

A wind map behind your content: fine streaks ride a slowly shifting current around invisible eddies, each trailing a long tail that fades out. For React with Base UI, when a weather, climate or data page should look like something is being measured.

A wind map behind your content: fine streaks, about 840 in a 1280 × 720 box, ride a prevailing current that bends around invisible eddies, each trailing a long tail that fades out, while the whole field slowly shifts. They come in two depths: most are fine, faint and slower, a third are brighter and quicker, so the air has layers. The current is a smooth noise field turned around the direction you choose, and the streaks are the text color with a hint of sky blue. It's a small canvas simulation with no dependencies that runs only while it's on screen, and with reduced motion it draws one still frame of longer streamlines.

Use it behind weather, climate, energy and research pages, or a data-heavy hero. For a swirling particle field, use Vortex; for fixed curved field lines, Magnetic Field; for falling streaks, Rain; for the classic drifting dust, Particles.

PreviewCode

Installation

Part of Pro

Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.

Get Pro Sign in

Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Usage

import { Wind } from "@/components/ui/wind";

<Wind className="flex min-h-[480px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Read the weather</h1>
</Wind>

Wind is a container: give it a size, put your content inside, and the streaks sit behind it. The canvas is transparent, so your page's background shows. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

In a card

density={0.6} thins the streaks for a small card and scale={2} makes the eddies half as big and twice as many. With interactive, the wind swirls around the pointer as it moves over the card.

PreviewCode

Color

lineColor takes any CSS color, here the theme's primary. direction={-20} turns the prevailing wind 20° up from the right, and speed={1.5} makes it half again as fast.

PreviewCode

Accessibility

The canvas is decoration: it's hidden from assistive tech and never takes the pointer, so your content is read and clicked as usual. With reduced motion it draws the field once, still, and ignores the pointer. Nothing flashes: each streak grows in from a point and shrinks away when it ends, a few at a time, never all at once.

The streaks are thin, and only the newest part of a near streak is drawn at full strength, so copy on top in text-foreground stays readable. A high density or a strong lineColor behind body text deserves a scrim.

FAQ

What am I looking at?

Streaks carried along a wind field that slowly changes, like a weather map. Each streak follows the current, read smoothly between the points of a 24 px grid, and draws its recent path as a tail that fades toward the end. After a few seconds, or when it leaves the box, it stops, its tail catches up, and it grows in again somewhere else.

Why a canvas when most backgrounds are CSS?

The trails follow curves through a field that changes over time: that's a simulation, and CSS can't move a thousand points along changing curves. The canvas runs one loop of well under half a millisecond a frame at 1280 × 720, stops when the box scrolls out of view, and the browser pauses it in a hidden tab.

How do I make it denser or swirlier?

density sets the streaks per area (1 is about one per 1,100 px², up to 1,500 in all), scale sets the size of the eddies, and direction turns the prevailing wind, in degrees: 0 blows toward the right, 90 down.

Can I change the color?

Pass lineColor, any CSS color, or set --wind-color on the component. By default it's your text color with a hint of sky blue, so the streaks are dark on a light page and light on a dark one, and they follow a theme switch. Depth and the tails' fade set their opacity.

Does it react to the pointer?

Only with interactive: within about 140 px of the pointer the wind turns aside into a swirl. Touch never stirs it, so scrolling on a phone isn't disturbed.