Creature compendium

You can add this component with the shadcn CLI or by hand:

npx shadcn@latest add https://brunodelorence.com/r/creature-compendium.json

Either way it needs React 19 and a bundler that supports CSS Modules, such as Next.js or Vite. It has a dark colour scheme: it follows your page’s color-scheme, light unless the page sets one, or its colorScheme prop, with nothing to configure. Browsers without light-dark() show it light.

import { CreatureCompendium, DEFAULT_ENTRIES } from './creature-compendium';export function Guide({ seen }: { seen: Set<string> }) {  const entries = DEFAULT_ENTRIES.map((entry) =>    seen.has(entry.id) ? { ...entry, status: 'registered' as const } : entry,  );  return (    <CreatureCompendium      entries={entries}      defaultSelected="cliff-goat"      onTrack={(entry) => console.log('tracking', entry?.name ?? 'nothing')}    />  );}

Each state below is a live instance, locked so you can study it.

The pieces it is built from, each with its measurements read live.

The guide a player fills by photographing what they meet, on a navy tablet screen in a carved stone bezel. Numbered frames, 001 to 096 across five categories, show a picture once an entry is registered, a silhouette once it has been sighted, and only a lens mark and the name in the tablet’s script before that. Cyan corner marks glide from frame to frame and name the one they rest on; tabs jump between creatures, monsters, materials, equipment and treasures, and arrows turn pages. Open an entry and its picture flies out of its frame into a large one, beside a description, where it is commonly found and what it gives; step through the guide, track an entry with the sensor, and fly back. Arrow keys, the controller’s letters, a gamepad or the pointer.

• Every size is a multiple of one design unit, --u, worked out on the tablet from the component’s width with a container query unit, so the screen scales as one drawing: a 1016 × 572 screen with a 45-unit header and a 44-unit footer, 93-unit frames on a 107 × 115 pitch in eight columns, 25-unit tab icons on a 45.75-unit pitch, a 223-unit picture on the detail page. Under 720 px the screen is 456 units wide with four columns, still 24 entries a page, and the detail page stacks.
• Entries are data: a name, a category, a status (registered, sighted or unknown), a picture (shape, palette, habitat) and, once registered, a description, places, a stat and an effect. They are numbered by their place in the whole guide; each category starts a new page of 24, and the dots over a tab count its pages, the current one lit.
• The cursor is one element over the grid, placed by a transform from its column and row: a step glides in 160 ms with a small overshoot; against an end it bumps 6 units and springs back (the Web Animations API on the separate translate property). Its four cyan corner marks breathe outwards. Off the last column the next page slides in from the right, column by column, 16 ms apart, and the cursor drops in; turning back slides the other way.
• Opening an entry measures its frame and the big frame and plays the big one from the frame’s place and size to its own (FLIP, 380 ms); the grid fades out, the section rules draw outwards from their titles and the text rises in a short stagger. Closing fades the text at once and flies the picture back into the frame it came from while the grid returns. Left and right step through registered entries, sliding in from the side pressed.
• A frame is CSS: a light outer line, a dark gap, an inner line, an inner cyan glow and four chamfered corners drawn by gradients; the selected frame turns white and its name replaces the script line. When an entry turns registered, its frame flashes white like a shutter and the picture develops from white to colour with a pop.
• All art is SVG drawn for this component: each picture is a setting (meadow, forest, coast, snow, desert, cave, ruins) and a flat subject with a thin dark outline; a sighted entry draws the same subject with every fill forced to one dark cyan by CSS. The tablet’s script writes each letter as a stem with hooks, bars and dots; the bezel is a stepped stone bracket with a lens boss in each corner and a carved band of blocks and studs along the bars, glowing blue.
• Uncontrolled, a demo plays while it is on screen and untouched: browse, open an entry, step twice, track it, close, change category, turn a page, register a new butterfly and open it. Any real input hands it to the reader where the demo left it.

