Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/mystery-haunting/llms.txt

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

The Forbidden Library page (route: /blog) presents blog posts not as a list or grid of cards, but as a row of antique books standing upright on a wooden shelf. The page title reads “FORBIDDEN LIBRARY” with the subtitle “Dusty tomes of knowledge”. Each book is a Framer Motion div styled with a dark, aged spine color — hover over any volume and it tilts backward, glows with a teal shadow, and reveals its gold title text running vertically up the spine, while five dust particles drift perpetually upward from the top of the book.

​
Current Books

TitleSpine ColorHeightWidth
React Hooks & Hexes#4a1c1c (dark red)h-64w-16
Summoning APIs#1c3a4a (dark blue)h-56w-12
The Dark Art of CSS#2a2a2a (very dark)h-72w-20
Necromancy in Node#1c4a2e (dark green)h-60w-14
REST in Peace#4a3b1c (dark amber)h-48w-10

​
Book Interaction

When a visitor hovers over a book, Framer Motion applies the following transforms via whileHover:
  • Lift — the book translates upward by 20px (y: -20) and rotates −5°, giving the impression of pulling it from the shelf.
  • Teal glow — a box-shadow of 0 0 20px rgba(45,212,191,0.5) pulses outward, framing the book in an eerie teal light.
  • Spine title — the book’s title text is styled in gold (text-[#d4af37]) and rotated −90°, running vertically along the spine and readable bottom-to-top.
  • Spring return — the hover transition uses a spring with stiffness: 300, so the book snaps back to its resting position with satisfying weight when the cursor leaves.
whileHover={{ y: -20, rotate: -5, boxShadow: '0 0 20px rgba(45,212,191,0.5)' }}
transition={{ type: 'spring', stiffness: 300 }}

​
Dust Particle Effect

Each book mounts 5 small dust particles styled as faint bone-white dots (bone/40 color) anchored to the top edge of the spine. They use the animate-float-ghost animation class, meaning the particles float continuously regardless of hover state — giving the impression of an ancient tome perpetually exhaling centuries of settled dust.

​
Shelf Construction

The bookshelf beneath the books is built from two elements:
  • Horizontal bar — a solid dark wood-brown border (border-b-8 border-[#3e2723]) spanning the full width of the shelf row, sitting directly beneath the books.
  • Bracket supports — a triangular wooden bracket div is placed at each end of the shelf bar using clip-path: polygon(...), mimicking the L-shaped supports found on real wall-mounted shelves.

​
Customization

Modify the books array in the page source. Each entry accepts a title, color (spine background), height, and width using Tailwind size classes.
const books = [
  { title: 'React Hooks & Hexes', color: '#4a1c1c', height: 'h-64', width: 'w-16' },
  { title: 'Summoning APIs', color: '#1c3a4a', height: 'h-56', width: 'w-12' },
  { title: 'The Dark Art of CSS', color: '#2a2a2a', height: 'h-72', width: 'w-20' },
  { title: 'Necromancy in Node', color: '#1c4a2e', height: 'h-60', width: 'w-14' },
  { title: 'REST in Peace', color: '#4a3b1c', height: 'h-48', width: 'w-10' }
];
Add a new object to the array to introduce another book to the shelf. Remove or reorder entries to rearrange the shelf layout.
The height and width values use Tailwind arbitrary classes — vary them across books for visual interest, as uniform sizing makes the shelf look too uniform for a forbidden library. The color field sets the book spine’s background color and should be a dark hex value to preserve the aged, gothic aesthetic.

Build docs developers (and LLMs) love

Get started for freeTalk to us