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.

CrystalBall is a fully self-contained decorative component that appears on the About (The Reader) page of Fortune Seeker. It renders a 16rem × 16rem glass sphere complete with an SVG smoke-displacement filter, counter-rotating inner gradients, a parallax-reactive inner portrait medallion, specular highlights, and a shadowed base stand. No configuration is required — drop it into any layout and it animates autonomously.

​
Props

This component accepts no props. All visual behavior, sizing, and animation are self-contained.

​
Usage Example

import CrystalBall from "@/components/CrystalBall";

export default function AboutPage() {
  return (
    <section className="flex flex-col items-center gap-8">
      <CrystalBall />
      <p>Welcome to the reader's chamber.</p>
    </section>
  );
}

​
Behavior & Animation

​
Structure

The component is built as a layered stack of div elements positioned inside a 16rem × 16rem relative container:
  1. Base stand — An elliptical gradient element anchored 2rem below the sphere, styled with a dark gold-to-obsidian gradient and a top gold border, creating the illusion of a polished pedestal.
  2. Shadow disc — A smaller obsidian ellipse directly beneath the sphere for a contact shadow.
  3. Glass sphere — The main circular container with overflow: hidden, a backdrop-blur, and layered box-shadow values that produce both an outer purple glow and an inner gold luminescence.

​
Pulsing Glow

Framer Motion animates the sphere’s box-shadow between two states on an infinite 4s easeInOut loop:
  • Resting: 0 0 50px rgba(58,26,92,0.4) outer, inset 0 0 40px rgba(201,169,110,0.2) inner.
  • Peak: 0 0 70px rgba(58,26,92,0.6) outer, inset 0 0 60px rgba(201,169,110,0.4) inner.
This creates a slow, breathing luminescence effect that evokes a sphere with an internal energy source.

​
Smoke / Turbulence

An SVG <filter> with feTurbulence (fractal noise, base frequency 0.02, 3 octaves) and feDisplacementMap (scale 20) is applied to a blended inner layer. The turbulence baseFrequency itself animates between 0.02 and 0.025 over 10s, causing the internal swirling patterns to shift organically over time. Two radial gradient discs spin inside the filter layer — one gold, one deep violet — using mix-blend-mode: screen:
  • Gold disc: rotates 360° clockwise and pulses in scale (1 → 1.2 → 1) over 20s.
  • Violet disc: rotates 360° counter-clockwise and inversely pulses (1.2 → 1 → 1.2) over 15s.

​
Parallax Portrait

A useRef on the outer container and a mousemove window listener calculate the cursor’s offset from the sphere’s center, divided by 20. This offset drives a spring-animated inner medallion (stiffness: 50, damping: 20) containing a Lucide User icon. As the mouse moves near the sphere, the portrait subtly shifts in the opposite direction, reinforcing the illusion of depth inside the glass.

​
Specular Highlights

Two white, blurred div elements — one 4rem circle and one elongated 6rem × 2rem pill rotated −30° — are positioned in the top-left quadrant of the sphere to simulate a light source reflection on the glass surface.
Because CrystalBall uses a window event listener for parallax, it is safe in any client component context. The listener is cleaned up automatically when the component unmounts.

Build docs developers (and LLMs) love

Get started for freeTalk to us