Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/web-weaver/llms.txt

Use this file to discover all available pages before exploring further.

The Candle component is an animated SVG candle that serves as the interactive selector control on the Work History page. When a timeline entry is active, the candle springs to life — its flame loops through a subtle scale-and-skew animation, and a teal ember glow emanates from the wick. When inactive, only a bare wick is shown, inviting the visitor to light it by clicking.

​
Where It’s Used

Candle appears on the Work History page (/work). Each job entry in the timeline is accompanied by a Candle instance. Clicking an entry “lights” that candle (isLit={true}) and extinguishes the previously active one, giving the timeline a warm, ritual feel.

​
Props

​
isLit
boolean
required
Controls whether the candle is active. When true, the flame SVG element is rendered and loops through its keyframe animation. When false, only the candle body and wick are shown — no flame, no glow.
​
size
'sm' | 'md' | 'lg'
Adjusts the overall scale of the candle illustration. The three size variants map to progressively larger SVG viewBox outputs:
ValueApproximate Height
smSmall accent size
mdDefault timeline size
lgEnlarged selected state
​
className
string
Additional CSS classes forwarded to the outermost wrapper element. Use this to apply transition utilities or custom positioning without modifying the component itself.

​
Usage

import Candle from "@/components/Candle";

// Active (lit) candle for the selected timeline entry
<Candle
  isLit={true}
  size="lg"
  className="transition-all duration-500"
/>

// Inactive candle for an unselected entry
<Candle
  isLit={false}
  size="md"
  className="transition-all duration-500"
/>
Full timeline implementation as used on the Work History page: 
{workEntries.map((entry) => (
  <button key={entry.id} onClick={() => setSelectedId(entry.id)}>
    <Candle
      isLit={selectedId === entry.id}
      size={selectedId === entry.id ? "lg" : "md"}
      className="transition-all duration-500"
    />
    <span>{entry.company}</span>
  </button>
))}

​
Behavior Details

​
Flame Animation (isLit={true})

When the candle is lit, the flame element plays a looping CSS keyframe sequence that combines three transforms simultaneously to mimic a real flame:
  • scaleY — the flame grows and shrinks vertically, creating a breathing effect.
  • scaleX — slight horizontal scale variation makes the flame feel organic rather than mechanical.
  • skewX — a small horizontal skew simulates the flame bending in a draft.
A teal-colored ember glow (using a radial CSS shadow or SVG filter) pulses around the wick base to complement the flame movement.

​
Idle State (isLit={false})

When unlit, the flame SVG group is hidden (either display: none or opacity: 0). Only the candle body and wick stub remain, giving the control a clear “inactive” affordance without removing it from the layout.

​
Size and Transition

The Work History page passes size="lg" to the selected candle and size="md" to all others. Combined with className="transition-all duration-500" on the wrapper, this creates a smooth grow-and-shrink effect whenever the active entry changes. 
<Candle isLit={true} size="lg" className="transition-all duration-500" />
Flame animates continuously. Teal glow active. Size is large.

​
Customization Tips

Always pass className="transition-all duration-500" (or a similar transition utility) when using Candle in a list. Without it, the size jump between md and lg is instantaneous and visually jarring.

Size Pairing

Use size="lg" for the active item and size="md" for inactive items. The size delta is large enough to be clearly noticeable but not so large that it disrupts the layout.

Glow Color

The ember glow defaults to a teal accent to contrast against the dark background. If your palette changes, update the glow fill or SVG filter inside Candle.js.

Reduced Motion

Consider wrapping the flame animation in a prefers-reduced-motion media query so the flame renders statically for users who prefer minimal animation.

Non-Timeline Uses

Candle can be used standalone as a decorative accent anywhere in the app — just pass isLit={true} and omit any click handler to render a permanently animated candle.
The isLit prop is the single source of truth for animation state. Candle holds no internal state — all selection logic lives in the Work History page’s useState hook.

Build docs developers (and LLMs) love

Get started for freeTalk to us