The complete source behind this demo. Open source under the MIT license, © 2026 Bruno Delorence: copy it, change it, ship it.

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useEffectEvent,  useId,  useLayoutEffect,  useRef,  useState,  type CSSProperties,} from 'react';import {  BezelBand,  BezelCorner,  EffectGlyph,  EntryArt,  FaceGlyph,  Heart,  KeyGlyph,  Lens,  PageArrow,

/* Creature compendium (creature-compendium.tsx): a tablet screen showing a numbered field guide,   centred on a plain stage.   Every size is a multiple of --u, one design unit (1 px at full size), set on the tablet from the   component's width (a container query unit), so the screen scales as one drawing and keeps its   proportions: a 1016 × 572 screen with a 45-unit header and a 44-unit footer, 93-unit frames on a   107 × 115 pitch in eight columns, 25-unit tab icons on a 45.75 pitch, a 223-unit picture on the   detail page. Under 720 px the screen is 456 units wide, four columns and taller, and the detail   page stacks.   Colours are the tokens below. The screen keeps its colours in both schemes, as a game's tablet   does: navy glass, cyan type, white selection, a stone bezel with a blue glow. Only the screen's   outer edge and shadow and the focus ring follow the scheme, through light-dark().   Motion: the cursor glides by a transform transition; bumps, the picture's flight between its   frame and the big frame, and nothing else, are played by the script (Web Animations API); page   turns, tab pops, rules drawing, text rising, the shutter flash and the sensor's ping are CSS   animations, replayed by remounting their element. */.root {  /* The tablet's own colours. */  --bar: #0d0d0f;  --navy: #171a38;  --navy-lit: #1e2249;

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The compendium's data: five categories and the 96 entries of the sample guide. An entry is * numbered by its place in the whole list (001…096); a category starts on a new page, and a page * holds 24 entries. Only registered entries carry a description, places and a stat; a sighted one * shows as a silhouette, an unknown one as an empty frame with its name in the tablet's script. */export type Category = 'creatures' | 'monsters' | 'materials' | 'equipment' | 'treasures';export type Status = 'registered' | 'sighted' | 'unknown';/** The picture drawn for an entry (see art.tsx). */export type Shape =  | 'fox'  | 'deer'  | 'boar'  | 'goat'  | 'hare'  | 'songbird'  | 'heron'  | 'fish'  | 'crab'

// Copyright (c) 2026 Bruno Delorence. MIT License.import type { CSSProperties, ReactNode, SVGProps } from 'react';import type { Category, EffectIcon, Habitat, Palette, Shape } from './entries';/* * All the compendium's art, drawn for it as SVG: the entry pictures (a setting and a subject in a * 100-unit box, flat colours with a thin dark outline, so they read as small "photos"), the tab and * effect icons, the empty-frame lens, the tablet's script, the controller glyphs and the bezel. * A sighted entry draws the same subject with every fill and stroke forced to one colour by CSS * (the `silhouette` class), so no second set of drawings is needed. */const INK = '#1d1a22';const line = {  stroke: INK,  strokeWidth: 1.4,  strokeLinejoin: 'round',  strokeLinecap: 'round',} as const;// ---- Settings ----function Scene({ habitat, id }: { habitat: Habitat; id: string }) {

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useCallback, useEffect, useRef, useState } from 'react';/* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. `visible` alone says whether it is on screen * in a visible tab, for clocks that should stop when nobody can see them. */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(true);  const [taken, setTaken] = useState(false);  const timer = useRef(0);  useEffect(() => {    const element = ref.current;    if (!element) return;    let onScreen = false;    const update = () => setVisible(onScreen && !document.hidden);

• The categories are a real tab list (arrow keys move along it, the open category is the tab in the tab order), and the page is a listbox whose options are the entries, with the cursor’s entry as the active descendant, so a screen reader reads each one as the cursor reaches it: “012, Cliff Goat”, “011, sighted, not registered”.
• Opening an entry moves focus to its detail page, a labelled group with real headings for its name and sections; closing returns focus to the grid. The hidden view is inert, so neither keyboard nor screen reader can reach it.
• The page and entry arrows, Open, Back and Track are real buttons with their controller keys in aria-keyshortcuts; the sensor is a status that names what it tracks. A polite live region reports page and category changes, tracking and a newly registered entry.
• Focus shows as an outline round the tab, the grid or the button that has it, blue on a light page and light blue on a dark one; the cursor’s corner marks show the entry inside the grid.
• All pictures, the script and the bezel are hidden from assistive technology. Under reduced motion the demo does not play and every change lands at once: no glide, bump, flight, page slide, shutter or pulse.