SAVE THE FROGS! ✦ Build Notes

How this page was built

The SAVE THE FROGS! Technology showcase was designed and coded in a single session by Claude Fable 5 (Anthropic's Mythos-class AI model), working inside the organization's website-craft repo. Inspired by the cinematic "Eidolon" style of experimental one-page sites — but with one deliberate upgrade: big, readable text, an organization-wide mandate.

The toolbox

• A hand-written WebGL shader paints the hero: a bioluminescent pond of fractal-noise caustics, drifting fireflies (green and orange, matching the brand), and a ripple glow 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, SVG line-icons that draw themselves, parallax ghost numerals, and background color that shifts through pond-and-jungle tones as you travel down the page.
• The set-piece: ~3,200 canvas particles sample the actual pixels of a frog emoji — colors included, which is why the eyes and smile survive — then disperse and reassemble into the SAVE THE FROGS! wordmark, scrubbed by scroll while the section is pinned.
• Type: Outfit, weights 300–900. Body text runs 20–26px, the headline up to ~124px. When in doubt, bigger.
• Brand tokens: green #72af43 anchors the palette; orange #f5821f takes every link and highlight.

The method: iteration passes

Following the "fine-toothed comb" workflow, the page went through three automated inspection passes in headless Chrome before deploying — screenshots at nine scroll depths on desktop and mobile, console-error checks, computed font-size audits, reduced-motion rendering, and a full-page scroll FPS benchmark (120fps).

• Pass 1 caught a mobile nav that wrapped badly, a shopping-cart icon whose dollar sign rendered like a question mark (now a heart), and undersized card text.
• Pass 2 rebuilt the particle frog: alpha-only sampling had produced a dim blob, and the wordmark only crystallized at the very last scroll pixel. Color sampling and a reshaped morph timeline fixed both.
• Pass 3 verified performance, contrast, accessibility (one <h1>, alt text, keyboard focus styles), and generated the social-share image from the live hero.

Care taken

• Reduced motion respected: with prefers-reduced-motion, the shader renders a single still frame, the pinned morph is replaced by static content, 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.