Skip to main content

Documentation Index

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

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

The Whispers from the Coven page transforms traditional testimonials into a living, breathing gallery. Rather than a static list, each endorsement drifts freely across the viewport as an independent floating card — positioned absolutely on a dark midnight canvas and perpetually animated with gentle oscillation. Visitors are invited to “catch the floating echoes of past collaborators,” reinforcing Oracle’s mystical narrative while giving each voice its own spatial identity. Hovering any card draws it forward, sharpening the turquoise border glow and scaling it up to reading size.

​
The Coven’s Voices

Sarah J. — Lead Sorceress (CTO)

“Alex doesn’t just write code; they weave spells that make our infrastructure resilient and our UI enchanting.”

Marcus T. — Product Oracle

“A true master of the frontend arts. The performance gains we saw were nothing short of magical.”

Elena R. — Senior Alchemist

“Brought order to our chaotic legacy codebase. A debugger of the highest order.”

David W. — Design Magus

“The attention to detail in the animations makes our app feel alive. Truly mystical work.”

​
Card Placement

Each testimonial card is positioned with CSS left and top values derived from the source data, spreading them naturally across the 600 px tall canvas so they never overlap at rest:
IDAuthorLeftTop
t1Sarah J.10%10%
t2Marcus T.55%25%
t3Elena R.15%55%
t4David W.60%65%

​
Interaction Design

Every card is rendered as a Framer Motion motion.div with three layers of animation working in concert. Entrance animation — cards spring into view from a scaled-down, transparent state. The initial prop sets opacity: 0, scale: 0.8, and the animate prop transitions to full opacity and scale. Each card receives a staggered delay (0 s, 1.5 s, 0.8 s, and 2.2 s respectively) so the coven assembles sequentially rather than all at once. Ambient float — once visible, cards never stop moving. The same animate prop drives continuous y and x oscillation using keyframe arrays: 
animate={{
  opacity: 1,
  scale: 1,
  y: [0, -15, 0],   // vertical drift: 6 s cycle
  x: [0, 10, 0],    // horizontal sway: 8 s cycle
}}
transition={{
  y:  { duration: 6, repeat: Infinity, ease: "easeInOut", delay: card.delay },
  x:  { duration: 8, repeat: Infinity, ease: "easeInOut", delay: card.delay + 1 },
}}
Each card’s float is offset by its own delay value, so the four cards breathe out of phase — the coven sways as a whole, never in lockstep. Hover interaction — whileHover lifts the card forward with a subtle scale-up and elevates its stacking order, letting it break free from its neighbours: 
whileHover={{
  scale: 1.05,
  zIndex: 10,
  transition: { duration: 0.3 },
}}
The card’s Tailwind shadow also transitions from shadow-[0_0_15px_rgba(29,233,182,0.05)] to shadow-[0_0_25px_rgba(29,233,182,0.15)] and the border brightens from border-turquoise/20 to border-turquoise/40, reinforcing the sense that the card is emerging from the ether.
The ambient float is driven entirely by Framer Motion’s animate prop using infinite-repeat keyframe arrays — no useEffect, no setInterval, no manual RAF loop. Passing y: [0, -15, 0] with repeat: Infinity tells Framer Motion to tween through those values endlessly. The ease: "easeInOut" curve gives each oscillation a natural, breath-like deceleration at the extremes, while the per-card delay keeps the four orbs drifting out of phase so the gallery feels organically alive.

Build docs developers (and LLMs) love

Get started for freeTalk to us