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.

Grimoire is used on the Case Studies (/case-studies) page to present detailed project narratives in the style of an open leather-bound book. It renders two visible pages side-by-side at a 3:2 aspect ratio (max-width 4xl). The left page shows the chapter navigation; the right page displays the case study content with an animated page-turn effect when switching chapters. The component takes no props — chapters and content are hardcoded internally.

​
Case Studies

Two chapters are defined in the component’s internal chapters array:

​
Chapter 1 — The E-Commerce Awakening

An e-commerce platform rescue project (2022). The existing monolithic storefront had slow load times and high cart abandonment. Solution: complete rewrite with Next.js static site generation. Result: 60% increase in conversion rate.

​
Chapter 2 — The Real-time Scrying Glass

A real-time server infrastructure dashboard. Challenge: handling thousands of events per second without browser lock. Solution: custom WebGL renderer with Three.js and WebSocket data streaming. Result: A live network traffic visualisation still in production use. Each chapter has a title string and a content JSX fragment. The first letter of each chapter’s opening paragraph is styled as a large drop cap — float-left text-5xl font-serif text-turquoise leading-none pr-2 pt-1 font-bold.

​
Navigation

The left page contains two controls at the bottom:
  • ChevronLeft button — navigates to the previous chapter (direction = -1)
  • ChevronRight button — navigates to the next chapter (direction = 1)
Both buttons are p-2 rounded-full border border-ink/20 text-ink/60 hover:text-ink hover:border-ink circles. Navigation wraps: calling previous on Chapter 1 goes to the last chapter, and calling next on the last chapter goes to Chapter 1, using modular arithmetic: 
const navigate = (direction) => {
  setDirection(direction);
  setChapter((prev) => (prev + direction + chapters.length) % chapters.length);
};
The direction value (1 or -1) controls which way the page-turn animation rotates.

​
Visual Structure

​
Book body

The outer container is aspect-[3/2] max-w-4xl with perspective-1000. Inside:
  • bg-[#2A1B12] — dark brown leather cover
  • rounded-xl shadow-[0_20px_50px_rgba(0,0,0,0.8)] border-4 border-[#1A100A]
  • A central binding strip: w-12 bg-gradient-to-r from-[#1A100A] via-[#2A1B12] to-[#1A100A] absolutely positioned at left-1/2
  • Two bg-parchment page areas with rounded-l-lg / rounded-r-lg and a radial gradient overlay opacity-10 for aged paper texture

​
Left page

  • Chapter number: font-serif text-ink/40 uppercase tracking-widest text-xs
  • Chapter title (animated): text-4xl font-serif text-ink leading-tight
  • Navigation buttons

​
Right page

  • Case study body text: text-ink/80 font-sans text-sm leading-relaxed

​
Page-Turn Animation

The right page uses AnimatePresence mode="wait" wrapping a keyed motion.div. When the chapter changes: 
// Entering (new page flips in)
initial:    { opacity: 0, rotateY: direction > 0 ? 90 : -90, transformOrigin: "left center" }
animate:    { opacity: 1, rotateY: 0 }

// Exiting (old page flips away)
exit:       { opacity: 0, rotateY: direction > 0 ? -90 : 90 }

transition: { duration: 0.6, type: "spring", bounce: 0 }
The direction value ensures the page appears to physically turn forward or backward depending on whether the user navigated to the next or previous chapter. transformOrigin: "left center" anchors the flip to the spine. The left page title also uses AnimatePresence mode="wait" with a simpler y: 10 → 0 fade-slide transition. 
import { Grimoire } from './components/Grimoire';

// Used directly on the /case-studies page — no props required
<Grimoire />
AnimatePresence mode="wait" is used on both the title and the content, ensuring the exiting element fully leaves the DOM before the entering element animates in. This prevents the two chapters from overlapping during the transition.
The transformOrigin: "left center" on the right page’s rotateY flip is what makes it feel like a real book page turning from the spine. Without it, the page would rotate around its centre and look detached from the binding.

Build docs developers (and LLMs) love

Get started for freeTalk to us