Fire

Use it like any other component. Choose a theme with preset; any prop you pass as well overrides the preset.

import { useRef } from 'react'
import { Fire, type FireHandle } from '@/components/effects/fire/fire'

export function Hearth() {
  const fire = useRef<FireHandle>(null)
  return (
    <section className="relative h-[560px] overflow-hidden">
      {/* fills its parent: a hearth burns along the bottom, so put your headline in the top half */}
      <Fire ref={fire} preset="Hearth" className="absolute inset-0" />
      <div className="relative z-10 mx-auto max-w-xl px-6 pt-20 text-center text-white">
        <h1 className="text-5xl font-semibold tracking-tight">Gather round.</h1>
        <button onClick={() => fire.current?.stoke()}>Stoke the fire</button>
      </div>
    </section>
  )
}

// A calm candle as a loader or CTA accent, on any page colour:
//   <div className="size-40"><Fire mode="candle" background="transparent" /></div>
// Flames rising from a word (drawn by the shader; the word is the accessible name):
//   <Fire mode="text" text="Ignite" preset="Spirit" />
// Presets: Hearth, Blue Gas, Spirit, Ember Night, Paper (the light one: ink and ochre on paper, use dark text).
// The stage above is <FireShowcase />, also exported.

<Fire preset="Blue Gas" mode={"hearth"} />

• Hearth
• Blue Gas
• Spirit
• Ember Night
• Paper

What the command adds to your project, and where.

• components/effects/fire/fire.tsx

  The component.

• components/effects/fire/flame.tsx

  The component.

• components/effects/fire/showcase.tsx

  The component.

• components/effects/fire/poster.tsx

  The component.

• components/effects/fire/look.ts

  The component.

• components/effects/fire/shaders.ts

  The fragment shader, as a string. Edit it to change the picture.

• components/effects/fire/mask.ts

  The component.

• lib/effect-runtime.ts

  Shared by every shader effect: resizing, pausing, reduced motion, context loss and the no-WebGL fallback. Installed once.

• The flame is one fragment shader: noise that rises and swirls (advected upward and domain-warped) eats into the shape of the emitter more and more with height, so tongues lick upward, break off and fade into smoke. Its value is the temperature, coloured by a blackbody-like ramp from the core colour through the body and edge colours, brighter the hotter it is.
• Three modes: hearth (a wide fire along the bottom, on a bed of coals), candle (one calm flame over a wick, centred; a good loader or CTA accent) and text (flames standing on a word, drawn from a mask of the word in the page font; the word is the accessible name).
• Move the pointer across the stage and the flames lean away from it (pointer wind; 0 ignores the pointer). Click anywhere on the stage, or press the button, to stoke the fire: it surges, brightens and throws a burst of sparks for a few seconds. The ref has stoke().
• Sparks are drawn analytically with short motion trails and filtered to the pixel, so they stay smooth at any size; the noise is smooth and a fine dither keeps the dark gradients free of banding. A light background (Paper) paints the fire as ink and ochre on paper instead of light, with no glow wash; background='transparent' lets the fire sit on your own page.
• It fills its parent, pauses off screen and in a background tab, lowers its resolution automatically if frames run slow, and draws one composed still frame under prefers-reduced-motion. Without WebGL, and before the first frame, you see an SVG poster of the same flame in the same colours.

See all effects