Charles
Brands & sites

Lu's Lair

A Gulf-coast witch's site. A tide-rise hero, a moon almanac, a draw-your-own sigil, a page-curl spellbook, and a full 78-card tarot drawn in code.

Status
LiveConcept
When
Jul 2026
Category
Brands & sites
Links
The elevated rebuildThe original site

Lu is a fictional modern witch on the Southwest Florida coast. The original build opens on LOW TIDE, where the water rises over the title into an underwater transition, then moves through an eleven-entry moon almanac with a sticky moon that waxes as you scroll, a ritual where you draw one sigil stroke that dissolves into a starfield, a spellbook whose pages physically curl, and a 78-card tarot deck drawn in code.

The elevated rebuild pushed the same world toward an award-grade bar with a new grid, plate art, and a stricter QA harness.

The elevated rebuild's hero. Plate art, the small wordmark, the ledger, the scroll cue.
The elevated rebuild's hero. Plate art, the small wordmark, the ledger, the scroll cue.
LOW TIDE, the original hero, before the water rises over the title.
LOW TIDE, the original hero, before the water rises over the title.
The almanac with the sticky moon rail mid-wax.
The almanac with the sticky moon rail mid-wax.
The spellbook, a page mid-curl.
The spellbook, a page mid-curl.
Screenshot coming
One of the 78 tarot cards, drawn in code.

Stack

  • Static HTML, CSS, and JavaScript
  • Three.js for the shader water and the page-curl grimoire
  • GSAP ScrollTrigger for the pinned scroll scenes
  • Full CSS fallback when WebGL is off, a reduced-motion path
  • A headless QA harness with contract, copy, and visibility checkers

Decisions

  1. The first homepage read as a sales page, so every pill, services row, and testimonial card was deleted and the page was rebuilt around three set pieces, LOW TIDE, THE ALMANAC, SIGIL INK.
  2. Tarot art is geometric and code-drawn, all 78 cards, with no generated imagery, and judged by an independent tarot-reader review.
  3. The grid is a formula stepped at 1600, 1900, 2200, and 2560, not fixed constants, so the composition holds on ultra-wide screens.

Lessons

  1. Green gates are necessary and not sufficient. The bugs that mattered, a section that never revealed and a wordmark computing to zero size on a phone, passed every automated check and were only caught by measuring real element boxes at real viewports.
  2. Reflected stars that look gridded are a sine lattice. Sampling the actual night-sky canvas mirrored at the waterline made the reflection match the sky by construction.