← Back to BASELINE
BUILD NOTES / 2026-10-14

BASELINE
From prompt to page.

A lifelong love of the game. An independent static interpretation of the archived GetLayers brief.

01 / Read the brief

The text source is 13-BASELINE-TENNIS-CLUB.md. Reference media could not be inspected in this environment. This is not a pixel-identical reconstruction.

02 / Establish a visual system

Background #0b213d, foreground #f5f7ee, accent #d4ee7b, surface #142e4c. Local fonts, a responsive 1320 px maximum grid, and a site-specific hero composition establish the hierarchy.

03 / Build the signature mechanism

A Three.js perspective court is assembled from a plane, line segments, net, and a bouncing optic-yellow ball. A DOM surface selector updates both the 3D court and a CSS court plan. Booking buttons open a local, labelled form with the requested pathway.

04 / Make it interactive

05 / Record the adaptations

No stock club photography, real coach biographies, UTR credentials, real availability, or payment. The club and all fees are fictional; surface selection changes court visuals rather than recoloring all navigation.

Shared architecture: local Three.js, native scrolling, a single frame scheduler, capped pixel density, offscreen/hidden-tab suspension, reduced-motion support, CSS fallback, and no backend.

06 / Validate honestly

See the actual validation record for test results. Automated checks do not replace manual screen-reader testing or reference-image comparison. All readouts and submissions are illustrative and local.

07 / Reproduce the build

python3 -m http.server 8080 --bind 0.0.0.0
# Open /getlayersai/sites/baseline/

cd getlayersai
python3 tools/build.py
python3 tools/verify.py
npm ci
npm test

Edit this site's record in tools/catalog.py before rebuilding. Shared rendering and interactions are in shared/scenes.js and shared/interactions.js. Generated HTML and documentation will be overwritten on regeneration.

Complete source documentation

README ↗Adapted prompt ↗Build log ↗