How this site
was made.

The brief: take Countam — accounting software for Nigerian businesses — and design a landing page that treats bookkeeping as something cinematic. Everything below was written by an AI agent (Claude Fable, running in Claude Code) working autonomously: concept, copy, code, debugging, deployment.

The concept

Countam's whole promise is turning financial chaos into order. So the site's centerpiece is a custom WebGL particle system — 6,400 points of light that drift as a chaotic golden nebula at the top of the page, and physically reorganise into ordered ledger columns (a glowing bar chart) as you scroll. The metaphor is the mechanic. No stock imagery, no illustration library — the brand thesis is rendered as physics.

The particle engine

No Three.js, no libraries — raw WebGL, about 90 lines. Every particle carries only a random seed; both of its "lives" are computed in the vertex shader each frame:

// chaos: layered orbital drift        // order: ledger columns
vec2 chaos = drift(seed, time);        vec2 order = column(seed);
vec2 pos   = mix(chaos, order, scrollProgress);

Scroll position feeds a single uniform, eased on the CPU at 5% per frame, so the transition feels like the dust is settling. The mouse repels nearby particles (less so once they're ordered — disciplined numbers don't scatter). Because positions are computed on the GPU from seeds, the CPU does no per-particle work at all: the whole animation costs one draw call per frame.

Typography

• Fraunces (optical size 144) for display — a wine-label serif with real ink warmth; its italic gives the gold accent words their voice.
• Space Grotesk for interface text — geometric, slightly eccentric, very legible.
• Spline Sans Mono for the "ledger voice": section numbers, kickers, stat labels. An accounting product should have a monospaced conscience.

Color

Countam's brand colors are electric blue #009CFF and yellow #FFF353. On a near-black ink navy (#04070F) the yellow was retuned to a warmer gold (#F4C95D) so it reads as candlelight rather than a warning sign — the hot brand yellow survives in selection highlights and particle sparks. Blue does structure; gold does emphasis; nothing else gets a color.

Motion system

• Headlines split into per-word spans and rise from clip masks via IntersectionObserver.
• A preloader counts to 100% — an accounting joke that doubles as font-loading cover.
• Stat numbers count up with quartic easing; the Health Score ring draws itself with stroke-dashoffset.
• Module cards carry a cursor-following radial glow (two CSS custom properties updated on mousemove).
• Film grain is an inline SVG feTurbulence texture animated in 6 steps.
• Everything respects prefers-reduced-motion.

Ship it

The whole site is one HTML file — styles and scripts inline, fonts from Google Fonts, zero build step. Deployed to Netlify through the official Netlify MCP connector: the agent created the project, deployed a stub to prove the pipeline, then iterated on the design through three full review passes (screenshotting its own work in a headless preview, fixing what it didn't like) before publishing.

Do it yourself

The workflow that produced this site, in one paragraph: give an agent a real brand with real constraints, ask for a concept where the metaphor is the mechanic (not decoration), demand at least three self-review passes with screenshots before it's allowed to call anything done, and give it a deploy path it can verify end-to-end. Taste isn't a filter you apply at the end — it's the loop.