01 · Creative premise
The product is motion, so nothing sits still.
A type foundry sells letterforms. A variable-font foundry sells letterforms that move between voices. So the Lumen site refuses static type: the hero headline leans toward your cursor, the specimen stage answers sliders in real time, a whole section stretches its letters as you scroll, and even the footer wordmark breathes. Every animation is the product demonstrating itself.
If a headline can be set in a variable font, it should prove the axes exist.
The foundry is fictional, but the fonts are real: Fraunces and Roboto Flex, two of the most axis-rich open typefaces available, recast as "Lumen Serif" and "Lumen Flex". That honesty matters. Every weight, optical size, softness, and wonk value on the page is a genuine font-variation setting, not a pre-baked image.
02 · The axis system
Four numbers are the whole design.
Everything expressive on the page is one CSS property: font-variation-settings. Fraunces exposes weight, optical size, and two custom axes, SOFT (terminal rounding) and WONK (irregular letterforms). Roboto Flex adds width. The entire site is choreography over those numbers.
/* one property, every voice */
font-variation-settings:
"opsz" 144, /* display cut: high contrast, tight apertures */
"wght" 560, /* weight as a volume knob */
"SOFT" 0, /* 0 = crisp; 100 = rounded, warm */
"WONK" 1; /* opt-in irregularity */Because axes are just numbers, they interpolate beautifully in a requestAnimationFrame loop. The site keeps a target state and eases toward it every frame, which makes sliders, cursor proximity, and scroll all feel like the same living material.
03 · The playground
Let visitors hold the instrument.
The centerpiece is a specimen stage wired to four sliders, an italic toggle, and a Surprise Me button. It is contenteditable, so visitors can type their own words, and the stage itself is draggable: horizontal drag maps to weight, vertical drag to optical size.
Direct axis control
Each slider writes one axis. A mono readout in the stage corner reports the current settings like an instrument panel.
The stage is a trackpad
Pointer capture plus delta mapping turns the whole specimen into a two-axis controller. The cursor never needs to find a 16 pixel slider thumb to play.
Curated randomness
Surprise Me picks from weighted ranges rather than uniform noise, so every roll lands on a usable voice: nothing illegible, nothing boring.
Editable specimen
contenteditable with a sanitized paste handler lets people set their own name in Lumen Serif, which is exactly what type buyers do first.
04 · Kinetic systems
Five systems, one rAF loop.
All motion runs in a single requestAnimationFrame loop that skips any system whose element is off screen, and stops entirely when the tab is hidden.
Cursor-proximity weight
Each headline letter measures its distance to the pointer and eases its weight and softness up as you approach. The letters literally lean toward the light.
Glyph rivers
Two counter-scrolling marquees of glyphs (with duplicated tracks for seamless loops) show the character set the way foundries show posters.
Scroll stretches the axes
A sticky full-viewport stage maps scroll progress to width, weight, and optical size at once, so the word ELASTIC is narrow and thin at the top of the section and massive at the bottom.
A set-change entrance
An ink curtain with the wordmark lifts on load, which hides font loading and opens the show deliberately.
The wordmark breathes
The giant closing Lumen slowly cycles its optical size, a quiet reminder that nothing on this page is an image.
05 · Stability lessons
Fixed chrome must yield to content.
Two real defects surfaced in screenshot review, both about fixed elements fighting the page.
Blend-mode collisions
The fixed header uses mix-blend-mode difference so it inverts over any background. Elegant, until section headings scrolled beneath it and produced text-on-text noise. Fix: the header tucks away when you scroll down and returns the moment you scroll up.
Two links, one corner
The floating index link and the footer's own credit line both claimed the bottom-right corner. An IntersectionObserver fades the floating link out as the footer credit enters the viewport.
Both bugs were invisible in code review and instant to see in headless screenshots taken at several scroll depths, which is the standing QA method for this series: shoot, look, fix, reshoot.
06 · Production process
Three passes before release.
Collision repair and reading comfort
- Added the tuck-away header so section headings never fight the blend-mode chrome.
- Verified the glyph marquees loop without a visible seam.
- Confirmed the four-axis playground state stays synchronized between sliders, drag, and readouts.
Interaction proofs and corner cases
- Click-tested Surprise Me headlessly and verified the specimen and readouts actually change.
- Yielded the floating index link to the footer credit with an IntersectionObserver.
- Checked the licensing tiers and manifesto at tablet and phone widths.
Full-page QA and release
- Swept desktop at five scroll depths and mobile at four, reading every frame.
- Zero console errors and zero failed requests across every screenshot run.
- Confirmed reduced-motion renders a legible static specimen with all content intact.
- Shipped through the production build and portfolio index.
07 · Authorship
Built by models. Directed by a person.
This series is a transparent record of AI orchestration. Credit is split by the work actually performed.
Claude Fable 5 invented the foundry, wrote the copy, built the axis systems, playground, marquees, and elastic section, and completed the three polish passes.
Codex established the portfolio index at /x, the per-experiment guide pattern, and the release pipeline this site ships through.
Viron Gil Estrada commissioned the 25-site experiment, set the quality bar, owns the platform, and defined the one-site-at-a-time release strategy.
No images anywhere on the site. Every visual is live text in Fraunces and Roboto Flex, CSS, and a scanline of SVG grain. The typography carries everything.