06 · Plumb Type Foundry: a living specimen with a working font tester

Plumb is an imaginary type foundry whose whole site is live text in three real open-source variable fonts. There are no images and no WebGL. What stops people is the hero: giant letters stretched edge to edge that swell in weight and width as the pointer passes over them, with a live readout of the nearest letter's axis values. Further down, a working tester gives you a paste-ready Google Fonts link tag and CSS block. The page says plainly that the foundry is fictional and the typefaces and their makers are real.

Inspiration

Visual direction

References

Why these choices

With no images or shaders, the "how is this a website" feeling had to come from type, and variable fonts are the one place where type itself can animate smoothly. That also makes it the lightest of the ten: one HTML file plus font requests.

The tester gives it a practical job, so it is more than a demo. It handles the details that make the output trustworthy: only changed axes go into the CSS, optical size can be left on auto, and the generated link tag only requests the axes in use.

Trade-offs visible in the code: a JS fallback runs the scroll animation when animation-timeline is unsupported (and ?nosda=1 forces it for testing). Reduced motion turns off the reveals, scramble, typing and idle drift. The hero reads layout once per frame and writes in batches. The marquee and hero stop working when off screen. The cost is a heavy font request (Roboto Flex with all axes) and a long scroll in the axis parade, about 5 screens.

Who this kind of site is for

Good fit: type foundries, design studios, agencies, editorial and portfolio sites, conference or event pages, and any brand whose identity is typographic. It also suits a tool-led site where one working widget (the tester) earns the visit.

Wrong call: a local trades business, a clinic, or a shop where people want hours, prices and a phone number fast. Giant, shifting type and a 5-screen pinned section would get in their way, and the self-typing colophon would add nothing.

How to make it

Stack and key techniques

The prompt

Build a single-file website (index.html, no build step, no libraries, vanilla JS and CSS) for "Plumb Type Foundry", a fictional foundry whose entire site is a living specimen set in real open-source variable fonts. No images, no WebGL, no canvas visuals. The footer and colophon must state clearly that the foundry is imaginary and credit the real type designers (Roboto Flex by Font Bureau, Fraunces by Undercase Type, Bricolage Grotesque by Mathieu Triay, DM Mono by Colophon Foundry; all SIL OFL via Google Fonts).

Visual direction: paper #F3F0E8, ink #000000, one hot ink #FF4F00. An Invert control swaps paper and ink using a View Transitions circle reveal from the click point. Fonts: Roboto Flex with all 13 axes, Fraunces (opsz, wght, SOFT, WONK), Bricolage Grotesque, DM Mono for captions. 12-column grid, hairline rules, numbered sections 01 to 07, giant uppercase type justified edge to edge. Motion comes from variable axes, not transforms. A "G" key toggles a 12-column grid overlay.

Sections and signature moments:
1. Hero: "PLUMB / FOUNDRY" fit to the full width with a height clamp. Each letter's wght and wdth rise with pointer proximity (smooth falloff, eased), the nearest letter turns orange, and a readout shows its axis values. When idle, a point drifts on its own. On phones, use a four-line version and device tilt.
2. Width: four lines, each stretching wdth 25 to 151 as it scrolls through the viewport, using a registered @property --p and animation-timeline: view(), with a live number from a CSS counter. Include a JS fallback for browsers without scroll timelines.
3. Weight: one huge word going from wght 100 to 1000 with a ruler and orange marker.
4. Velocity marquee: four rows in different fonts that speed up and skew with scroll speed.
5. Axis parade: a pinned sticky stage that steps through all 13 Roboto Flex axes with scroll, one sample word each, auto-fit so nothing overflows, a big orange live value, a min/max bar, and a clickable rail of axis tags.
6. Drawer: three font rows that animate their axes on hover and load the font in the tester on click.
7. Glyph inspector: a grid of about 117 characters, a large glyph with baseline, x-height, cap-height, ascender and descender lines measured from canvas, an orange ghost of the heaviest weight, a Unicode and advance readout, a weight slider, and a scramble when choosing.
8. Tester: editable text, sliders generated from each font's axes, animated presets, optical-size auto, a Google Fonts link builder that requests only used axes, a CSS block, copy buttons, and a waterfall of sizes.
9. Colophon: text types itself in on scroll; each new letter starts at GRAD 150 and settles to 0 without reflow.

Details: scrambling nav links, magnetic buttons, a difference-blend cursor dot that changes shape over links, text and sliders.

Rules: respect prefers-reduced-motion, keep keyboard access (arrow keys in the glyph grid, labelled sliders, visible focus), no horizontal overflow from 360 to 1920 px wide, and pause off-screen animation.

Verification loop: open the page in a browser at 1920, 1440, 1024, 820, 390 and 360 wide. Screenshot every section at several scroll stops. Check the console for errors, measure text widths at two axis settings to confirm each axis works, test the presets, copy buttons and generated Google Fonts URLs, then fix and repeat until clean.

Build notes

Stepping down: what you would likely lose

This is an informed estimate, not a measurement. No public benchmark compares these exact models on one-shot frontend work, so the table rests on Anthropic's tiering, earlier-generation reviews and extrapolation.

Feature Opus 5.5 (likely outcome) Sonnet 5.5 (likely outcome)
Hero proximity engine with fit-to-width and height clamp Likely does fine, with a chance of the 1024 overflow bug the builder hit Attempts it with likely bugs: letters overflow at mid widths, or it falls back to a fixed font size
Scroll-driven --p with counters and JS fallback Likely does fine Attempts it with likely bugs: the fallback drifts out of sync with the CSS timeline, or is left out
Pinned 13-axis parade with auto-fit Likely does fine Likely simplifies it to fewer axes or a shorter scroll, or attempts it with words overflowing the stage
Glyph inspector with canvas-measured metric lines Attempts it with likely bugs: lines misaligned after font load or weight change Likely simplifies it away to a big glyph without accurate lines
Tester with correct Google Fonts URLs Likely does fine, maybe a malformed axis order on one font Attempts it with likely bugs: axis tags in the wrong order, so a URL returns 400
Velocity marquee with skew Likely does fine Likely does fine
Colophon with no-reflow Grade typing Likely does fine Likely does fine, but may type by opacity and miss the Grade trick
View Transitions invert, cursor, magnetics Likely does fine Likely does fine, with a possible missing reduced-motion path

Judgment call, rough ranges: Opus 5.5 likely keeps roughly 80 to 90 percent of the visual impact in one pass. Sonnet 5.5 likely keeps roughly 60 to 75 percent. The evidence for a large Fable-to-Opus gap on this kind of task is thin, so I would expect them to be close here. The gap would likely close with a screenshot feedback loop at several widths, or by splitting the build into hero, parade and tester passes.

← Previous reportNext report →