How this site
was built.

Concept & art direction

KESTREL is a fictional industrial-automation company selling autonomous warehouse robots to operations executives. The direction: make enterprise software feel like near-future hardware — a control room, not a brochure. Every visual is drawn in code (canvas, SVG, CSS); there is not a single photograph on the site, and that is the point.

The design language borrows from engineering drawings and mission consoles: dimension lines with real measurements, phosphor-green readouts reserved strictly for live data, safety orange reserved strictly for motion and action, and sections indexed like screens on an operator's desk.

Palette

Four working colors, each with one job. Orange only ever marks motion or a call to action. Phosphor green only ever marks live telemetry. Nothing decorative gets either.

Typography

Two families, three roles — chosen for this subject and no other.

The signature: a live A* command deck

The hero is a real pathfinding simulation, not a video. Six units run job loops — pick face, outbound conveyor, charge dock — on a 44×26 grid with racks as obstacles. Paths are computed with hand-rolled A* (4-neighbour, Manhattan heuristic) and drawn as glowing traces:

// A* core: pull lowest-f node, expand 4 neighbours
var f = ng + Math.abs(gx - nx) + Math.abs(gy - ny);
// grid is 44x26 — a linear scan beats a heap at this size
for (var i = 1; i < open.length; i++)
  if (open[i].f < open[bi].f) bi = i;

Units interpolate along their path at different speeds, leave a fading phosphor trail (a ring buffer of visited cells with per-segment age fade), and the orange trace ahead of each unit is its actual remaining plan. The telemetry strip is fed by the sim: mean path length is the true average of the last 24 computed paths × 1.5 m per cell.

// the trace ahead of each unit is its real remaining plan
ctx.shadowColor = "#ff5a1c"; ctx.shadowBlur = 6;
ctx.moveTo((bot.cx + .5) * cell, (bot.cy + .5) * ch);
for (var s = bot.seg + 1; s < bot.path.length; s++)
  ctx.lineTo((path[s].x + .5) * cell, (path[s].y + .5) * ch);

The deck is also an instrument you can play: click any open cell and the nearest idle unit plans a route to it, with a pulsing diamond marking your order. Hover shows a crosshair with the live grid reference. The loop pauses when the tab hides or the canvas scrolls out of view, and prefers-reduced-motion swaps the whole sim for a single computed static frame — real paths, no movement.

The unit drawings in SCR 02 are hand-written SVG orthographics with dimension lines that carry the actual spec figures — structure as information, not ornament.

Three iteration passes

1. PASS 01 · CORRECTNESS + COMPOSITION

   The boot frame clumped all six units against the right wall — spread the spawn points across the floor. Telemetry painted as dashes for the first half-second — now updates on first paint. Fixed a mislabeled dimension on the dock drawing (amperage on a length line) and gave the deck a taller aspect ratio on mobile so cells stay legible at 390px.

2. PASS 02 · ELEVATE

   Drew grid-reference coordinates along the deck's edges — the same numbers the cursor readout uses. Added a slow phosphor scan sweep every nine seconds, made hovering a fleet unit ignite its dimension lines in orange, and anchored a control-room scroll cue in the hero's dead band at 1440×900.

3. PASS 03 · TASTE

   Chanel rule: removed the CSS scanline overlay and the glow on unit bodies (the path traces keep theirs). Shortened the hero eyebrow that orphaned a word on mobile, added scroll margins so anchored sections clear the sticky bar, and verified the reduced-motion static frame reads as a finished schematic, not a broken sim.

Do this yourself

A recipe for building a site of this caliber with Claude:

1. Pin the subject before pixels. Name the company, the audience, and the page's one job. Kestrel's: make ops executives feel the floor running itself.
2. Steal from the subject's real world, not from other websites. Engineering drawings, dimension lines, control-room screens — the vernacular came from warehouses, not from Dribbble.
3. Give every color one job. Ask Claude to write the rule down: orange = motion/action, green = live data. Then enforce it everywhere.
4. Make the signature element real, not decorative. Ask for a working simulation — actual A*, actual telemetry derived from it — instead of a looping video that fakes one.
5. Make it playable. One interaction that rewards attention (click-to-dispatch) beats ten hover effects.
6. Screenshot, critique, repeat — three times. Have Claude screenshot desktop and mobile, read the images, and name specific fixes before touching code again.
7. Do the unglamorous floor. Reduced motion, keyboard focus, paused off-screen loops, zero console errors. Craft is what's still true when the demo ends.
8. Finish by removing something. The last pass should delete an effect, not add one.