Smoke Background for React

Soft plumes rise from below the bottom edge, swell, turn and thin out, like smoke from a fire or haze on a stage. Each puff is a gradient circle textured by one fixed noise image, and CSS keyframes move, grow and turn it; as it turns, its texture turns with it, which reads as the smoke curling. The puffs are placed from a seeded hash, so no script runs while it drifts. It follows your theme: pale smoke over a dark page, charcoal over a light one.

Use it for a dramatic hero, an event or music page, or a section that should feel atmospheric. For flat horizontal mist, use Fog; for the fire under the smoke, Fireplace; for coloured clouds with stars, Nebula; for soft colour washes that stay put on paper, Watercolor.

Installation

Usage

import { Smoke } from "@/components/ui/smoke";

The smoke rises behind whatever you put inside, over the whole box. Give the container a height; for the whole page, render it empty with className="fixed inset-0 -z-10".

<Smoke className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-4xl font-semibold">Into thin air</h1>
</Smoke>

Demos

In a breeze

wind={0.6} leans every plume to the right and speed={1.4} makes it rise faster, here in a small card. wind goes from -1 (left) to 1 (right).

Stage smoke

smokeColor takes any CSS colour; here violet, with intensity="strong" for thick smoke. The container has the dark class, so the smoke glows on a dark stage in either theme.

Accessibility

The smoke 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 puff stops where it is, so the stage stays smoky as a still picture. Nothing flashes.

Put copy over it in your foreground colour (text-foreground). At the default intensity a headline stays readable in both themes; behind body text, use intensity="subtle". wind is a physical direction, so it isn't mirrored on right-to-left pages.

FAQ

API Reference