Skip to main content

Documentation Index

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

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

CrystalBall is used on the Testimonials (/testimonials) page, presented under the “The Coven” heading. It renders a circular globe with realistic CSS gradients, a rotating ambient glow, and a lens-flare highlight. Clicking the ball cycles through three client testimonials; each transition blurs and rescales the outgoing and incoming content. The component takes no props.

​
Testimonials

Three quotes are hardcoded in the component’s internal testimonials array:
Quote (excerpt)AuthorRole
”Her code is pure magic. She turned our cursed legacy codebase into a modern, blazing-fast application.”Archmage CTOTech Startup
”The animations she crafted for our landing page literally spellbound our users. Conversion rates doubled overnight.”High Priestess of MarketingE-commerce Brand
”A true alchemist of the frontend. She blends design and logic flawlessly.”Lead DesignerCreative Agency
Clicking the ball advances to the next testimonial using: setIndex((prev) => (prev + 1) % testimonials.length).

​
Visual Structure

The component is max-w-md mx-auto aspect-square centered on its page section.

​
Wooden base

An absolutely-positioned ellipse beneath the ball: 
w-48 h-16
bg-gradient-to-b from-[#2A1B12] to-[#1A100A]
rounded-[100%_100%_20%_20%]
border-t-4 border-[#3A2B22]
shadow-2xl z-0
The rounded-[100%_100%_20%_20%] CSS shorthand creates a rounded top and a flattened bottom to mimic a turned-wood pedestal.

​
Globe

A w-64 h-64 rounded-full overflow-hidden cursor-pointer z-10 motion.div:
  • Glass shell: border border-turquoise/30 bg-gradient-to-br from-white/10 to-transparent backdrop-blur-sm with inner glow shadow-[inset_0_0_50px_rgba(64,224,208,0.2),0_0_30px_rgba(64,224,208,0.3)]
  • Lens flare highlight: absolute top-4 left-8 w-20 h-10 bg-white/20 rounded-full blur-md rotate-[-30deg] — a blurred ellipse in the upper-left that simulates light refraction
  • Rotating ambient glow: a motion.div with opacity-40 mix-blend-screen and a radial gradient rgba(64,224,208,0.8) core, animated scale: [1, 1.2, 1], rotate: [0, 180, 360] over 20 s infinitely on ease: "linear"
  • Content area: a centered z-20 flex column containing the AnimatePresence testimonial

​
Label

absolute -bottom-12 — "Click to scry another" in text-parchment/40 text-xs uppercase tracking-widest font-sans.

​
Testimonial Transition Animation

Testimonials are wrapped in AnimatePresence mode="wait" with each motion.div keyed by the current index: 
initial:    { opacity: 0, scale: 0.8, filter: "blur(10px)" }
animate:    { opacity: 1, scale: 1,   filter: "blur(0px)"  }
exit:       { opacity: 0, scale: 1.2, filter: "blur(10px)" }
transition: { duration: 0.8 }
The outgoing testimonial blurs and expands as it exits; the incoming one blurs and contracts into focus. This creates a “scrying” effect — as if the vision inside the ball is shifting.

​
Testimonial content layout

"Quote text in italic serif parchment text"
AUTHOR NAME (turquoise, uppercase, tracking-widest)
Role (parchment/60, 10px, uppercase)
  • Quote: font-serif text-parchment text-lg italic leading-snug mb-4 text-glow
  • Author: font-sans text-xs uppercase tracking-widest text-turquoise font-bold
  • Role: font-sans text-[10px] uppercase tracking-wider text-parchment/60 mt-1

​
Globe hover

whileHover: { scale: 1.02 }

import { CrystalBall } from './components/CrystalBall';

// Used directly on the /testimonials page — no props required
<CrystalBall />
The mix-blend-screen blend mode on the rotating glow layer is what gives the turquoise ambient light a luminous quality — it brightens the glass shell without darkening it, similar to how a light source looks through frosted glass.
The aspect-square container combined with the -bottom-12 label placement means the parent layout must allow ~48 px (3 rem) of overflow below the component for the “Click to scry another” label to be fully visible. The /testimonials page wrapper adds py-12 padding which accommodates this.

Build docs developers (and LLMs) love

Get started for freeTalk to us