Open Source2024 · 1 month

Bricolage Variable Inspector

Open-source variable typography testing playground.

Role

Creator & Maintainer

Client / Team

Open Source Community

Timeline

1 month

Links

Live Code

Variable typography inspector sliders and real-time font specimen rendering

GitHub Stars

850+

Community adoption among frontend design engineers

CSS Snippet Copies

12,000+

Production token configurations exported

The Challenge

Problem & Constraints

Visualizing multi-axis variable fonts in developer tools is clunky and lacks one-click translation to clean Tailwind or CSS token configurations.

The Solution

Architectural Approach

Built a focused web tool with keyboard shortcuts, preset comparisons, and instantaneous code generation.

Engineering Stack

System Architecture

Technologies & Tools

React 19TypeScriptTailwind CSSVite

Key Architectural Decisions

Manipulates CSS custom properties on root containers to avoid rerendering the React component tree on slider scrub.

Performance Under Rapid Scrubbing

Bypassing React state for 120fps slider response

Slider events update CSS variables directly on DOM elements via style.setProperty(), allowing buttery smooth 120fps axis scrubbing without triggering React re-renders.

Outcomes

Deliverables & Assets

Real-time Axis Controller

Zero-lag slider interfaces controlling font-variation-settings directly in the DOM.

CSS Token Exporter

One-click copy generator for CSS @font-face rules, token variables, and fluid clamp() utilities.

Previous Project

Aurora Minimal Storefront

Headless e-commerce with instantaneous page transitions.

Coffee cup with brewing steam and rotating progress indicator

Loading content...

Fetching assets and initializing layout.

Back to all projects