Skip to main content

Documentation Index

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

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

CandleFlame is a small, self-contained ambient decoration rendered in fixed position at the bottom corners of every page via the Layout component. It depicts a realistically flickering candle — wax body, wick, and a layered animated flame — that continuously animates without any user interaction. Its position prop lets you place the candle in either the bottom-right or bottom-left corner of the viewport.

​
Props

​
position
"bottom-right" | "bottom-left"
Determines which corner of the viewport the candle occupies. Defaults to "bottom-right". The Layout component renders one candle at each corner by passing "bottom-left" and "bottom-right" respectively.

​
Usage Example

import CandleFlame from "@/components/CandleFlame";

// Two candles flanking the bottom of the page (as used in Layout)
export default function PageShell({ children }) {
  return (
    <div>
      {children}
      <CandleFlame position="bottom-left" />
      <CandleFlame position="bottom-right" />
    </div>
  );
}

// Single candle in the default bottom-right corner
import CandleFlame from "@/components/CandleFlame";

export default function DecorativePage() {
  return (
    <main>
      <p>Page content</p>
      <CandleFlame />
    </main>
  );
}

​
Behavior & Animation

​
Structure

The candle is composed of three layers stacked inside a 2rem × 3rem relative container:
  1. Wax body — A 1rem × 1.5rem rectangle with a gray-300-to-gray-600 vertical gradient and slightly rounded top corners, anchored to the bottom of the container.
  2. Wick — A thin 2px × 0.5rem obsidian strip rising from the top center of the wax body.
  3. Flame — A 1rem × 2rem Framer Motion div positioned above the wick, using origin-bottom so it pivots realistically from its base.

​
Flame Animation

The flame div continuously loops with repeatType: "mirror" at a 0.5s duration using easeInOut. On each cycle it:
  • Scales vertically between 1.0, 1.1, 0.9, 1.05, and back to 1.0, producing a realistic elongation-and-compression flicker.
  • Scales horizontally between 1.0, 0.9, 1.1, 0.95, and back to 1.0 — the inverse of the vertical scale — so the flame narrows when tall and widens when short.
  • Rotates between −2°, 2°, −1°, 3°, and 0°, giving the impression of a gentle ambient air current.
The flame itself is rendered as three stacked layers:
LayerDescription
Gold blur haloA gold semi-transparent div with blur-md, scaled to 150% and raised 0.5rem, creating the warm outer glow.
Gradient flame bodyA rounded shape with border-radius: 50% 50% 20% 20% gradient from blue-500 (base) through gold to transparent (tip), with a 1px blur for softness.
White hot coreA small 0.5rem × 0.75rem white rounded pill centered at the base of the flame, simulating the hottest part of the combustion zone.
The entire candle is rendered with pointer-events-none at z-index: 0 and opacity: 80% so it sits unobtrusively behind interactive content.
CandleFlame is already included in Layout at both bottom corners. You only need to import and use it directly if you are building a custom layout or a standalone page outside the standard Fortune Seeker shell.

Build docs developers (and LLMs) love

Get started for freeTalk to us