Bibliotheca Perpetua
Field guide № 47

Custodian’s field guide · Site 47 of 50

How to build
an endless shelf.

An annotated record of the procedural machinery and small deceptions that make Bibliotheca Perpetua feel older—and much larger—than the browser window containing it.

Classification
Spatial fiction
Primary mechanism
Recycled perspective
Assets
None external
Plate I · The useful deceptionTwelve physical frames.
One apparently endless passage.

As the reader advances, the nearest frame passes behind the camera and returns at the vanishing point. The building is finite; the walk is not.

The concept

The site translates the Borgesian infinite library into a tactile web place: umber architecture, green-black reading rooms, oxblood leather, and one scarce field of lamplight. It is not a museum label about an imaginary library. The opening threshold admits the reader; the unusually tall stacks section turns ordinary scroll into physical passage.

The spectacle remains concentrated in the corridor. A catalogue, discarded reader notes, a census, and a final sealed arch create institutional rhythm around it. Invented pressmarks, conditions, custodians, and warnings make the collection feel governed even when it cannot be measured.

Visual machinery

  1. The recycled corridor

    buildCorridor() in main.js creates nine or twelve shelf frames. setupScroll() measures progress through the 520vh stacks, wraps every frame with modulo arithmetic, and updates translate3d(). A faint lateral drift keeps the movement from feeling mechanically perfect.

  2. Procedural volumes

    makeBook() combines independently mixed title halves, suffixes, authors, leather colors, conditions, pressmarks, and excerpt fragments. mix() prevents short repeating pairings. Phone rows use fewer 44px spines, preserving keyboard and touch access.

  3. The opening book

    openBook() writes the selected record into a CSS-built leather volume. The cover rotates around its right edge to expose paper-gradient leaves, folios, running head, generated chapter, and pressmark. Focus is trapped inside, then returned to the spine.

  4. Exact retrieval

    seedFrom() hashes the visitor’s phrase. setupCatalogue() turns it into one stable, phrase-specific title, animates the indexed drawer, and reveals its coordinates. The same query always finds the same impossible book.

  5. The reader accession

    Past 8,600 paces, setupScroll() releases a paper docket from the shelf. setupAccession() lets the reader refuse classification, then records that refusal as evidence—the interface completing the fiction instead of merely describing it.

  6. Lamplight and matter

    Layered radial and conic gradients form the threshold glow, corridor beam, shelf falloff, and reading lamp. setupDust() moves at most 68 canvas motes, redraws at capped pixel density, and cancels its animation frame while the document is hidden.

  7. Age without images

    An inline SVG turbulence layer supplies grain. Inset shadows tool the leather and cut cabinet joints; clipped polygons, ruled paper, tape, and stamps keep the reader notes from becoming generic cards. All atmosphere remains code-native.

Palette & type

EB Garamond carries the human voice: monumental titles with tight leading, conversational prose, italics, and the opened pages. Cinzel is reserved for plaques, coordinates, controls, and navigation—the bureaucracy of the institution. Both families are self-hosted.

Deep ink#180f0a
Lamplight#e8c07a
Oxblood#5a2024
Lamp green#1c3a31

Contrast comes from scarcity: near-black wood occupies the field, parchment carries reading text, and amber appears only where metal, light, or institutional emphasis earns it.

Reproduce this

Ask an AI frontend agent for a semantic, asset-free spatial fiction—not a landing page. Specify a single dominant metaphor, a historical palette, deterministic content, and one scroll-controlled 3D scene that recycles its geometry. Require every generated object to have a real title, accessible name, and meaningful interaction.

“Build an infinite archive as a place I can enter. Use local literary typefaces, CSS perspective, mixed deterministic seeds, and a scroll-walk whose architecture recycles invisibly. Let every operable volume open into an original excerpt. Render wood, paper, brass, dust, wear, and lamplight with code. Include an authored load reveal, keyboard-safe dialogs, reduced motion, hidden-tab animation pausing, and visual QA at phone, tablet, and desktop widths.”

Then review the screenshots mercilessly. Perspective needs darkness around it; historical typography needs exact line breaks; “infinite” content needs enough combinatorial depth that the visitor cannot perceive the generator.