Skip to main content

Documentation Index

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

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

The Testimonials page (/testimonials) gathers praise from past collaborators under the heading “The Coven” with the subtitle “Whispers from past collaborators”. Quotes are displayed one at a time inside a hand-drawn SVG scrying orb at the centre of the page. The active testimonial rotates automatically every six seconds, fading between entries with a cinematic blur-and-scale transition. Visitors can also jump directly to any quote by clicking the dot indicators at the bottom of the orb.

​
Scrying Orb Design

SVG orb structure. The orb is composed entirely of SVG elements drawn inline:
  • Two concentric ellipses in velvet-purple form the body of the orb.
  • A stem and a flat base sit below the ellipses, giving the orb a chalice-like silhouette.
  • A dashed outer ring surrounds the ellipses to suggest a magical aura.
  • A small turquoise crystal ball sits at the top of the orb as a decorative finial.
The testimonial text and author attribution float inside the orb’s inner ellipse, constrained to its dimensions so the prose never overflows the vessel. AnimatePresence transition. Framer Motion’s <AnimatePresence mode="wait"> wraps the currently displayed testimonial so that the outgoing quote fully exits before the incoming one enters. The transition properties are:
Phaseopacityfilterscale
Enter (initial)0blur(10px)0.9
Enter (animate)1blur(0px)1
Exit0blur(10px)1.1
Auto-cycle. A setInterval with a 6000 ms delay advances the active index on each tick, wrapping back to the first testimonial after the last. The interval is cleared in the useEffect cleanup to prevent memory leaks when the component unmounts. Dot indicators. A row of dot buttons appears below the orb — one dot per testimonial. The active dot receives a turquoise glow and scales up to 1.5× its normal size. Inactive dots are rendered in silver/30 (30% opacity silver). Clicking any dot cancels the current interval, immediately shows the selected testimonial, and restarts the auto-cycle timer.

​
Testimonials Data

The three testimonials are stored in the C array in assets/main.js. Each object contains a quote, author, and title. 
const C = [
  {
    quote:
      "Alex's code is pure magic. They turned our cursed legacy system into a pristine, high-performing application without breaking a sweat.",
    author: "Sarah J.",
    title: "Lead Archmage (CTO)",
  },
  {
    quote:
      "I've never seen bugs vanish so quickly. It's like they have a direct line to the spirits of the machine.",
    author: "Marcus T.",
    title: "Product Sorcerer",
  },
  {
    quote:
      "The UI they conjured for us was not only beautiful but accessible to all mortals. Truly a master of their craft.",
    author: "Elena R.",
    title: "Design Oracle",
  },
];

​
Adding a Testimonial

1

Locate the C array in assets/main.js

Open assets/main.js and find the C array near the top of the TestimonialsPage component. The three existing entries for Sarah J., Marcus T., and Elena R. will be visible.
2

Append a new testimonial object

Add a new object to the end of the C array with quote, author, and title fields:
{
  quote:
    "Your new testimonial text goes here. Keep it concise — it must fit comfortably inside the orb.",
  author: "Firstname L.",
  title: "Their Mystical Job Title",
}
A corresponding dot indicator will appear automatically. The auto-cycle will include the new entry in its rotation without any further changes.
If you want quotes to cycle faster or slower, change the 6000 value in the setInterval call inside the TestimonialsPage component. The value is in milliseconds — for example, use 3000 for a 3-second cycle or 10000 for a more leisurely 10-second pace.

Build docs developers (and LLMs) love

Get started for freeTalk to us