Testimonials — Sworn Word: Client Quotes, Scrying Mirror

The Testimonials page presents client endorsements as visions glimpsed inside a scrying mirror — an oval frame with a dark reflective surface, a top-light specular highlight, and a slow rotating glow deep within. Each tap of the mirror summons the next testimonial, the previous one dissolving in a blur before the new voice speaks.

Sample Testimonials

The testimonials array in Testimonials.js holds three entries:

Lord Malakor — CTO, Ethereal Systems

“They lifted a curse from our legacy codebase that had plagued us for years. The new system runs smoother than a polished scrying glass.”

Lady Vespera — Founder, Nightshade Botanicals

“I asked for a simple website, and I received a digital artifact of immense power. Conversion rates have tripled since the ritual was completed.”

Archmage Thorne — Lead Product, Void Analytics

“Their mastery over the React arts is unparalleled. They conjured a dashboard so intuitive, it feels like it reads your mind.”

Mirror Anatomy

The scrying mirror is a relative w-full max-w-2xl aspect-[16/9] md:aspect-[2/1] container. Three layers build up the mirror effect from back to front:

Animated Glow (z-index 0)

A motion.div with bg-[radial-gradient(circle,rgba(45,212,191,0.1)_0%,transparent_60%)] blur-2xl sits at inset-[-50%] — larger than the mirror itself — and animates with:

animate={{ rotate: 360, scale: [1, 1.2, 1] }}
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}

This produces a slow, pulsing ambient light that breathes behind the mirror surface.

Dark Interior Surface (z-index 10)

An absolute inset-0 bg-midnight rounded-[100%] overflow-hidden div clips all content to the oval shape and provides the dark mirror surface. Inside, a bg-gradient-to-b from-white/5 to-transparent rounded-b-full overlay at the top simulates a specular highlight — the bright reflection of a light source above.

Oval Frame Border (z-index 20)

An absolute inset-0 border-[12px] border-midnight-darker rounded-[100%] div forms the heavy mirror frame. Two inner border rings at inset-[-12px] (border-spell/20) and inset-2 (border-spell/10) add decorative depth to the frame edge. The frame is pointer-events-none so clicks pass through to the mirror interior.

Quote Transition Animation

Quote content is wrapped in an AnimatePresence (imported from components/CursorTrail.js, which co-locates it alongside the cursor particle effect) with mode="wait". Each motion.div quote panel uses the key={currentIndex} prop so React treats each testimonial as a new element:

<motion.div
  key={currentIndex}
  initial={{ opacity: 0, filter: "blur(10px)", scale: 0.9 }}
  animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
  exit={{ opacity: 0, filter: "blur(10px)", scale: 1.1 }}
  transition={{ duration: 0.8 }}
>
  <p className="font-garamond text-xl md:text-2xl text-parchment italic leading-relaxed mb-6 text-glow">
    "{testimonials[currentIndex].quote}"
  </p>
  <span className="block font-cinzel text-spell text-lg font-bold">
    {testimonials[currentIndex].author}
  </span>
  <span className="block font-cinzel text-sm text-parchment/60 tracking-widest mt-1">
    {testimonials[currentIndex].title}
  </span>
</motion.div>

The blur/scale transition gives a sense of the quote materialising in the mirror rather than simply fading in.

Click the Mirror
Dot Indicators

The entire mirror container (div.cursor-pointer) has an onClick handler that advances the index:

const advanceMirror = () => {
  setCurrentIndex((prev) => (prev + 1) % testimonials.length);
};

The index wraps around — tapping past the last testimonial returns to the first.

Below the mirror, a row of <button> dots maps to each testimonial by array index. The active dot uses bg-spell shadow-[0_0_10px_rgba(45,212,191,0.8)]; inactive dots use bg-midnight-darker border border-spell/30. Clicking a dot sets currentIndex directly to that testimonial’s index:

testimonials.map((_, index) => (
  <button
    key={index}
    onClick={() => setCurrentIndex(index)}
    className={`w-3 h-3 rounded-full transition-all duration-300 ${
      index === currentIndex
        ? "bg-spell shadow-[0_0_10px_rgba(45,212,191,0.8)]"
        : "bg-midnight-darker border border-spell/30"
    }`}
  />
))

A hint label below the dots reads "Tap mirror to scry further" in Cinzel, text-xs tracking-[0.2em] text-parchment/40 uppercase.

How to Customize

Edit the testimonials array at the top of Testimonials.js. Each object needs three fields:

// Testimonials.js
const testimonials = [
  {
    id: 1,
    quote:
      "They lifted a curse from our legacy codebase that had plagued us for years. The new system runs smoother than a polished scrying glass.",
    author: "Lord Malakor",
    title: "CTO, Ethereal Systems",
  },
  // Replace or add entries…
];

Keep quotes to two or three sentences for the best fit within the mirror’s fixed oval dimensions. Very long quotes will overflow the mirror interior on smaller screens, even with overflow-hidden applied to the interior div.

The dot navigation count is derived automatically from testimonials.length, so adding or removing entries from the array will update the dots without any further changes to the render code.

Pages

Components

Testimonials — Sworn Word: Client Quotes, Scrying Mirror

Sample Testimonials

Lord Malakor — CTO, Ethereal Systems

Lady Vespera — Founder, Nightshade Botanicals

Archmage Thorne — Lead Product, Void Analytics

Mirror Anatomy

Quote Transition Animation

Navigation

How to Customize

Build docs developers (and LLMs) love

Pages

Components

Documentation Index

​Sample Testimonials

Lord Malakor — CTO, Ethereal Systems

Lady Vespera — Founder, Nightshade Botanicals

Archmage Thorne — Lead Product, Void Analytics

​Mirror Anatomy

​Quote Transition Animation

​Navigation

​How to Customize

Build docs developers (and LLMs) love

Sample Testimonials

Mirror Anatomy

Quote Transition Animation

Navigation

How to Customize