Skip to main content

Documentation Index

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

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

FlickeringLights creates the impression of unstable candlelight or flickering electricity across the entire page. Rather than a simple opacity pulse, it renders a row of 15 individual candle flames along a drooping wire at the top of the viewport — each flame has its own randomised color, animation duration, and delay, so the overall effect is organic and never perfectly synchronous.

​
Animation details

The individual candle glows are animated by Framer Motion directly on each flame element rather than a CSS keyframe on an overlay. Each flame cycles through five opacity and boxShadow values to simulate the irregular brightness of real candle flame: 
animate={{
  opacity: [0.4, 1, 0.5, 0.9, 0.3],
  boxShadow: [
    `0 0 5px ${color}40`,
    `0 0 15px ${color}`,
    `0 0 8px ${color}80`,
    `0 0 12px ${color}`,
    `0 0 4px ${color}40`,
  ],
}}
transition={{
  duration: n,        // 1–3 s, randomised per candle
  repeat: Infinity,
  repeatType: "reverse",
  delay: r,           // 0–2 s, randomised per candle
  ease: "easeInOut",
}}
In addition, the animate-flicker CSS class (defined in main.css) is applied to each CandleCursor flame layer and is available for use on any element that should pulse with the page-wide candle rhythm: 
@keyframes flicker {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.8; }
  25%, 75%  { opacity: 0.9; }
  10%, 90%  { opacity: 0.7; }
}
.animate-flicker {
  animation: flicker 3s infinite alternate;
}
The alternate direction means the keyframe sequence runs forwards then backwards on alternate iterations, producing a more natural variation than a looping-only animation.

​
Flame colors

Each candle selects its color from the Spooky theme palette based on a random value o:
ProbabilityColorCSS variable
o > 0.95 (5%)#4a1a5c — bat purple--color-bat
o > 0.8 (15%)#fcd34d — candy yellow--color-candy
All others (80%)#ff7518 — pumpkin orange--color-pumpkin
This weighting means most candles glow orange, with occasional yellow and rare purple flames for visual variety.

​
Usage

FlickeringLights is mounted inside Layout and requires no configuration. It is always active on every page. The component itself accepts no props.

​
Adjusting intensity

To tune the flicker effect, modify the Framer Motion animate arrays in the source before rebuilding:
  • More subtle — raise the minimum opacity values (e.g. [0.7, 1, 0.8, 0.95, 0.6]) so the candles never dim very far
  • More dramatic — lower the minimum values (e.g. [0.1, 1, 0.2, 0.8, 0.05]) for a near-extinguishing effect
  • Slower flicker — increase the duration range (e.g. 3 + Math.random() * 4) for a lazy, sleepy flicker
  • More frantic — decrease the duration range (e.g. 0.3 + Math.random() * 0.7) for a rapid, nervous flicker
Users with vestibular or photosensitive conditions may be sensitive to flickering animations. To respect the prefers-reduced-motion system preference, add the following CSS override — it disables the CSS animate-flicker class used across the theme. For the Framer Motion animations, pass the useReducedMotion() hook value to conditionally set transition.duration to a very high number or skip the animation entirely.
@media (prefers-reduced-motion: reduce) {
  .animate-flicker {
    animation: none;
  }
}

Build docs developers (and LLMs) love

Get started for freeTalk to us