Interface Studies

A working collection of components, exploring interaction and aesthetics.

One component per study, built in Figma and code, small enough to stay legible. Hover a card to run it in place, take a quick look at its variants, or open the study to see it in full.

Open the Figma file

9 study studies

Mode dial

2026 · 10 Navigation —

A selector you turn rather than tap: a knurled charcoal dial in a cloth-dotted plate, its choices brought one detent at a time under a mark that never moves.

  • HTML
  • CSS
  • JavaScript

Banded shaders

2026 · 09 Aesthetic —

A gradient field drawn twice from one declaration, once by a CSS stop list and once by a WebGL shader, so the two agree by construction. Every fragment’s luminance is clamped into a declared band, which is what puts a guaranteed contrast ratio under the type.

  • HTML
  • CSS
  • JavaScript
  • React
  • Figma

Struck tones

2026 · 09 Aesthetic —

A UI sound palette written as a token block: four sounds declared as a tuning, a voice, a strike and a room, then synthesised from those numbers rather than played from files, the reverb included. It ships silent, and draws everything it says.

  • HTML
  • CSS
  • JavaScript
  • Figma

Interactive bento grid

2026 · 09 Layout —

Seven tiles that each declare the room they want, on a grid that clamps every span against its own column count. Each tile answers for the slot it lands in rather than for the modifier it was given, and opening one re-packs the board around it.

  • HTML
  • CSS
  • JavaScript
  • Figma

Inked plate card

2026 · 09 Card —

An artwork plate and a caption plate with their facing corners cut, over a crop-marked dot grid. The line drawing inks itself on load in pure CSS: every path declares a length of 1, so one keyframe pair draws all of them without measuring any.

  • HTML
  • CSS
  • Figma

Raster pulse

2026 · 09 Card —

A poster card whose dot field works out its own shape. Every dot carries nothing but its grid coordinate; CSS derives whether it belongs to the pattern, which of two tones it takes, and where it sits in the pulse travelling through the field.

  • HTML
  • CSS
  • Figma

Drawn gradients

2026 · 09 Aesthetic —

Gradient fields made by drawing a few overlapping SVG shapes in flat colour and blurring them past recognition. A stepped silhouette then puts the fill inside a block of type, its treads landing on the same lines.

  • HTML
  • CSS
  • Figma

Detail reveal card

2026 · 09 Card —

A detail panel that rises from the bottom edge on hover, pushing the resting label up ahead of it. Takes any content; a map variant adds contour rings and a pulsing pin.

  • HTML
  • CSS
  • Figma

Liquid glass toolbar

2026 · 09 Navigation —

One glass surface that changes shape, in six materials off a single recipe: the selected item opens into a labelled pill, search into a field, the log into a panel.

  • HTML
  • CSS
  • JavaScript
  • Figma
Est. start November 2026

Forthcoming study

Est. start December 2026

Forthcoming study