Fireplace Background for React

A fire burns along the whole bottom edge: tongues of flame lick upward and keep changing shape, a white-hot band glows at their base, embers drift up through the box, and the firelight flutters gently over everything, so the box is lit by the fire rather than filled with it. Each sheet of flame is a gradient of fire colours cut by two noise textures the browser draws once and CSS slides upward at different speeds, so the tongues reshape as they rise and nothing repaints. It follows your theme: glowing flames on a dark page, a warm amber blaze on a light one.

Use it for a seasonal hero, a "cosy" product page or a card that should feel warm. For grey plumes that rise over the whole box, use Smoke; for points of warm light with no flame, Fireflies; for sparks that burst in the sky, Fireworks. Keep your headline in the upper half, above the flames.

Installation

Usage

import { Fireplace } from "@/components/ui/fireplace";

The fire burns behind whatever you put inside, along the container's bottom edge. Give the container a height; for the whole page, render it empty with className="fixed inset-0 -z-10".

<Fireplace className="flex min-h-[420px] flex-col items-center pt-16">
  <h1 className="text-4xl font-semibold">Pull up a chair</h1>
</Fireplace>

Demos

A low hearth

intensity="subtle" keeps the flames under a third of the height and embers={8} thins the sparks, for a small card. The tongues scale with the fire, so a low hearth still looks like a fire, not a cropped one.

Witch-fire

colors takes four colours, from the fire's heart to the tips of the flames; here pale cyan to deep blue. flicker={false} stills the light's flutter and the flames' swell, for a steadier burn behind busier content. The card adds the dark class to its own container, so it glows on a light page too.

Accessibility

The fire 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 flame and ember stops where it is, so a still, fully formed fire stays. Nothing flashes: the light flutters by less than a fifth of its strength, eased over half a second or more.

Put copy over it in your foreground colour (text-foreground) and keep it above the flames, in the upper half at the default intensity; there it stays well above 4.5:1 in both color schemes.

FAQ

API Reference