Redesigning General Translation
This site is the working file of a redesign: every direction I tried, the tooling that judged them, and the three full sites that came out the other end. Everything here is live: real pages, not mockups.
The current site grew the way most startup sites do: section by section, launch by launch, each addition reasonable and the whole slowly losing its argument. I wanted to stop patching and ask the question properly: what should this company look like when the answer is built from the ground up?
So instead of one redesign, I built many, made them compete, and built the tooling to judge them, down to a pixel auditor that walks every rendered line on every page and fails a round on a single doubled rule.
Walk the whole thing
The full deck: the storyboard, the principles, every live prototype, and the scoreboard that picked the winners.
▶ Open the deckWhat shipped
The three below are proposals. This is what came out of them: the site now live at generaltranslation.com, rebuilt here page for page so it can be read in the same room as the directions that produced it. Dossier is where most of it comes from; the rest is what survived contact with a real codebase.
Shippedgeneraltranslation.com
The one that shipped — the three below, resolved into a real codebase.
The three sites
The three strongest ideas grew into complete sites: a home built on the toolchain system, each with its own take on the hero terminal, over an enterprise page built on the singularity gate. Dossier is the completed direction; Signal and Orbit keep their own heroes and now carry the previous-generation sections it retired. The two faces of each site are overlaid below. Drag the seam to sweep between them.
Dossierthe completed direction
The every-stack section lives inside the hero terminal.
Orbit
The hero terminal is one line and a strip, a far shorter first fold.
Signal
Session and output, side by side in one window.
The flagship, dissected
Every section of the completed direction in four states (both themes, both widths), interlocked into one wall. Hovering any capture lights up its section's other three states. The captures are theme-locked, so light and dark grounds hold whichever theme this page is read in.
What the system can do
Twelve engines, built once, reused across the directions. Each row names one, states the law it runs on, and points at a place it runs live.
Text rasterized to a brick lattice; every mote lands on real ink. Live on the dossier hero.
The headline dissolves to dust and reprints through a clip front, driven by the locale belt, one clock.
A gsap-ticker marquee whose crossings drive the whole hero; the remeasure preserves continuity.
A damped dial scrubs a piecewise time map; copy locks in at a fixed read line. Below the dossier fold.
Isometric tower and plate primitives with shape and image APIs, and a dithered-logo layer.
Eight authentic ordered-dither presets, switchable.
The drag seam that sweeps two page faces, at work on this page’s site cards.
Words fly to their seats in reading order.
The shader field behind the deck feature. By @sabosugi.
Margin glyph rain with a quiet zone that follows the copy.
The harness that shot every tile on this page: section-anchored element screenshots, both themes, both widths.
Walks every rendered line on every page; a single doubled rule fails the round.
What building it taught
Eight rules the build settled the hard way. Each was a bug before it was a law.
- 01
svhis layout,dvhis paint. The URL bar collapse re-resolvesdvhand reflows anything built on it; only paint-level overhang may ridedvh. - 02
non-scaling-strokebreakspathLength. Chromium computes dashes in screen space the moment the attribute lands; dash choreography must pick one space. - 03
GSAP advances on the wall clock. Under 10x CPU throttle a timeline still lands on schedule; what degrades is frames, so design the cheap path, not a slower clock.
- 04
The mobile type scale is a ladder, not a percentage. Tokens (
--tcm-*) with px fallbacks, defined once, consumed everywhere; boxes joined the ladder as--tcm-box-*. - 05
A veil must be armed before the section streams. A script stamped from the server boundary beats any effect; React never executes a script it renders.
- 06
Measure at the read line. The story’s copy locks where the reader’s eyes sit (55%), the spotlight follows a different line (80%); one anchor ladder per concern.
- 07
Whitespace is content. JSX strips newline-adjacent spaces; a heading that breaks on desktop and flows on mobile carries its space explicitly.
- 08
Fonts preload by module, not by usage. Every face declared in a module ships to every page importing ANY export from it; split modules by loading scope.
Every direction
Twenty-plus directions got built; thirteen survived review. Some are quiet evolutions of the current site, some are physics experiments with type. Each row below is a live page.
Toolchain
The minimalist evolution of the current site: one ruled column, bento rows whose shells never repeat, and a family of isometric line-art diagrams.
02
Chroma Flow
A curl-noise flow field pulls streaming color through the nameplate, and the product story reads as one continuous pipeline beneath it.
03
Dither Field
Hellos in eight scripts resolve out of Bayer noise and dissolve back, pixel by pixel, above data-led product rows.
04
Aurora Paper
A grainy aurora drifts behind an otherwise disciplined paper page, and the product story is told as one working workspace.
05
Glyph Rain
A particle rain of world-script glyphs gathers into each word of the headline, holds, and re-scatters, above script-led product sections.
06
Prism Light
One white beam splits through a glass prism and the translations ride the dispersion fan out, above delivery-led sections.
07
Lens Gate
The ruled paper itself passes through one breathing glass — components enter in English, refract, and exit translated on the far side.
08
Paper Foundry
The bento machined into paper — hairline cells set into a brushed-graphite sheet, finished in strict reading order.
09
Terminus Board
A departure hall for locales — a split-flap headline over a flip-wave cell grid that lists languages the way a terminus lists trains.
10
Wide Rule
One analytic interference band crosses enormous quiet space, and the whole product story is set in the calm around it.
11
Event Horizon
Component walls dive with curved perspective into a black-hole gate — English falls in, translations emerge, and flags orbit the horizon.
12
Hourglass
Dark corridor walls of UI cards sweep concavely into a vanishing point, pinching at an hourglass waist that holds the mark, the flags, and the CTAs.
13
Singularity
The enterprise gate: the lensing horizon alone on open paper, customers riding the locale belt, and a contact bay beneath it where glyphs rain through the dark.
