Skip to main content

Documentation Index

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

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

CandleDivider is a decorative SVG component that places a tall, flickering candle between the hero section and the content below it on the HomePage. The candle is built entirely from SVG primitives — paths, an ellipse, and a line — and its flame pulses gently using Tailwind’s animate-pulse utility. The component inherits its body color from the surrounding text color, making it easy to re-theme without touching the SVG markup.

​
SVG Anatomy

The candle is drawn on a 200×300 viewBox. Five elements compose the full illustration:
ElementSVG MarkupRole
Body<path d="M100 100 Q50 300 20 300 L180 300 Q150 300 100 100 Z">The main tapered candle body — wide at the base, narrowing toward the top. Uses currentColor.
Hat / tip<path d="M40 120 Q100 130 160 120 L100 20 Z">A triangular cap sitting above the wax pool, giving the candle a pointed, mystical silhouette. Uses currentColor.
Wax drip<ellipse cx="100" cy="120" rx="70" ry="10">A flattened ellipse representing the wax pool at the top of the candle body.
Wick<line x1="140" y1="80" x2="160" y2="300">A thin vertical stroke rising from the wax pool to the flame.
Flame<circle cx="140" cy="80" r="8" fill="#2dd4bf" class="animate-pulse">A turquoise circle at the top of the wick that pulses to simulate a living flame.
The full SVG markup is: 
<svg
  width="200"
  height="300"
  viewBox="0 0 200 300"
  className="h-full text-midnight-dark"
  xmlns="http://www.w3.org/2000/svg"
>
  {/* Candle body — tapered teardrop shape */}
  <path
    d="M100 100 Q50 300 20 300 L180 300 Q150 300 100 100 Z"
    fill="currentColor"
  />

  {/* Hat / pointed tip */}
  <path
    d="M40 120 Q100 130 160 120 L100 20 Z"
    fill="currentColor"
  />

  {/* Wax drip ellipse */}
  <ellipse cx="100" cy="120" rx="70" ry="10" fill="currentColor" />

  {/* Wick */}
  <line
    x1="140"
    y1="80"
    x2="160"
    y2="300"
    stroke="currentColor"
    strokeWidth="4"
  />

  {/* Flame — pulsing turquoise circle */}
  <circle
    cx="140"
    cy="80"
    r="8"
    fill="#2dd4bf"
    className="animate-pulse"
  />
</svg>

​
Flame Animation

The flame’s pulse is driven by Tailwind’s built-in animate-pulse utility class, which applies the following CSS keyframe animation: 
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
Every two seconds, the flame fades to 50% opacity at its midpoint and returns to full opacity — mimicking the natural flicker of a real candle. The cubic-bezier(0.4, 0, 0.6, 1) easing curve produces a smooth, non-linear fade rather than a mechanical linear blink. The turquoise fill #2dd4bf ties the flame to the same accent color used for the cat cursor’s eyes in CursorTrail, creating a consistent mystical palette across the portfolio.

​
Usage

CandleDivider is placed at the bottom of the hero section on HomePage, centered horizontally and anchored to the lower edge of the hero container: 
import { CandleDivider } from './components/CandleDivider';

// Renders at the bottom of the hero section
<div className="absolute bottom-10 left-1/2 -translate-x-1/2">
  <CandleDivider />
</div>
The wrapper <div> uses absolute positioning so the candle overlaps the boundary between the hero and the next section, reinforcing the visual transition. left-1/2 -translate-x-1/2 centers it regardless of the parent’s width.

​
Customization

The component is designed to be restyled through three straightforward modifications: Change the flame color — update the fill attribute on the flame <circle> from #2dd4bf to any hex value: 
{/* Amber flame */}
<circle cx="140" cy="80" r="8" fill="#f59e0b" className="animate-pulse" />
Change the candle body color — the body, tip, and wax drip all use fill="currentColor", so they inherit the CSS color property. The default class text-midnight-dark sets a deep navy. Change the class on the <svg> element to retheme the whole candle: 
{/* Ivory candle */}
<svg className="h-full text-amber-100" ...>
Replace the pulse with a Framer Motion animation — swap className="animate-pulse" for a Framer Motion <motion.circle> with a custom animate prop to gain finer control over timing, amplitude, and color transitions: 
import { motion } from 'framer-motion';

<motion.circle
  cx="140"
  cy="80"
  r="8"
  fill="#2dd4bf"
  animate={{ opacity: [1, 0.3, 1], scale: [1, 1.2, 1] }}
  transition={{ duration: 1.5, repeat: Infinity, ease: 'easeInOut' }}
/>

Build docs developers (and LLMs) love

Get started for freeTalk to us