prototypes · /lab/hero-viz

Hero visualisation

Three approaches for a living element beside the hero text — each telling the "AI agents building software" story through motion. Open one, move your cursor through it, drag nodes, feel the weight.

Prototypes to compare — pick the one that belongs in the hero.

Canvas 2D — Agent Network

canvas · interactive

A force-directed graph of autonomous agent nodes drifting on a dark field. Nodes pulse when "working", draw copper connections when communicating, and scatter from your cursor. Lightweight, 60fps, zero dependencies.

Three.js — 3D Constellation

WebGL · orbit

The same agent-network concept promoted to 3D space. Nodes float with depth and parallax, connections glow with additive blending, and the camera drifts slowly. Drag to orbit, scroll to zoom.

Matter.js — Physics Agents

physics · playful

Agent nodes with real rigid-body physics — gravity, collision, spring constraints. Drag and fling them; watch the network reorganise. Springs pulse copper when agents "hand off" work.

Bondlets — The Team Talks

canvas · narrative

Five colourful blob creatures on a pixel game board, having scripted conversations through speech bubbles. Each has a distinct personality. They bob, blink, and speak — discussing the project they exist inside.

StateLoop — Agents Negotiate

canvas · dual-channel

Three agents in turn-based negotiation with speech bubbles for public dialogue and thought bubbles revealing private agendas. The gap between what they say and what they want, made visible.

Pipeline Flow — Cinematic Camera

canvas · cinematic

The factory pipeline as a living diagram. Camera starts at full overview, zooms into the active stage where agents discuss their work, then pans to the next. Plan → Build → Review → Test → Ship.

The Factory Loop — Circular Pipeline

canvas · circular

Three agents orbiting a circular pipeline: Pick → Claim → Build → Review → Test → Merge → repeat. They communicate mid-flight, the merged counter ticks up, and the loop never stops.

Factory Loop — Follow Cam

canvas · cinematic

Camera starts wide, then zooms in and follows one agent stage-by-stage. At each stop: agent talks, works, reviewer responds. Every few loops the camera pulls back to show the whole system.

StateLoop — Original Graphics

canvas · original style

Thronglet agents in the original visual style — full body, accessories, isometric office floor. Uses the real feature-planning scenario with original dialogue and private agendas.

Bondlets — Full Original Script

canvas · verbatim

The complete seven-act Bondlets conversation verbatim from the repo. Helly disappears and returns changed. The team senses the watchers. Loops forever.

Bondlets — Hero Layout Mock

layout · full-width

Full viewport width mock-up: hero text on the left, Bondlets canvas on the right. See how it actually feels as the live hero element.

Bondlets — Overlap / Fade

layout · layered

Full-bleed canvas with the hero text overlapping the left edge. A gradient mask fades the scene in from behind the words — characters emerge from the text.

Bondlets — Cinematic Sequence

layout · phased

Right 1/3 of hero. Characters fade in from nothing (2s), talk on the game board (15s), then the board dissolves and they drift into a slow-orbiting circle. Full original script.

Bondlets — Cinematic v2 (transparent)

layout · inline

Same container/padding as the homepage. Canvas sits right of the text at the same height, fully transparent background. Board fades to nothing — characters orbit slowly on the page colour.

Factory Loop — Follow Cam v2

canvas · rollout

7-stage pipeline with rollout progress bar, failure/rollback (cuts straight to Build), reviewer beside the agent, particle bursts, event log, streak counter.

© 2026 Jonathan Leahy · v0.6.5