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.

Bookshelf renders five color-coded book spines displayed side-by-side, sitting on a decorative wooden shelf with table legs. Each spine represents a blog article and lifts upward on hover to reveal a “Read Tome” tooltip. The component is used on the Articles (/articles) page under the “Forbidden Knowledge” heading. The component takes no props — the book data is defined in an internal array.

​
Books

Five books are hardcoded with unique colors, heights, and entrance delays:
TitleColorHeightEntrance Delay
React Performance Runes#4A0E4E (purple)h-48 (12 rem)0.1 s
The CSS Grimoire#004D40 (dark teal)h-56 (14 rem)0.2 s
Accessibility Spells#8B0000 (dark red)h-44 (11 rem)0.3 s
State Management Alchemy#1A237E (dark blue)h-52 (13 rem)0.4 s
Framer Motion Secrets#3E2723 (dark brown)h-60 (15 rem)0.5 s
The varying heights make the row look like a real shelf of books of different sizes rather than a uniform grid.

​
Visual Structure

The layout is a flex row with items-end justify-center gap-1 px-8 inside a h-64 container, so shorter books sit with their bases aligned at the shelf surface.

​
Each book spine

┌──────────────────────┐  ← "Read Tome" tooltip (-top-12, opacity-0 → group-hover:opacity-100)
│  ── (top accent) ──  │
│                      │
│   Book Title Text    │  ← rotated -90deg, font-serif, text-parchment, text-xs
│   (spine label)      │
│                      │
│  ── (bot accent) ──  │
└──────────────────────┘
         ▓▓▓▓▓▓▓▓▓▓▓▓  ← Wooden shelf (w-full h-8 bg-[#2A1B12])
Each spine is w-16 rounded-sm shadow-lg with height set by h-* Tailwind class. A linear-gradient overlay (opacity-20) runs horizontally across the spine to simulate the highlight and shadow of a round spine. The spine text is text-parchment font-serif text-xs tracking-widest whitespace-nowrap -rotate-90 origin-center w-32 text-center — the w-32 and centered alignment ensure the rotated text is visually centred on the spine regardless of its actual length. Two w-8 h-1 bg-white/20 rounded-full accent bars are positioned at the top and bottom of each spine (like binding bands).

​
Wooden shelf

w-full h-8 bg-[#2A1B12] rounded-sm border-b-4 border-[#1A100A]
shadow-[0_20px_30px_rgba(0,0,0,0.5)]
A subtle repeating-linear-gradient(90deg, ...) overlay at opacity-20 creates a wood-grain texture effect.

​
Animation Details

​
Entrance (spring bounce)

initial:    { y: -50, opacity: 0 }
animate:    { y: 0,   opacity: 1 }
transition: { delay: book.delay, type: "spring", bounce: 0.4 }
Each book drops down from above and bounces once when the page loads, staggered by 100 ms increments. The bounce: 0.4 gives a satisfying physical feel.

​
Hover lift

whileHover: { y: -20, scale: 1.05, zIndex: 20 }
The book lifts 20 px and scales up 5%. zIndex: 20 ensures the hovered book renders above its neighbours if it visually overlaps them when scaled.

​
Tooltip

A div with absolute -top-12 left-1/2 -translate-x-1/2 bg-ink text-parchment text-xs px-3 py-1 rounded border border-turquoise/30 is shown via opacity-0 group-hover:opacity-100 transition-opacity. It reads “Read Tome” and is pointer-events-none so it doesn’t interfere with the hover state. 
import { Bookshelf } from './components/Bookshelf';

// Used directly on the /articles page — no props required
<Bookshelf />
The book spines are currently purely decorative — they have no onClick handlers or links to actual articles. The component is designed for visual impact; linking behavior can be added by wrapping each motion.div in an <a> or React Router <Link>.
The mt-20 on the outer wrapper (w-full max-w-3xl mx-auto mt-20) is intentional — it reserves space above the shelf for the full height of the tallest book spine (15 rem / h-60) when it lifts on hover, preventing overflow into elements above.

Build docs developers (and LLMs) love

Get started for freeTalk to us