stable · 2026

Type Field

A responsive typographic field shaped by pointer position and keyboard controls.

BUILDSYSTEMSTHAT MOVE

What it explores

How a focused visual rule can create character without hiding interface state or delaying useful content.

How it works

Small React state, CSS variables, and browser-native controls drive the composition. The experiment is isolated from global page JavaScript.

Controls

Use the labeled sliders or buttons. Every control accepts keyboard input and includes a reset path.

Performance

Effects use CSS gradients and transforms; no canvas, WebGL, remote media, or continuous pointer loop is required.

Accessibility

Reduced-motion preferences remove spring or large spatial changes. State also appears through text and control semantics.

Source

src/components/lab/experiment-stage.tsx