Skip to main content

Documentation Index

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

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

Candle is a self-contained decorative component that renders a full candle — flame, wick, wax pillar, and a soft amber glow puddle — using only Tailwind CSS utility classes and a Framer Motion float animation. Four instances are placed absolutely around the SpellCircle on the home (/) route to create an immersive candlelit atmosphere.

​
Props

​
className
string
default:"\"\""
Additional Tailwind classes applied to the outermost motion.div. Used in the hero section to set absolute position, opacity, and scale for each candle instance.
​
delay
number
default:"0"
Delay in seconds before the float animation cycle begins. Staggering this across multiple candles prevents them from all bobbing in unison.

​
Usage

import { Candle } from './components/Candle';

// Single standalone candle
<Candle delay={0} />

// Hero section layout — four ambient candles around a SpellCircle
<div className="absolute inset-0 overflow-hidden pointer-events-none">
  <Candle className="absolute top-20 left-[15%]   opacity-60 scale-75"  delay={0}   />
  <Candle className="absolute top-40 right-[20%]  opacity-80 scale-90"  delay={1.2} />
  <Candle className="absolute bottom-32 left-[25%] opacity-70 scale-110" delay={0.5} />
  <Candle className="absolute bottom-40 right-[15%] opacity-50 scale-75" delay={2.1} />
</div>

​
Visual Structure

The component is a flex column centred on the X axis with four layers stacked top-to-bottom:
LayerDescription
FlameTwo absolutely-positioned divs layered inside a w-4 h-12 container. Outer: w-3 h-8 bg-amber, blur-[2px], rounded-[50%_50%_20%_20%], amber glow box-shadow. Inner: w-1.5 h-4 bg-white, blur-[1px] — the bright core of the flame. Both use the animate-flicker keyframe class with origin-bottom.
WickA w-0.5 h-2 bg-ink/80 sliver connecting the flame base to the wax.
Wax pillarA w-8 h-24 rectangle using bg-gradient-to-b from-parchment to-parchment-dark, rounded-t-sm. Three bg-parchment drip shapes (widths 1.5, 1, and 2) are absolutely positioned along the top edge to simulate melted wax runs.
Glow puddleAn absolute -bottom-4 w-16 h-4 bg-amber/10 blur-xl rounded-full ellipse beneath the candle base simulating reflected candlelight on a surface.

​
Animation Details

​
Float cycle (outermost motion.div)

animate:    { y: [0, -15, 0] }
transition: { duration: 4 + delay, repeat: Infinity, ease: "easeInOut", delay }
The entire candle (flame, wick, wax) gently floats up 15 px and back down in a continuous loop. The 4 + delay duration formula means candles with a higher delay also have a slightly longer float period, further desynchronizing the group.

​
Flame flicker (animate-flicker)

The flame divs use the animate-flicker Tailwind keyframe utility defined in the global stylesheet. This independently randomises the flame’s scale and opacity to simulate a natural, irregular flicker — separate from the slow float on the parent.
The hero wrapper sets pointer-events-none on its container div, so candles never intercept mouse events and do not interfere with SpellCircle hover interactions.

​
Implementation Notes

  • Candles use only CSS for the flame appearance — no Canvas or SVG.
  • Varying scale via className (scale-75, scale-90, scale-110) combined with differing opacity values (0.5–0.8) creates a convincing sense of depth — closer candles appear larger and brighter.
  • The delay prop feeds both the transition.delay for the float start and the transition.duration formula, giving each candle a subtly unique bobbing rhythm.

Build docs developers (and LLMs) love

Get started for freeTalk to us