Zero2Webmaster ✦ Build Notes

How this page was built

The Zero2Webmaster Web Craft showcase was designed and coded in a single session by Claude Fable 5 (Anthropic's Mythos-class AI model), working from a one-page written brief. The page's premise is self-demonstrating: it claims Zero2Webmaster builds fast, findable, secure, beautiful, revenue-driving websites — by being one. Building with modern AI, human-directed, is part of the same story.

The toolbox

• A hand-written WebGL shader paints the hero: an aurora of fractal-noise ribbons moving through the whole green range — deep forest to brand green to electric lime — with drifting sparks (rare ones gold) and a ripple that follows your cursor. No Three.js — one fragment shader on a fullscreen triangle.
• GSAP + ScrollTrigger choreograph the scroll story: word-by-word headline reveals, counting stat numerals, SVG line-icons that draw themselves, parallax ghost numerals, and a background that deepens through near-black greens as you travel.
• The set-piece: ~3,200 canvas particles sample the pixels of a lone 0 — filled with a lime-to-deep-green gradient — then disperse and reassemble into the Zero2Webmaster wordmark, scrubbed by scroll while the section is pinned. From zero to webmaster, literally.
• An honest speed pill: the "Speed" section shows how long this page actually took to reach you, measured live from the browser's own Navigation Timing API. Nothing on the page is an invented number — the track-record stats are real figures supplied by the founder.
• Type: Space Grotesk, weights 300–700. Body text runs 20–26px, the headline up to ~124px. When in doubt, bigger.
• Brand tokens: a green-spectrum palette on a near-black canvas — deep green #0E3B16, brand green #82C92B, electric lime #C6F24E — with gold #FFD700 rationed like treasure: the booking buttons, the links, and a few sparks.

The method: iteration passes

Following the "fine-toothed comb" workflow, the page went through three inspection passes driven through Chrome DevTools before deploying — screenshots at multiple scroll depths on desktop and mobile, console-error checks, computed font-size audits, reduced-motion rendering, and a full-page scripted-scroll benchmark that held a steady 60fps.

• Pass 1 caught the sneakiest bug of the build: the gradient-filled headline words vanished entirely once the word-split animation wrapped them in transformed spans (a background-clip: text quirk). It also fixed the brand name being force-uppercased, and a touch-screen artifact where the cursor ripple sat as a static blob. Upgrade: a scroll-progress hairline in the green gradient.
• Pass 2 brightened the morph wordmark — darker greens read as mud at particle size on near-black — and added a cursor-tracking spotlight with 3D tilt to the discipline cards.
• Pass 3 verified performance, reduced-motion fallbacks, accessibility (one <h1>, keyboard focus styles, semantic sections), captured the social-share image from the live hero, and gave the headline gradient a slow living shimmer.

Care taken

• Reduced motion respected: with prefers-reduced-motion, the shader renders a single still frame, the pinned morph is replaced by static content, the marquee stops, and all copy is immediately visible.
• Performance: animation loops pause when their canvas leaves the viewport; device-pixel-ratio is capped; everything animating is GPU-friendly.
• No JavaScript, no problem: all content is plain HTML and remains readable if scripts never load — which is also why search engines can read every word.
• Host-portable: internal links are relative and every absolute URL lives in one labeled block, so the page can move to zero2webmaster.com with a four-line edit.