Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/nightshade/llms.txt

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

The Candle component renders a self-contained animated candle — a white wax pillar with a flickering amber flame on top. It is used throughout the Nightshade interface wherever ambient candlelight atmosphere is needed, from the home page selection menu to timeline markers and blog listing hover states.

​
Where Candle is used

Home Page

Rendered in the candle selection menu, where the user chooses a candle to enter the Sanctum.

About Timeline

Appears as glowing markers alongside timeline entries on the About page.

Blog Listing

Shown as hover indicators next to post titles in the blog index.

Testimonials

Used as decorative accent elements inside testimonial cards.

​
Props

PropTypeDefaultDescription
heightnumber60Height of the wax candle body in pixels
widthnumber20Width of the candle body in pixels
delayIndexnumber1Index (1–4) selecting a CSS animation delay class
isLitbooleantrueWhether to render the flame on top of the candle
classNamestring""Additional CSS classes applied to the outer wrapper

​
Flame animation

When isLit is true, a motion.div styled as a rounded teardrop shape appears above the wick. The shape uses a radial gradient to simulate the warm glow of a real flame: 
background: radial-gradient(
  ellipse at bottom,
  #fff 10%,
  #fde047 30%,
  #f59e0b 70%,
  transparent 100%
)
A soft white inner highlight div sits centered at the bottom of the flame, blurred slightly to mimic the bright core of a candleflame. The flame div carries the .animate-flicker CSS class, which plays a looping keyframe animation defined in main.css:
main.css
@keyframes flicker {
  0%   { transform: scaleY(1) scaleX(1);       opacity: 0.9; filter: brightness(1);   }
  25%  { transform: scaleY(1.05) scaleX(0.95); opacity: 1;   filter: brightness(1.2); }
  50%  { transform: scaleY(0.95) scaleX(1.02); opacity: 0.8; filter: brightness(0.9); }
  75%  { transform: scaleY(1.02) scaleX(0.98); opacity: 0.95; filter: brightness(1.1); }
  100% { transform: scaleY(1) scaleX(1);       opacity: 0.9; filter: brightness(1);   }
}
The animation alternates between slight vertical elongation and horizontal compression, with brightness shifts that recreate the organic wobble of a real flame.

​
Animation delay classes

When multiple candles are rendered together, applying the same animation timing makes them all flicker in perfect sync — which looks mechanical. The delayIndex prop selects one of four CSS delay classes to stagger each candle’s animation start:
ClassDelay
.flicker-delay-10s
.flicker-delay-20.3s
.flicker-delay-30.6s
.flicker-delay-40.9s
The component maps delayIndex to a class using `flicker-delay-${delayIndex % 4 + 1}`, so values outside 1–4 wrap around gracefully.
The four delay classes must be defined in main.css for the staggered flicker to work. Adding a fifth candle with delayIndex={5} will wrap back to .flicker-delay-2.

​
Candle body

The wax body is a plain div with bg-witch-moonlight (an off-white) and rounded top and bottom corners to approximate a cylindrical shape. Two lighter highlight strips are absolutely positioned near the left edge to simulate a light source catching the rounded surface. A gradient overlay fades from witch-amber/20 at the top to transparent at the bottom, giving the impression that the flame above is casting warm light down the wax.

​
Usage examples

// Lit candle at 80px tall with staggered flicker delay
<Candle height={80} delayIndex={1} isLit={true} />

// Shorter candle with a different delay index
<Candle height={60} width={18} delayIndex={3} isLit={true} />

// Unlit candle used as a decorative element
<Candle height={40} width={16} isLit={false} />

// Candle with extra positioning classes
<Candle height={100} delayIndex={2} isLit={true} className="opacity-75" />
When rendering a row of candles, assign sequential delayIndex values (1, 2, 3, 4) to ensure each flame flickers on a different cycle.

Build docs developers (and LLMs) love

Get started for freeTalk to us