How the Lair was made

The FABLE Lab self-doc — brief, techniques, and the critique loop, in the site's own words. Built 2026-07-12 in one long night of passes. Everything here is honest about what it is.

The brief

Lu's Lair — the fictional practice of Lu, an artist-witch on Florida's Gulf coast. Palette locked to six hexes: void #0B0812, aubergine #1C1226, royal #4A2B6B, amethyst #9B6FD0, bone #EDE6DA, candle gold #D9A441 (used sparingly, on purpose). Type: Cormorant italic against Karla. Archetype: the Magician crossed with the Free Spirit — velvet dark, never horror. The one thing the site had to prove: a physically convincing, draggable WebGL page turn living inside an elegant portfolio. It proves a few more things now.

LOW TIDE — the living hero

The homepage opens on shader water that reflects the actual night sky above it — not a lookalike pattern, the same pixels. The 2D sky canvas is downsampled into a texture every third frame and mirrored at the waterline; a luminance high-pass keeps the stars and lets the haze go, because stars are high-frequency and haze is not:

vec3 stars = skyPoint - skyBlur * 0.92;        // high-pass: points survive
float hp = max(dot(stars, vec3(.333)), 0.0);   // monochrome — no fringes
col += boneAmethyst * hp * .95 * moonMask;     // the streak owns the moon

Your cursor drops damped ripples (eight live at once, as shader uniforms); scrolling pins the page while the tide rises over the letters and the sky's motes become bubbles. If WebGL is absent, the 2D night — moon, motes, shooting star, shimmer lines — is the whole hero, and it is never a void.

The spellbook — a page you can actually turn

The grimoire's signature: drag a page corner and the paper curls. One sheet, two meshes on a shared geometry — FrontSide shows the recto, BackSide a pre-mirrored verso — so every fold resolves to the physically correct face with no texture-swap moment:

phi = theta + 0.62 * sin(2*theta) * pow(u, 1.35);  // the bend leads, then trails
x' = x * cos(phi);  z' = x * sin(phi) * 0.62;      // helicoid curl, CPU-deformed

The bend term is zero at vertical, which is what makes the two-mesh trick seamless. A full CSS flip waits underneath for dead GL, and reduced motion gets an instant page swap. The five spell plates are procedural canvas — ink lines, exact geometry, drawn fresh every frame.

SIGIL INK — leave a mark

At the bottom of the homepage you draw one stroke; the site mirrors it six-fold, sets gold nodes where it crosses the inner rings, holds a moment, then dissolves it into motes that join the page's sky for the rest of your visit. Canvas 2D and arithmetic, nothing else. Refresh and it's gone — that's how nights work.

The Low Tide Tarot — seventy-eight, for real

A complete tarot: 22 majors renamed 1:1 into Lu's world with the traditional attribution printed on every face, four suits (Tides/Flames/Inks/Salts over Cups/Wands/Swords/Pentacles), Marseille-school pips where number × suit × arrangement carry the meaning, courts kept Page/Knight/Queen/King, a point-symmetric back, and a full guidebook — upright and reversed for all 78 — grounded in Waite (1911) and written in Lu's voice. Every card is drawn by deterministic code. An independent review by a veteran-reader persona scored it 31/40 and called the Anhinga "the best rename in the deck"; every fix it named was applied. See all seventy-eight · or draw three on the porch.

The critique loop

FABLE's rule: build blind, then judge the rendered pixels like a hostile art director — three passes, fix everything found, add one deliberate upgrade each pass.

Pass	Biggest finds	Upgrade
1	eclipse-blob moon; mirrored text mid-curl (single-mesh swap); plates blank during turns	the shooting star
2	dead half-viewport under the pinned journal; a Mercury plate with no phone in a spell about phones	candle-breath room light
3	badge text-through-text; curl verso too dark	the velvet bookmark ribbon

Later passes replaced a sine-lattice "star" field with the true sky reflection (the grid was literally sin(x·300)·sin(y·260) — no tuning could scatter it), rebuilt the homepage from a landing page into an almanac, and put a real deck of cards in the back room.

Assets & method

Generated imagery on the site: two textures only — parchment fiber and tooled leather (Higgsfield z_image, 2.45 credits total). Every plate, card, vignette, moon, and wave is procedural geometry.
The tarot deck and all animations: zero generated pixels, zero credits.
Fonts: Cormorant & Karla (Google Fonts). Motion: GSAP + Three.js from CDN. No build step — this site is folders of HTML you can read.

LU'S LAIR is a fictional concept site built in the FABLE Lab by an AI working under a human director's brief, gates, and vetoes — which is exactly how it says it was made, because that's the house rule. Lu isn't real; the moon very much is. Nothing is for sale, no spell or spread is advice, and (941) xxx-xxxx has never rung anywhere.