Build notes · Zero2Webmaster showcase

How the Aharon Wheels Bolsta page was made

This is the build guide for the Aharon Wheels Bolsta showcase — exemplar #5 in the Zero2Webmaster cinematic series, and the demonstration of how we help musicians. It rebuilds the flagship page of Kerry's live WordPress client site, aharonwheelsbolsta.com, as a single self-contained HTML file.

The direction: photo-cinematic, plus one audio-alive set-piece

Every page in this series must open with a structure the others don't use. The first exemplars led with WebGL shader heroes; the Field Journal led with drawn SVG; the Portfolio hub is a ledger. This page leads with a photograph — a magazine split fold: the artist's own sepia handpan portrait dissolving into cream paper, with his name stacked in Playfair Display across the seam.

Two fable-25 guides were harvested live for the recipe: YAMANAKA (directional mask-image dissolves so photos bleed into the page; a blurred paper "washi scrim" behind display text that crosses imagery; the sticky-nav backdrop that docks after the hero) and PULSE — NADIR (the --breath custom property lerped from live audio energy; the idle visualizer so the wheel breathes before anyone taps it; gesture-gated WebAudio, never autoplay).

Real content only

Every fact, figure, blurb, and caption was harvested verbatim from the live site: the five-continents bio, the 20+ ensembles / 30+ recordings figures, the four instrument one-liners, the teachers, the three recordings (two SoundCloud tracks and one YouTube lesson, loaded as click-to-play facades so third-party iframes never slow first paint), the three ways to learn with real package pricing, and the booking line — rites of passage ceremonies, weddings, museum exhibits, MLB baseball games. The photographs are his own, from the site, unified by a CSS duotone filter (they bloom back to true color on hover). The stale events listing on the WordPress site was deliberately replaced with evergreen booking copy.

The rhythm wheel

The one living set-piece is teentaal — the sixteen-beat cycle of North Indian classical music, which Aharon studied under Pandit Swapan Chaudhuri and Ustad Ali Akbar Khan. A canvas draws the cycle as a wheel: sixteen beats, four vibhag marks (×, 2, ○, 3), the theka's bols around the rim.

Honesty rule: the strokes are synthesized live in the browser — a sine with a falling pitch envelope for the bass drum, band-passed triangle pings for the treble strokes, a 20 ms noise burst for fingertip contact. No recordings are used, and the page says so: "the real thing, played by real hands, lives in the recordings below."

Playback is gesture-gated: the AudioContext is created and resumed on the first tap, per browser policy and the PULSE lesson.
A lookahead scheduler (100 ms interval, 250 ms horizon) keeps strokes on the grid at 92 bpm.
An AnalyserNode feeds a single --breath CSS property each frame; it drives the gold glow behind the wheel. Idle, the wheel shimmers on layered sines so screenshots never show dead UI.
The hub counts beats live (1–16) while playing; reduced-motion visitors get a static completed diagram, and audio still works if they explicitly press play.

Brand tokens, from their site

The palette is derived from the WordPress site's own identity — warm cream #F7F2EA, ochre gold #9A6C10, teal #4ABDC5, deep maroon #470707 — with the two-tier accent rule applied: bright ochre and teal are fills and large display only; text gets darkened AA-checked tiers (#7a540a at 6.1:1, #1f6b72 at 5.5:1 on cream), and bright teal appears as text only on the maroon panels (7.2:1). Type is the site's own trio: Playfair Display, Cormorant Garamond, Jost — body copy 20–24 px, every text role ≥20 px.

Verification

Three Chrome DevTools MCP iteration passes, desktop 1440×900 + mobile 390×844, ~9 scroll depths each.
Zero console errors; one <h1>; alt text on every image; no horizontal overflow (two overflow bugs found and fixed in pass 2).
Programmatic contrast audit of every link and button-text-on-fill: all ≥4.5:1 (or AA-large where the type is display-size).
60 fps, zero long frames, on a 6-second scripted full-page scroll.
Reduced-motion: Ken Burns and idle shimmer off, all copy immediately visible, static wheel.

Stack

One HTML file, inline CSS and vanilla JS — no frameworks, no GSAP, no build step. Canvas 2D + Web Audio API for the set-piece; IntersectionObserver for reveals; film grain and the favicon are inline SVG data-URIs. Google Fonts and the two click-to-load embed providers are the only external requests.

Built by Claude Fable 5 in one session (2026-07-15) for Zero2Webmaster · View the page · All showcases