TITLE: Variable Specimen — Three Axes, One Voice
PROMPT: Build a single-file variable type specimen as a two-column editorial sheet: a 232-340px control rail on the left (slightly warmer paper #f2efe8) and the specimen on the right (#f7f5f0), separated by a hairline #e5e3dc rule. The rail holds a mono kicker "S20 / 099", a bold "Variable Specimen" heading, three custom range sliders (Weight 100-900, Width 0-100, Optical 0-100) with live red #ff4d2e numeric readouts and min/mid/max tick labels, a small 74px axis plot SVG showing a crosshair dot positioned in weight-by-width space, Play and Baseline buttons, a text input that sets the specimen word, a monospace readout line, and an arrow-key hint. Sliders use -webkit-slider-runnable-track with a CSS custom property --p to paint the filled portion and a circular thumb that scales up on hover. The specimen side shows a hero word sized in JavaScript to fit the container width (fit = width / (chars * 0.53), clamped 26-172px, multiplied by the optical axis), scaled horizontally with transform: scaleX(var(--sx)) and letter-spaced with a computed em value; then a justified multi-column lede with a hairline column rule, a tabular-numeral row 0123456789, and a hairline-bordered glyph grid of A-Z, a-z, 0-9 and punctuation whose cell size and column count reflow with the optical axis. All three axes are exposed as CSS custom properties (--w font-weight, --ls letter-spacing, --sx scaleX, --cell, --ledeSize, --bl baseline step) updated on every input event.
DESCRIPTION: A type specimen that behaves rather than poses. The left rail is a compact instrument panel: three sliders, a crosshair plot, two buttons, a word field. The right side is the proof - a hero word that grows and shrinks to always fit its column, a justified paragraph with a hairline column rule, a row of tabular numerals, and a full glyph grid of hairline cells. Every control change ripples through the whole sheet at once: weight thickens the strokes, width stretches the tracking and the horizontal scale, optical size rescales the hero, the lede, the numerals and the grid, which reflows its column count as the cells grow. The accent is a single hot red used only for live values, the active play state and the baseline grid.
TECHNIQUES: Axis interpolation through CSS custom properties updated from JavaScript; font-weight, letter-spacing and transform: scaleX as stand-ins for real variable-font axes; JavaScript-computed hero font size so the specimen word always fits its column; auto-fill CSS grid whose minmax cell size is driven by a custom property, so the glyph grid reflows as the optical axis moves; custom-styled range inputs with a gradient-filled track painted from a --p variable; tabular numerals; a baseline-grid overlay drawn from a repeating-linear-gradient whose step is bound to the lede line-height; a monospace crosshair plot rendered as inline SVG attributes.
INTERACTION: Dragging any slider updates the specimen live and repaints the slider fill, the axis readout, the crosshair plot and the footer metadata. Play sweeps all three axes on independent sine phases at ~60fps and toggles to Pause. Typing in the specimen word field re-fits and re-renders the hero instantly. Baseline toggles a red baseline-grid overlay that fades in over the specimen. Arrow up/down nudges the last-touched axis (weight steps of 10, width steps of 4) and left/right nudges the width axis; the word field ignores the shortcuts while focused. The layout collapses to a single column below 640px with the specimen moved above the rail. prefers-reduced-motion disables transitions and prevents Play from starting.