Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/a-master-artificer/llms.txt

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

PageChrome is the shared layout shell that wraps every page in the A Master Artificer theme. It renders each page as an open grimoire book — a card with a dark leather-like spine on the left, a content well with a sticky header on the right, and ornamental corner marks drawn in SVG at the top-right and bottom-right edges of the content area. Every route transition animates the book card with a perspective-correct page-turn effect, making navigation feel as though the visitor is physically leafing through a physical volume. Because PageChrome owns the outer animation, page content never needs to manage its own entry or exit — wrapping children in this component is all that is required.

​
Usage

<PageChrome title="The Practitioner" pageNumber={2}>
  <section>
    {/* your page content */}
  </section>
</PageChrome>

​
Props

​
children
ReactNode
required
The page content to render inside the grimoire content well. Receives full width inside the scrollable <main> area with p-8 md:p-12 padding applied automatically.
​
title
string
The page title displayed in the sticky header at the top of the content area. Rendered as an <h1> with font-title text-3xl md:text-4xl text-grimoire-glow tracking-widest. If omitted together with pageNumber, the header is not rendered at all.
​
pageNumber
number
The ordinal page number displayed in the sticky header alongside the title. Rendered as a monospaced label in the format Pg. 001, zero-padded to three digits using String.padStart(3, "0"). If omitted, the label is hidden but the title (if present) still shows.

​
Page-Turn Animation

The outermost motion.div uses a custom cubic-bezier easing curve to simulate the inertia of a page being turned. The perspective is set to 2000px on the element’s inline style so the Y-axis rotation reads as a physical depth effect. 
// Entry (animate)
initial:  { opacity: 0, rotateY: -15, x: -50 }
animate:  { opacity: 1, rotateY: 0,   x: 0   }

// Exit
exit:     { opacity: 0, rotateY: 15,  x: 50  }

transition: {
  duration: 0.8,
  ease: [0.22, 1, 0.36, 1],   // custom cubic-bezier
}

style: { perspective: "2000px" }
Pages enter from the left (negative rotateY and x) and exit to the right, reinforcing the left-to-right page-turning metaphor. The ease array is an accelerate-then-ease-out curve that makes the turn feel weighty at the start and crisp at the end.
Keep pageNumber values sequential across all pages — 1 for Cover, 2 for The Practitioner, 3 for Conjurings, and so on. The numbers are part of the grimoire metaphor: a visitor who pages through the portfolio in order will see consecutive page numbers, strengthening the book-reading illusion. Gaps or out-of-order numbers break that effect subtly but noticeably.

​
Visual Layout

The component builds the book card in a fixed layer order inside the animated wrapper. 
motion.div (perspective container, min-h-screen, max-w-6xl)
└── div (book card, flex, overflow-hidden)
    ├── div (spine column)
    │   └── [5 × decorative lines]
    └── div (content area, flex-1, bg-grimoire-dark)
        ├── header (sticky, title + page number)
        ├── main (page content)
        ├── svg (top-right corner mark)
        └── svg (bottom-right corner mark)

​
Perspective Container

min-h-screen w-full max-w-6xl mx-auto
p-4 md:p-8 lg:p-12
flex
style: { perspective: "2000px" }
Constrains the book to a maximum reading width of 6xl (72rem) and centres it horizontally. The padding scales up at medium and large breakpoints.

​
Book Card

relative w-full
bg-grimoire-dark-lighter
rounded-r-3xl rounded-l-sm
shadow-[20px_0_50px_rgba(0,0,0,0.5)]
border-r border-y border-grimoire-glow/10
flex overflow-hidden
The asymmetric border radius (rounded-l-sm on the spine side, rounded-r-3xl on the open edge) and the offset box-shadow cast rightward to suggest the weight of pages to the left.

​
Spine Column

w-12 md:w-16 shrink-0
bg-gradient-to-r from-[#051517] to-grimoire-dark-lighter
border-r border-black/50
shadow-[inset_-5px_0_15px_rgba(0,0,0,0.8)]
flex flex-col items-center py-12
relative z-20
The gradient runs from near-black (#051517) on the far left to grimoire-dark-lighter at the inner edge, simulating the shadow where the pages meet the binding. Five w-8 h-1 bg-grimoire-accent/20 lines spaced vertically represent binding stitches or cord signatures.

​
Sticky Header

Rendered only when title or pageNumber is provided: 
sticky top-0 z-10 w-full
px-8 py-6
flex justify-between items-end
border-b border-grimoire-glow/10
bg-grimoire-dark/90 backdrop-blur-sm
The backdrop-blur-sm and 90% opacity keep content visible through the header as the page scrolls underneath it. The title sits on the left; the Pg. 001 counter sits on the right in font-mono text-grimoire-accent/60 text-sm.

​
Decorative Corner Marks

Two inline SVGs are positioned absolute inside the content area:
  • Top-right — an L-shaped bracket opening downward and to the left, with a filled circle accent at (80, 20).
  • Bottom-right — a mirror bracket opening upward and to the left, with a circle accent at (80, 80).
Both use text-grimoire-glow/20 (20% opacity) and pointer-events-none so they are purely decorative.

​
CSS Design Tokens

TokenValue / Role
grimoire-darkDeep teal-black (rgb(10 42 46)) — content area background
grimoire-dark-lighterSlightly lighter teal-black — card surface
grimoire-glowTeal (#2DD4BF) — header title, borders, corner marks
grimoire-accentMuted teal — page-number label, spine lines
font-titleDisplay typeface used for the page title
font-monoMonospace font used for the Pg. 001 counter

Build docs developers (and LLMs) love

Get started for freeTalk to us