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 opens the direction's own page, with its live prototype and its captures.
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.
18
Textile Block
The General Translation landing page as a Frank Lloyd Wright textile-block relief wall in horizontal courses. One square cast module is the grid; content sits on smooth cast faces, ornament is a library of six geometric reliefs (the Ennis cruciform, the Millard chevron, the Storer bar-and-slots, the Freeman stepped pyramid, the Aztec Hotel greca band, the running bond), and every course of the page is keyed to one relief. Light behind the perforated Ennis and Storer blocks is a live Bayer dither field; the shade the upper wall casts across the dark jade course is a static ramp of nested Bayer tiers. Every line on the page is a joint drawn once; every label on the wall is a header brick flush in a block's corner. A materials legend near the base names the six reliefs and the five materials from the same records that draw them.
19
Stepped Fret
Mitla fret strata: the page is a stack of horizontal registers bounded by five distinct Zapotec frets (stepped fret with coil, hooked step, stepped chevron, stepped diamond, opposed pair) drawn at three scales and assigned by register; each register's content block steps one fret step right and back down the page with the gutter it leaves filled with graded Bayer stone, so the grid itself is a stair. The hero is one monumental fret in ordered dither with the claim set in the step it leaves open, and the dark band is the same figure inverted: the Mitla facade in cream on black, and the hero's stair returning as six solid cream plates carrying the platform tiers.
21
Glazed Bond
General Translation as an Ishtar Gate elevation in the Babylonian revival of Art Deco. Two battered towers with stepped, turquoise-capped parapets flank a corbelled arch that holds the claim; every section below is one more course of the elevation, its content set as glazed panels into running-bond brick, with gold rosette bands on lapis crossing the towers between courses. The T proof is laid as Flemish bond with glazed headers: a lapis header brick (the flag chip) beside every cream stretcher (the translation), the source string as the one gold brick. Languages are three courses of rosette medallions with the endonym at each center. The four product surfaces sit as tablets in a lapis inner court under its own two-step crenellation. The story is a three-tier ziggurat. Pricing is a gate in miniature: two towers carrying the plans as gold plaques, the rate ledger as the lapis opening. Every glazed surface catches light as ordered Bayer dither from one shared set of tiles; no gradient anywhere. Geometry only.
23
Brick Lattice
The whole page is one glazed-brick wall in running bond, and every brick is an ordered-dither cell. Density on the Bayer screen draws the ornament from a six-pattern book, one pattern per section: a rosette field behind the claim, chevron courses behind the wall of translations, the inverted lattice of the kiln with ziggurat setbacks and merlons, meander registers around the medallions of the languages band, palmette fans under the glazed pricing panels, and the stepped foundation under the footer where the book itself is printed. Copy sits on smooth glazed panels with stepped parapet corners cut out of the lattice; every named panel carries a glazed header course the way the wall's bricks do. The T proof is one source brick lighting its neighbours, in the DOM bricks and in the lattice behind them at once. Everything is complete at rest; hover and motion only add.
24
Screenfold Codex
The landing page as a Maya screenfold: one strip of bark-paper cream folded into ten leaves, each a red-oxide-framed page cut into horizontal registers by red rules. Every leaf is a parallelogram whose side edges run a fixed 40px across from top to bottom, adjacent leaves running opposite ways, so every crease lines up exactly and the strip's silhouette zigzags down the page like an accordion pleat seen off its axis. The folds between leaves are stepped Bayer troughs (inked at a valley with a solid crease hairline, red oxide at a mountain with a bare-paper ridge). Dither is the writing: twelve geometric signs carved through dithered squares form a documented vocabulary, each standing for one product concept (strings, build, runtime, CLI, dashboard, review, locale, languages, routing, edge, context, tokens) and printed wherever that concept appears, with the key on the back board. Bar and dot is the counting: every figure prints in the Maya numeral beside its Arabic form, with the key on leaf one. The living material is the real product: the shipped Next.js sample, both TranslateWindow belt strings in five locales, the component outputs, the review rows, the 120-row locale roster, the published rate ledger, the shipped feature grid.
25
Raking Relief
A bas-relief alabaster wall under a raking light from the left, made monumental. Every form on the page is carved by one consistent light: raised tablets catch a lit edge on their left and top and cast a stepped Bayer-tier shadow to their right and below (dense beside the tablet, thinning outward, one exact ramp mask per strip); sunk registers hold the rim's shadow inside their left and top edges and a lit inner wall on their right and bottom; carved headings cast a dithered shadow and incised strings show the lit lip of their cut. Geometric relief bands from the Ishtar Gate, the Guardian Building and Mitla (rosette, palmette, chevron, guilloche, stepped fret) run between the courses and frame every raised tablet. The content is inscription: the claim in Cinzel capitals under a sun-disk crown, the same claim incised in its sixteen shipped locales, the Next.js source raised beside its eight translations cut into the wall with lapis locale inlays, the locales as a rosette band with the word for language in nine scripts, the agent on a stele inside a shadowed recess with a stepped niche head, the published rates on three tablets under ziggurat caps with the shipped compare ledger sunk beneath. Alabaster and warm shadow, one lapis inlay.
26
Calendar Rings
A General Translation landing page as one concentric disk that works as an instrument. Ground and dither rings alternate outward from the source at the center and every ring reads something real: the claim in the hub inside the jade source circle, the name inscribed on ring one, the four product surfaces labelled along ring two, the seven usage rates as bar-and-dot numerals knocked out of ring three, the twenty locales of the outer ring as flag chips on ring four, and a rim notched once per locale. A stepped plinth carries the sub, the CTAs and a six-cell key that says how to read the disk. Every later section unrolls one ring into a wide arc band with radial cells, notch ticks and numerals seated on the arc: the customers, the T component as a half disk around its source window, the stack and the nine-beat pipeline in the negative ring floored by the disk itself inverted, the languages in two bands of ten in the disk's own order with a variants register, and the pricing file as seven rate segments plus two plan segments. Lineage is the Aztec and Maya revival of 1920s deco, geometry only (Sun Stone, Dresden Codex numerals, Aztec Hotel registers); palette is obsidian, fired clay, jade and gold.
27
Talud-Tablero
The General Translation landing page as a stepped platform in the Teotihuacan talud-tablero profile. Every section is one terrace module: a framed tablero (the rectangular content panel with a red oxide projecting frame and a hairline molding each side) over a sloped talud (a clip-path trapezoid of Bayer-tiled volcanic stone that carries the ornament, the stair, or a load of chips and cells). Each terrace is one step wider than the one above it (data-tier 6 down to 0), so the page silhouette is a pyramid in elevation: the claim on the top platform, a stair axis with treads and two red alfardas descending through every talud, a full-bleed volcanic-stone plaza at the foot (the dark moment), and a lower platform beyond it carrying the pricing file as three tableros of increasing frame depth and the footer as the base course. Language as the oldest technology, carried on a platform built in registers.
28
Apadana Grid
The General Translation landing page as the floor plan of a hypostyle hall seen from above. Every section is a hall in plan: a strict square grid of column bases (three concentric rings, the middle one dashed so each dash is one flute) on every axis intersection, with the bays between the columns holding the content. The halls follow one another down the page with different column counts and the pitch is derived from each: the portico (6 by 2, pitch 200) holds the claim between its two rows with two sun-disk dither plates in the outer bays and double-volute capitals over the front row and mirrored under the back row; a 4 by 4 bay hall proves the T component with the source code window at the center and eight locale builds of "Scale to every language" in the surrounding bays, each flag chip seated beside its column base as a nameplate; the great hall (6 by 6, twenty-five bays) sets one locale per bay around the halftone globe, zh-Hans and zh-Hant flanking the center, with the four-row variants register beneath; the throne hall at night is the dark moment, a full-bleed black-basalt band with a gold-hairline 3 by 3 field whose four rooms are the product surfaces (six-stack code window, the gt translate terminal, the review workspace, the Locadex trace) over a dithered lamplight floor; the treasury sets the seven-row rate ledger and then frames Starter, the footnotes with the compare link, and Enterprise in three bays; the rear portico is the footer's four link columns. The page's rails are drawn as walls with thickness (two faces ten pixels apart with a hairline hatch between, the draughtsman's poché). Language is the oldest technology; the hall that received every embassy is the frame.
29
Clay Tablet
The page is a museum case of clay tablets. Every section is one tablet: a fired-clay slab with 12px pillow corners, ruled into registers and columns, sitting on a dark wet-clay case ground between hairline shelf lines, each with a museum label (catalogue numeral, name, one line of fact) under it. The signature device is the wedge dither: the cuneiform wedge (a triangular head with a tail, geometry only, never a sign) is the cell of an ordered Bayer dither. Every grid cell reads a scalar field and compares it against the 8x8 Bayer threshold from src/lib/dither.ts; a lit cell takes a vertical wedge, and above half tone a second pass against the transposed matrix lays a horizontal wedge across it, so tone is impression density and never a gradient. The hero is the largest tablet: the claim "Scale to every language" in Forum as one shaped text node with lang and dir, re-impressed through the sixteen shipped locales by a clip-path stylus wipe; a rosette frieze (five lobed disks, the Assyrian border repeat) in wedge dither below it, rendered server-side as SVG so it is complete before any script runs; a lapis seal at the corner (a disk ringed by eighteen radial wedges carrying the GT monogram in slip); and the colophon with the six customer marks masked into the page ink. The T component proof follows the Behistun inscription: the shipped gt-next sample in the first column, then one column per locale (es, ja, de, fr, zh) under its flag-chip seal, the three outputs of the sample (h1, DateTime, Num) impressed in each, the columns divided by doubled threads, the translate run as the bottom register. The one dark moment is a black-stone stele among the clay that stays black in both themes, with the stack in seven registers, the gt cli terminal with five LocaleTag chips, the closing acts, and the wedge dither in motion on a canvas at its foot. Pricing is three small tablets on one shelf: the seven-row rate ledger with both footnotes, Starter $0, Enterprise Custom. Palette: fired clay #cfa87b (tablet face), wet clay dark #2a1a10 (ink and case), cream slip #efe4d0 (code and workspace panels), one lapis #2447a3 (seals, the active column edge, the zh-Hans/zh-Hant tell ring). Dark mode turns the tablets to wet clay, the ink to slip, the case to #070707.
Archive
The versions retired from the site. Each row opens its full-page capture; the code stays in the repository history under the commit the capture names.