Colophon, expanded

How we built this

This site was built by Alfredo directing two AI models — Claude (Anthropic) for research, engineering, and critique, and Fable for creative direction — start to finish, in the open, including a full mid-course correction. Here's the actual workflow, not a highlight reel.

The brief

The ask was direct: build something that demonstrates real capability in web design, motion, and craft, using Webbynd's own brand as the subject, and show it to a large audience. No template, no stock photography standing in for real work, no fabricated numbers. Whatever got built had to actually hold up under a real critique, not just look good in a screenshot.

The research

One deliberate call made early: the initial suggestion was to pull reference images from Pinterest. We skipped that. Pinterest boards are overwhelmingly other people's copyrighted photography and design work, not licensed for reuse on a public site meant for a few hundred thousand viewers. Instead, research went two directions: written analysis of current (2025–2026) high-end web design, WebGL/shader technique, and typography trends, and a fresh design critique of Webbynd's own existing site to find out what actually reads as "expensive" versus what just reads as "more animation."

The short version of what that research found, and what shaped every decision after: structural divergence and craft consistency read as premium. Decoration bolted onto a generic template doesn't. That finding is the reason this page exists as a literal geological metaphor instead of a generic "our process" section with numbered icons.

The pivot

The first version of this site was built before the business had a defined niche — a portfolio piece meant to demonstrate web-design capability, themed around a Nevada gold-mining metaphor: a molten-gold vein running through dark bedrock, case studies framed as lab "assay" reports, services framed as underground "strata." It looked good. It also didn't say anything true about what Alfredo actually does.

Once the real business got defined — automated systems for tax resolution, CPA, and mortgage firms, not web design in general — the mining metaphor stopped making sense. A gold seam in rock doesn't say "AI automation." So the copy got rewritten around the three real niches first, and then the signature visual got rebuilt to match, rather than leaving a good-looking animation attached to a story that was no longer true.

The concept

The current direction came from Fable, after research into what real automation and workflow companies (n8n, Zapier, Make, Retool) actually use for hero visuals turned up a clear pattern: the "glowing neural-network node graph" every AI company defaults to is already a cliché, and the actual market leaders have mostly abandoned illustrating automation literally. The replacement metaphor: a loom. A handful of gold threads, loose and independent in the hero, that interlace with real depth as you scroll — and converge into a single knot behind the final call to action. The Jacquard loom is the literal historical ancestor of programmable automation (punch cards controlling thread patterns), so the metaphor isn't decorative — it's the actual family tree of what Alfredo builds, and "connecting, intertwining systems" was his own brief in his own words.

The stack

Static HTML, CSS, and vanilla JavaScript. No build step, no framework, no npm install. That's consistent with every other site in this family of projects, and it's a real constraint, not a limitation: the entire visual system, including the WebGL scenes, loads from plain <script> tags and one importmap, the same way you'd open the file and have it just work.

• GSAP + ScrollTrigger — scroll-driven animation timing. Free since the 2025 Webflow acquisition, loaded via CDN.
• Lenis — smooth inertia scrolling, wired into GSAP's ticker.
• Three.js via ES module importmap — no bundler required for a real WebGL scene.

The signature moments

Restraint beats scattered effects — one well-executed moment reads more expensive than ten small ones. This one went through a real revision: it originally ran as two separate bounded scenes (a rich hero canvas, a rich final-CTA canvas) connected by a thinner stand-in line in between. It read as two systems, not one, so it got rebuilt as a single system:

• One canvas, the whole page. A single position:fixed, viewport-sized canvas sits behind every section, from the hero straight through the footer. It's always exactly the size of the viewport regardless of how tall the document is — rendering a canvas sized to the full page height would mean shading millions of offscreen pixels every frame, so the canvas stays cheap and the same six threads are simply always present, always weaving, everywhere.
• The threads. Six gold strands, modeled as real 3D geometry — THREE.TubeGeometry built from an animated CatmullRomCurve3 per thread. The over/under weave you see when they cross isn't scripted or sorted by hand — it's the WebGL depth buffer doing its normal job on threads that each have a slightly different z-position, so whichever strand is physically nearer the camera at that pixel wins, automatically.
• Time drives the weave, scroll drives the knot. The idle drift and interlacing run on a clock, not scroll position — that's what makes them feel continuous rather than tied to any one section. The only thing scroll changes is a single cohesion value: as the final CTA approaches, every thread's control points blend toward a live-computed point at the actual "Book a discovery call" button, so the strands visibly gather and knot up right behind it. Loose threads throughout, one tied system at the end — the same shape as the pitch.
• The case-study reveals. Unchanged from the first build: each screenshot sits under a second image, clipped by an animated clip-path: polygon() that GSAP scrubs open as you scroll, so the real "after" screenshot resolves out from underneath. A plain rock-textured panel stands in for Free America Tax's "before" state (no real before-screenshot exists for that client, so a literal placeholder was used rather than faking one), and the actual before/after screenshots run for Global Icon Pageants.

The molten "BYND" wordmark in the hero is deliberately simpler under the hood than the threads: an animated CSS gradient with background-clip: text, distorted by an SVG feTurbulence + feDisplacementMap filter for organic, non-flat edges. No canvas, no alignment risk across screen sizes, and it survived every revision untouched — a molten metal accent still reads as "gold, premium, alive" regardless of what's running underneath it.

The first fix for the "two systems" problem was actually a flat SVG line threading through DOM-measured waypoints — cheap, reliable, and the obvious answer to "keep a 3D scene registered against reflowing content." It shipped, and it was visibly a different, thinner thing than the rich threads above and below it. Fixing that properly meant giving up the safer answer: one fixed-size canvas, always on, doing the whole job, rather than a real system in two places and a stand-in everywhere else.

The image

One image on this entire site was AI-generated: the social-share preview, a macro photograph of a molten gold vein through dark rock, generated during the original mining-themed build. It's held over from that version — still on-palette (dark, gold, premium), just no longer a literal match for the current thread/weave concept. Flagged here rather than quietly left as if it were made for this version, on the same honesty standard as everything else on this page.

The critique loop

The build went through repeated passes using the same design-critique tooling used across every site in this project family: two independent assessments run in isolation from each other — one holistic design review, one deterministic pattern scan plus live browser evidence — synthesized into a single scored report against Nielsen's usability heuristics, then fixed, then re-scored. That loop is what caught, in the very first pass on this page's sibling: a broken link, a repeated label pattern across sections that read as template scaffolding even though the labels themselves were meaningful, a contrast gap in a fallback state most visitors would never even hit, and a cursor effect that was quietly getting in the way of the actual buttons. None of that shows up in a single screenshot. It shows up when something independent actually checks.