Candle Flame

About this component

A single candle flame drawn live in WebGL on a dark, warm ground: a teardrop with a blue base, a white-gold core and an orange mantle, a slow flicker, warm light breathing on the room and the wax, and a thin wisp of smoke that curls up now and then. The cursor is a breath that bends the flame away, and a quick pass makes it gutter for a moment. Colors, candle, flicker, sway, smoke, glow, breath, position and size are all props. Pauses offscreen, holds a still flame for reduced motion and falls back to a soft glow without WebGL.

Usage

The import and the props worth knowing about, in one place.

import { CandleFlame } from "@/components/beste/component/candle-flame";

<CandleFlame className="aspect-[4/5] w-full max-w-md" />

<CandleFlame
  className="h-[36rem]"
  groundColor="#0b0908"     // any CSS color, tokens included
  flameColor="#ffb45c"
  waxColor="#f2e8d8"
  position={0.7}            // candle toward the right, 0 to 1
  flicker={0.3}             // calmer flame, 0 to 1
  smoke={0}                 // no smoke wisps
  breath={0.9}              // the cursor bends it further
/>

Props

Read from the component's own type, so this cannot drift from what it accepts.

Prop	Type	Default	Description
`flameColor`	`string`	—	Color of the flame's mantle. Any CSS color, tokens included.
`coreColor`	`string`	—	Color of the bright core.
`glowColor`	`string`	—	Color of the light the flame throws on the scene.
`groundColor`	`string`	—	Color of the dark room around the candle.
`candle`	`boolean`	—	Draw the wax pillar under the flame.
`waxColor`	`string`	—	Color of the wax.
`flicker`	`number`	—	How much the flame flickers, 0 to 1.
`sway`	`number`	—	Gentle idle sway, 0 to 1.
`smoke`	`number`	—	How often a thin wisp of smoke curls up, 0 (never) to 1.
`glow`	`number`	—	Strength of the warm light around the flame, 0 to 1.
`breath`	`number`	—	How strongly the cursor's breath bends the flame, 0 to 1.
`position`	`number`	—	Horizontal position of the candle, 0 (left) to 1 (right).
`size`	`number`	—	Size of the candle and flame, 0 to 1.
`interactive`	`boolean`	—	The flame answers the cursor.
`paused`	`boolean`	—	Freeze the flame where it is.
`className`	`string`	—
`children`	`ReactNode`	—

More Media components

View all Media

A white modernist house with timber soffits behind a long pool

Violinists of an orchestra playing under warm stage light