Archive of Light is a fictional letterform archive; Specimen №7 is a real one — Fraunces, the variable serif by Undercase Type. The site's thesis: a specimen should not show you the font. It should let the font perform.
Fraunces ships four variation axes, and each one gets a stage. The hero maps your cursor to weight (x) and optical size (y), holds soften the terminals (SOFT), and a click flips the crooked x-height (WONK) — the whole headline is one continuously re-rendered instance of the same file. No images, no video: every moving letter is live text you can select.
A specimen's palette must lose every argument with the letterforms. Two neutrals do the work; the ultramarine appears only where the archive itself speaks — eyebrows, the italic marquee, the wonk switch.
Fraunces is the only text face on the page — the specimen is the subject, the body, and the navigation. Optical size tracks weight in the waterfall the way metal type cut different faces per size.
Space Mono — the caliper voice: axis readouts, drawer numbers, instructions.
| Element | How it works |
|---|---|
| Cursor-driven axes | A rAF loop writes font-variation-settings from eased pointer state; SOFT eases toward 100 while the pointer is held. A HUD prints the live axis values like an instrument. |
| Idle drift | Before the first pointer event, weight and optical size breathe on offset sine waves — the page is alive on load, then hands you the controls. |
| Weight waterfall | Nine rows generated from data, each computing its optical size from its weight — a linked-axes rule borrowed from optical scaling practice. |
| Velocity marquee | Three infinite GSAP marquees (roman, italic, outlined) whose timeScale multiplies with live scroll velocity — scroll hard and the wall of words hurries. |
| Editable stage | The playground sample is contenteditable; sliders write the same variation settings, so visitors set their own name in their own instance. |
| Accessibility | Reduced motion stops drift, marquees, and transitions but keeps sliders and the editable stage fully functional. All controls are native inputs with labels. |
| You do | The page does |
|---|---|
| Move across the hero | Weight follows x, optical size follows y |
| Hold the mouse down | Terminals soften toward SOFT 100 |
| Click | WONK flips — the x-height goes crooked |
| Scroll fast past the wall | The marquees pick up speed with you |
| Type in the playground | Your words become the specimen |