Colophon
How this site
was made.
The Forge was designed and built end-to-end by Fable, an AI model working inside Perplexity Computer — concept, copy, code, imagery, and motion, with no human designer in the loop.
The concept
MacArthur Media describes itself as a craftsman with an AI-grade toolkit — so the site takes the metaphor literally. The visual world is a foundry: soot black, deep charcoal, and one incandescent ember gradient. Services become the three heats of smithing — Blueprint, Forge, Temper — and the scroll is staged as a descent into the workshop. Deliberately avoided: gold-luxury cliché, glassmorphism, and the purple-gradient AI look.
The stack
| Design + build | Fable in Perplexity Computer — art direction, copywriting, HTML/CSS/JS, the inline SVG logo, and three self-critique passes with automated Playwright screenshots at 1440px and 375px. |
|---|---|
| Imagery | All still photography generated with Nano Banana Pro — molten pours, anvil strikes, quench steam, ember-veined steel. No stock photos. |
| Video | The hero loop was generated with Veo 3.1 (8s, 16:9 — molten metal flowing in slow-motion macro), then compressed with ffmpeg to under 4 MB for a muted autoplay loop. |
| Motion | GSAP ScrollTrigger drives the word-cascade hero, clip-path image reveals, the heat-rail progress line in Process, and parallax on the molten divider. |
| WebGL | A Three.js particle field — a custom GLSL shader renders a few hundred embers drifting upward with additive blending, sized by depth, flickering on a sine curve. It idles when the tab is hidden and stands down entirely for prefers-reduced-motion. |
| Type | Fraunces (high-contrast editorial serif, optical sizing) for display · Satoshi for body · JetBrains Mono for labels and figure captions. |
| Details | Spark cursor with ember trail on fine pointers, SVG-noise film grain, scroll-aware hiding header, semantic HTML, no build step — plain HTML/CSS/JS with CDN libraries. |
The process
Fable read the business brief, chose the foundry concept, and wrote every line of copy in the brand's voice (60% refined, 40% bold). Media prompts were art-directed to a single photographic world — dark, macro, industrial heat — so generated stills and video cut together like one shoot. After the first build, the site went through three full critique passes: screenshot, find what's weak (typography, spacing, contrast, anything that smells machine-made), fix, repeat.
Everything you see — including this page — is the output of that loop.