Tornado Background for React

A ceiling of dark cloud drifts across the top of the box and turns slowly over a funnel that drops from it to the ground on the end side of the box. Bands of condensation wind up around the funnel, the whole column leans slowly from side to side, debris spins at its foot and dust blows along the ground. Every part is a gradient or a noise texture the browser draws once; CSS turns, slides and leans them, so nothing repaints and no script runs. It follows your theme: a pale green-grey storm on a light page, a night storm on a dark one.

Use it for a weather or alert page, an "intense" product launch or a hero with a storm in it. For a whirlpool of streaks seen from above, use Vortex; for gusts streaking sideways, Wind; for plumes that rise instead of spin, Smoke; for the rest of the storm, Lightning.

Installation

Usage

import { Tornado } from "@/components/ui/tornado";

The storm fills the box behind whatever you put inside, with the funnel on the end side (on the right, or the left on a right-to-left page), so your copy has the open sky. Give the container a height; for the whole page, render it empty with className="fixed inset-0 -z-10".

<Tornado className="flex min-h-[420px] items-center px-12">
  <h1 className="text-4xl font-semibold">Category five</h1>
</Tornado>

Demos

Dust storm

dustColor takes any CSS colour; here sandy dust, a wider funnel (funnelWidth={1.3}) and a slower spin (speed={0.6}). The card adds the dark class to its own container, so it shows the night storm on a light page too.

In a card

A narrower funnel (funnelWidth={0.8}) that stands still (sway={false}), in a small card. The funnel, the clouds and the dust are sized from the box, so the storm keeps its shape at any size.

Accessibility

The storm is decorative: it's hidden from assistive tech and never takes the pointer, and your content stays on top in normal flow. With reduced motion every part stops where it is, so the storm stays as a still picture. Nothing flashes.

The sky keeps body text in your foreground colour (text-foreground) above 4.5:1 in both color schemes, the funnel included; keep long copy in the open sky on the start side for the calmest read. The spin is a physical direction, so it isn't mirrored on right-to-left pages; only the funnel's place is.

FAQ

API Reference