Components.

Single interface pieces you drop into any page. Plain HTML, CSS and JavaScript.

26 components

Liquid glass, free to tune and copy

Drag real liquid glass over a live scene, bend its edges, then copy CSS with dark mode and accessibility fallbacks already in. No sign-up.

Open the free generator

Forms

Fields, sign-up cards and everything that helps someone fill one in.

index.html

<!-- one real input; js
     draws each piece's
     outline as an svg -->
<div class="dovetail-row">
  <input
    class="dovetail-input"
    …>
  <span
    class="dovetail-piece"
    aria-hidden="true">
  </span>

dovetail.css

/* js sets each slide's
   length; a cut-off one
   resumes where it is */
.dovetail-piece {
  translate: 0 0;
  transition:
    translate
    var(--dovetail-move)
    var(--dovetail-glide), …
.dovetail-piece.is-lifted {
  … scale: 1.06; }

dovetail.js

// tab and socket share
// points: they meet exactly
function outline(s,
  socket, tab) {
  return rounded([
    ...(tab ?
      tabPoints(W, s) : []),
    …
    ...(socket ?
      tabPoints(0, s)
      .reverse() : []),

Dovetail

A one-time code field of puzzle pieces that slide together and lock into a check

11 KB0 depsForms

index.html

<!-- a coal per slot; the
     check has no d, js
     fits it to the row;
     sparks spawn in fx -->
<span class="ember-slot" …>
  <span class="ember-wick">
  </span></span>
…
<svg class="ember-mark" …>
<path class="ember-check"/>
<span class="ember-fx" …>

ember.css

/* two copies of the digit:
   a blurred one behind it
   carries the heat */
.ember-num, .ember-heat {
  grid-area: 1 / 1;
…
.ember-heat {
  color: var(--ember-flame);
  filter: blur(7px);
  opacity: .3; …

ember.js

// one eased k draws the
// stroke and puts the spark
// at its tip, via along(k)
const k = easeInOut(
  Math.min(1, (now - t0)
  / dur));
const [x, y] = along(k);
… p.style.strokeDashoffset
  = String(1 - k);
… c.setAttribute('cx', x);

Ember

A one-time code field where each digit lights like an ember and a wrong code turns to ash

9.3 KB0 depsForms

index.html

<!-- one real input on top;
     the tiles stay empty,
     flap.js adds halves
     and a hinged leaf -->
<div class="flap-row">
  <input class="flap-input"
    id="otp" type="text" …>
  <span class="flap-tile"
    aria-hidden="true">
  </span>
  …

flap.css

/* one leaf, two faces:
   the back waits folded
   behind the front */
.flap-tile {
  perspective: 480px; …
.flap-leaf-front,
.flap-leaf-back {
  backface-visibility:
    hidden; …
  transform:
    rotateX(180deg); }

flap.js

// new glyph: top half and
// leaf back; the old one
// stays on the leaf front
paint(c.top, glyph, tone);
paint(c.back, glyph, tone);
// fall to -180, bounce 5°
// back and settle: clack
const a = c.leaf.animate(
  … 'rotateX(-180deg)',
  offset: 0.86, …
  'rotateX(-175deg)', …

Flap

A split-flap code field that clacks each digit down and flips the board to DONE

7.8 KB0 depsForms

index.html

<!-- the shackle sits
     outside the body, so
     it lifts and swings -->
<svg class="hasp-shackle" …>
<div class="hasp-body">
  <!-- one real input over
       all four wheels -->
  <input class="hasp-input"
    …>
  <span class="hasp-wheel"
    aria-hidden="true">

hasp.css

/* the wheel clips a strip:
   --hasp-at picks the row,
   a spring rolls it in */
.hasp-strip {
  transform: translateY(
    calc(var(--hasp-at) *
    var(--hasp-wheel-h)
    * -1));
  transition: transform
    var(--hasp-roll, 420ms)
    var(--hasp-glide);

hasp.js

// the further it has to go,
// the longer: 40ms a row
const dist = Math.abs(
  at - from);
strip.style.setProperty(
  '--hasp-roll',
  `${Math.min(640,
  240 + dist * 40)}ms`);
// then just name the row
strip.style.setProperty(
  '--hasp-at', at);

Hasp

A combination-padlock code field whose wheels roll and whose shackle springs open

7.7 KB0 depsForms

index.html

<!-- clip ends at the hole
     line, so the bar sinks
     into the case -->
<g clip-path=
  "url(#latch-clip-above)">
<g class="latch-shackle">
<g class="latch-bar">
<!-- one d, four widths: a
     round polished tube -->
<path class="latch-tube
  latch-tube-1" d="…"/>

latch.css

/* pivot on the long leg,
   in SVG viewBox units */
.latch-shackle, .latch-bar {
  transform-box: view-box;
  transform-origin:
    69px 30px; }
/* scaleX fakes the turn;
   stroke width holds */
.latch-tube { …
  vector-effect:
    non-scaling-stroke; }

latch.js

// v is kept on retarget, so
// a spin never jerks
v += (-k * (x - target)
  - c * v) * (dt / 4);
x += v * (dt / 4);
…
// speed blurs the digits
const b = Math.min(2.6,
  (Math.abs(v)*cell) / 900);
if (b > 0.25) { strip.style
  .filter = `blur(${b…}px)`;

Latch

A one-time code field that dials in like a combination lock and springs open on the right code

11 KB0 depsForms

index.html

<!-- one real input; the
     panels are drawn on
     top, so paste and
     autofill just work -->
<input class="pleat-input"
  …>
<div class="pleat-strip">
  <span class="pleat-tile"
    aria-hidden="true">
  </span>

pleat.css

/* each panel turns about
   its top-left corner,
   two faces back to back */
.pleat-tile {
  transform-origin: 0 0;
  transform-style:
    preserve-3d;
}
.pleat-front, .pleat-back {
  backface-visibility:
    hidden;

pleat.js

// a fold turns panel j
// about crease X: shift
// over, rotate, shift back
const d = g.x[fold.crease]
  - g.x[j];
parts.push(
`translateX(${d}px)
rotateY(${fold.dir *
180 * …}deg)
translateX(${-d}px)`);

Pleat

A one-time code field on a paper strip that folds like a fan into a check

10.1 KB0 depsForms

index.html

<!-- the input is real and
     invisible, laid over
     drawn tiles: paste and
     autofill just work -->
<div class="riffle-grid">
  <input
    class="riffle-input"
    type="text" …>
  <span class="riffle-tile"
    aria-hidden="true">
  </span>

riffle.css

/* a spring sampled into
   linear(): one soft
   overshoot on landing */
--riffle-glide: linear(0,
  .062, .205, … 1);
/* js sets the length
   per move */
.riffle-tile {
  transition: translate
    var(--riffle-move)
    var(--riffle-glide), …

riffle.js

// a move is a lookup:
// slot now → slot next
const MOVES = {
  cw:   [1, 3, 0, 2],
  diag: [3, 2, 1, 0],
…
// css glides translate to
// the new slot; a cut-off
// move resumes mid-way
pos = pos.map(p => map[p]);
  place(i);

Riffle

A 2×2 one-time code field whose tiles shuffle and lock into a check

9 KB0 depsForms

index.html

<!-- the picture the tiles
     solve into: any svg,
     sliced six ways -->
<svg class="shunt-check"
  viewBox="0 0 300 200" …>
  <circle cx="150"
    cy="100" r="80"/>
  <path d="M113 103 139
    128 189 76"/>

shunt.css

/* each back holds the
   whole picture, shifted
   by its home slot */
.shunt-art {
  top: calc(var(--shunt-py)
    * -100%);
  left: calc(
    var(--shunt-px)
    * -100%);
  width: 300%;
  height: 200%;

shunt.js

// the gap walks `path`,
// a piece slides into each
// slot it leaves
for (const q of path) {
  const e = trail[…];
  if (!near(e, q)) continue;
  at[e] = at[q];
  at[q] = null;
  trail.push(q);
}
// the ending: in reverse

Shunt

A 3×2 one-time code field that solves itself like a sliding puzzle into a check

10.7 KB0 depsForms

index.html

<!-- the score lives on the
     root; CSS maps it to a
     level and a colour -->
<div class="steep"
  data-score="0">
  <span class="steep-liquid"
    aria-hidden="true">
<!-- strength is spoken,
     not just coloured -->
  <p class="steep-meter"
    … aria-live="polite">

steep.css

/* a score is only a level
   and a colour */
.steep[data-score="2"] {
  --steep-level: 52%; …
/* y1 above 1: the liquid
   overshoots, settles */
.steep-liquid { …
  height:
    var(--steep-level);
  transition: height 700ms
    cubic-bezier(.34, 1.3, …

steep.js

// JS writes the score;
// CSS does the rising
root.dataset.score =
  String(s);
// a new level sloshes the
// surface: stretch, squash
if (s !== last) { …
  wave.animate([ …
    { scale: '1 2.2' },
    { scale: '1 .7' }, …

Steep

A password field that fills with liquid as the password gets stronger

2.8 KB0 depsForms

index.html

<!-- one invisible input on
     top: paste, autofill,
     screen readers work -->
<input class="strand-input"
  id="otp" type="text" …>
<span class="strand-slot"
  aria-hidden="true"></span>
<!-- four strokes, one d -->
<svg class="strand-line" …>
<path class="strand-track"/>
<path class="strand-halo"/>

strand.css

/* one ring; its spring is
   a baked linear() curve */
.strand-ring { … transition:
  transform 600ms
  var(--strand-spring), …; }
/* pathLength=1, so offset
   = share still unlit */
.strand-halo, .strand-lit {
  … stroke-dasharray: 1 1;
  stroke-dashoffset: 1; }

strand.js

// 3 points spring from
// wherever they are now, so
// the check can turn back
const from = pts.map(
  p => [...p]);
…
const k = t * 1000 >= settle
  ? 1 : curve(t);
pts = from.map((p, i) => [
  p[0]+(to[i][0]-p[0])*k,
  p[1]+(to[i][1]-p[1])*k]);

Strand

A one-time code field strung on a line of light that bends into a check

8.7 KB0 depsForms

index.html

<!-- eyes before the head:
     they sink behind it -->
<g class="tuck-eye
  tuck-eye--back">
…
<path class="tuck-body" …/>
<!-- the engine finds the
     password by this -->
<input class="tuck-input
  tuck-input--secret" …
  data-mascot="secret" …>

tuck.css

/* hide: stalks shrink to
   their base, the eyes sink
   behind the head */
.tuck[data-mood="hide"]
  .tuck-stalk, …
{ transform: scaleY(0); …
.tuck[data-mood="hide"]
  .tuck-eye--front, …
{ transform:
  translate(4px, 54px); …

mascot.js

// the eyes chase the caret:
// width of the text before
// it, in the input's font
ctx.font = `${cs.fontWeight}
  ${cs.fontSize} …`;
…
// scrolled fields shift the
// text; clamp to the field
x: clamp(left + ctx
  .measureText(text).width
  - input.scrollLeft, …

Tuck

Sign-up, sign-in and reset forms with a snail that pulls its eyes in while you type your password

10.6 KB0 depsForms

Tab bars, segmented controls and the things people move around with.

index.html

<nav class="abacus" aria-label="Pagination">
  <button class="abacus-end abacus-prev" type="button"></button>
  <div class="abacus-rail"></div>
  <button class="abacus-end abacus-next" type="button"></button>
</nav>

abacus.css

.abacus-end {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--abacus-post);
  height: calc(var(--abacus-bead-h) + 10px);
  margin: 0;
  padding: 0;
  border: 0;

abacus.js

export function init(root, {
  pages = 9,
  page = 1,
  window: win = 7,        // beads shown at once when there are more than 12 pages (odd numbers work best)
  onChange,
  onPreview,              // called while a bead is pulled, with the page it would land on
  drag = true,            // pull beads along the rod with a finger or the mouse
  duration = 440,         // ms a bead takes to cross the gap and settle
  stagger = 40,           // ms between beads in a chain
  labels = {},
} = {}) {

Abacus

Pagination where numbered beads slide along a metal rod and clack into place

11.3 KB0 depsNavigation

index.html

<div class="aperture">
  <header class="aperture-bar">
    <a class="aperture-brand" href="#">Nocturne</a>
    <button class="aperture-toggle" type="button" aria-label="Menu">
      <svg class="aperture-iris" viewBox="0 0 64 64" aria-hidden="true" focusable="false">
        <defs>
          <linearGradient id="aperture-rim-g" gradientUnits="userSpaceOnUse" x1="8" y1="6" x2="56" y2="60">
            <stop offset="0" class="aperture-rim-a"/><stop offset=".42" class="aperture-rim-b"/><stop offset=".6" class="aperture-rim-c"/><stop offset="1" class="aperture-rim-d"/>
          </linearGradient>
          <linearGradient id="aperture-steel-g" gradientUnits="userSpaceOnUse" x1="6" y1="4" x2="58" y2="62">
            <stop offset="0" class="aperture-steel-a"/><stop offset=".34" class="aperture-steel-b"/><stop offset=".52" class="aperture-steel-c"/><stop offset="1" class="aperture-steel-d"/>

aperture.css

.aperture-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--aperture-plate);
  box-shadow: inset 0 1px 0 var(--aperture-plate-hi), 0 1px 0 var(--aperture-plate-edge), var(--aperture-plate-shadow);
  transition: opacity 240ms var(--aperture-ease-out);
}
.aperture.is-open .aperture-bar::before { opacity: 0; }
.aperture-brand {

aperture.js

export function init(root, { onOpen, onClose, onSelect, onPreview, push, drag = true } = {}) {
  const toggle = root.querySelector('.aperture-toggle');
  const iris = toggle.querySelector('.aperture-iris');
  const menu = root.querySelector('.aperture-menu');
  const list = menu.querySelector('.aperture-list');
  const readout = root.querySelector('.aperture-readout-n');
  const glass = iris.querySelector('.aperture-glass');
  const flare = iris.querySelector('.aperture-flare');
  const links = [...menu.querySelectorAll('.aperture-link')];
  const blades = [...iris.querySelectorAll('.aperture-blade')];

Aperture

A menu button whose iris blades open into a full-screen menu and snap shut like a shutter

11.9 KB0 depsNavigation

index.html

<nav class="dimple" aria-label="Main">
  <button class="dimple-tab" type="button" aria-selected="true" data-value="home" data-tint="#ffb238">
    <svg class="dimple-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="dimple-fill" d="M4 10.4 12 4l8 6.4V19a1.5 1.5 0 0 1-1.5 1.5H15v-5.5H9v5.5H5.5A1.5 1.5 0 0 1 4 19z"/><path class="dimple-line" d="M4 10.4 12 4l8 6.4V19a1.5 1.5 0 0 1-1.5 1.5H15v-5.5H9v5.5H5.5A1.5 1.5 0 0 1 4 19z"/></svg>
    <span class="dimple-label">Home</span>
  </button>
  <button class="dimple-tab" type="button" aria-selected="false" data-value="explore" data-tint="#36d695">
    <svg class="dimple-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="dimple-fill" d="M12 3.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17z"/><path class="dimple-line" d="M12 3.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17zM15.5 8.5l-2 5-5 2 2-5z"/></svg>
    <span class="dimple-label">Explore</span>
  </button>
  <button class="dimple-tab" type="button" aria-selected="false" data-value="inbox" data-tint="#ff6b57">
    <svg class="dimple-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="dimple-fill" d="M3.5 13 6 5.5h12l2.5 7.5v5A1.5 1.5 0 0 1 19 19.5H5A1.5 1.5 0 0 1 3.5 18z"/><path class="dimple-line" d="M3.5 13 6 5.5h12l2.5 7.5v5A1.5 1.5 0 0 1 19 19.5H5A1.5 1.5 0 0 1 3.5 18zM3.5 13H8l1.5 2.5h5L16 13h4.5"/></svg>

dimple.css

.dimple {
  --dimple-h: 64px;                 /* the bar itself */
  --dimple-head: 30px;              /* room above the bar for the drop to hop */
  --dimple-drop: 46px;              /* drop diameter */
  --dimple-radius: 26px;            /* bar corners */
  --dimple-width: 420px;
  --dimple-font: -apple-system, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;

  --dimple-bar-top: #ffffff;
  --dimple-bar-bottom: #eef0f5;
  --dimple-rim: rgb(255 255 255 / .95);

dimple.js

export function init(root, { onChange, onPreview, drag = true } = {}) {
  const tabs = [...root.querySelectorAll('.dimple-tab')];
  const reduced = () => !!root.closest('[data-motion="reduced"]') || matchMedia('(prefers-reduced-motion: reduce)').matches;
  const tintOf = t => t.dataset.tint || '';

  let index = Math.max(0, tabs.findIndex(t => t.getAttribute('aria-selected') === 'true'));
  root.setAttribute('role', 'tablist');
  tabs.forEach(t => {
    t.setAttribute('role', 'tab');
    t.setAttribute('aria-selected', 'false');
    t.tabIndex = -1;

Dimple

A bottom tab bar where a coloured drop hops between dips in the bar and lands with a ripple

8.4 KB0 depsNavigation

index.html

<nav class="fresnel" aria-label="Main">
  <svg class="fresnel-lamp" viewBox="0 0 120 140" aria-hidden="true" focusable="false">
    <defs>
      <linearGradient id="fresnel-g-barrel" x1="0" y1="0" x2="1" y2="0">
        <stop class="fresnel-s-edge" offset="0"/>
        <stop class="fresnel-s-rim" offset=".07"/>
        <stop class="fresnel-s-hi" offset=".3"/>
        <stop class="fresnel-s-mid" offset=".58"/>
        <stop class="fresnel-s-shade" offset=".86"/>
        <stop class="fresnel-s-dark" offset="1"/>
      </linearGradient>

fresnel.css

.fresnel-lamp {
  grid-row: 1;
  position: relative;
  z-index: 3;
  height: var(--fresnel-lamp-h);
  width: auto;
  overflow: visible;
  translate: 0 0;
  transition: translate 100ms var(--fresnel-ease);
  pointer-events: none;
}

fresnel.js

export function init(root, {
  onChange,            // (index, href) => void, when the chosen link changes
  onPreview,           // (index, href) => void, while dragging: the link the beam is over
  followLinks = true,  // a plain click follows the link once the lamp strikes on it
  drag = true,         // press and drag (or flick) along the bar to aim the lamp
  travel = 560,        // ms, sets the spring's stiffness: with the default settle the beam is within 10% of
                       // the link after ~0.35 s, strikes at ~0.33–0.4 s and is fully still after ~0.9–1.2 s
  settle = .12,        // 0–.4, how much the lamp overshoots and settles on arrival
} = {}) {
  const $ = s => root.querySelector(s);
  const head = $('.fresnel-head');

Fresnel

A navigation bar lit by a stage spotlight that swings to the link you choose

10 KB0 depsNavigation

index.html

<nav class="lantern" aria-label="Main">
  <ul class="lantern-list">
    <li><a class="lantern-link" href="#overview" aria-current="page">
      <svg class="lantern-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="3.5" width="7" height="7" rx="2"/><rect x="13.5" y="3.5" width="7" height="7" rx="2"/><rect x="3.5" y="13.5" width="7" height="7" rx="2"/><rect x="13.5" y="13.5" width="7" height="7" rx="2"/></svg>
      <span class="lantern-label">Overview</span>
    </a></li>
    <li><a class="lantern-link" href="#orders">
      <svg class="lantern-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 8.2 12 4l8.5 4.2v7.6L12 20l-8.5-4.2Z"/><path d="M3.5 8.2 12 12.4l8.5-4.2M12 12.4V20"/></svg>
      <span class="lantern-label">Orders</span>
    </a></li>
    <li><a class="lantern-link" href="#clients">

lantern.css

.lantern-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--lantern-row);
  padding: 0 14px 0 calc(var(--lantern-icon-x) - var(--lantern-inset));
  border-radius: 12px;
  text-decoration: none;
  color: var(--lantern-ink);
  -webkit-tap-highlight-color: transparent;

lantern.js

export function init(root, { onChange, onPreview, reach, drag = true } = {}) {
  const id = `lantern-${++instances}`;
  const links = [...root.querySelectorAll('.lantern-link')];
  if (!links.length) throw new Error('Lantern: no .lantern-link found');
  if (root.tagName !== 'NAV' && !root.getAttribute('role')) root.setAttribute('role', 'navigation');

  const hooks = links.map(link => {
    const hook = drawHook(id);
    link.prepend(hook);
    const dot = document.createElement('span');
    dot.className = 'lantern-dot';

Lantern

A sidebar where a hanging lantern swings to the item you choose and lights the labels around it

10.5 KB0 depsNavigation

index.html

<nav class="loupe" aria-label="Sections">
  <div class="loupe-bar">
    <div class="loupe-tabs" role="tablist">
      <button class="loupe-tab" type="button" role="tab" aria-selected="true" data-value="today">
        <svg class="loupe-icon" viewBox="0 0 24 24" aria-hidden="true"><rect class="loupe-shape" x="3" y="5" width="18" height="16" rx="4"/><path class="loupe-line" d="M3 10h18"/><path d="M8 3.5v3M16 3.5v3"/><circle class="loupe-dot" cx="12" cy="15.5" r="1.4"/></svg>
        <span class="loupe-label">Today</span>
      </button>
      <button class="loupe-tab" type="button" role="tab" aria-selected="false" data-value="inbox">
        <svg class="loupe-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="loupe-shape" d="M6.2 4.5h11.6a2 2 0 0 1 1.9 1.4L22 13v4.5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V13l2.3-7.1a2 2 0 0 1 1.9-1.4z"/><path class="loupe-line" d="M2 13h5l1.5 2.5h7L17 13h5"/></svg>
        <span class="loupe-label">Inbox</span>
      </button>

loupe.css

.loupe-tab {
  position: relative;
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  height: var(--loupe-h);
  min-width: var(--loupe-tab-w);
  border-radius: 999px;
  display: grid;

loupe.js

export function init(root, { onChange, onPreview, magnify, drag = true } = {}) {
  const tabs = root.querySelector('.loupe-tabs');
  const items = [...tabs.querySelectorAll('.loupe-tab')];
  const icons = items.map(t => t.querySelector('.loupe-icon'));
  const scale = magnify ?? (parseFloat(getComputedStyle(root).getPropertyValue('--loupe-magnify')) || 1.6);
  const valueOf = i => items[i].dataset.value ?? items[i].textContent.trim();

  // build the lens: caustic + lift shadow (under), dome (glass) › view (magnified copy) + sweep (finale glint)
  const el = (cls) => { const s = document.createElement('span'); s.className = cls; return s; };
  const lens = el('loupe-lens');
  lens.setAttribute('aria-hidden', 'true');

Loupe

A glass tab bar where a lens slides over the active tab and magnifies what's under it

7.8 KB0 depsNavigation

index.html

<div class="marble" aria-label="Main">
  <button class="marble-tab" type="button" aria-selected="true" data-value="home">
    <svg class="marble-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="marble-fill" d="M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-4.5v-6h-5v6H5a1 1 0 0 1-1-1z"/><path class="marble-line" d="M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-4.5v-6h-5v6H5a1 1 0 0 1-1-1z"/></svg>
    <span class="marble-label">Home</span>
  </button>
  <button class="marble-tab" type="button" aria-selected="false" data-value="search">
    <svg class="marble-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="marble-fill" d="M10.5 4.5a6 6 0 1 0 0 12 6 6 0 0 0 0-12z"/><path class="marble-line" d="M10.5 4.5a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM15 15l5 5"/></svg>
    <span class="marble-label">Search</span>
  </button>
  <button class="marble-tab" type="button" aria-selected="false" data-value="library">
    <svg class="marble-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="marble-fill" d="M4 4h4v16H4zM10 4h4v16h-4zM15.2 5.6l3.9-1 4 15.4-3.9 1z"/><path class="marble-line" d="M4 4h4v16H4zM10 4h4v16h-4zM15.2 5.6l3.9-1 4 15.4-3.9 1z"/></svg>

marble.css

.marble-tab {
  appearance: none;
  position: relative;
  z-index: 3;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 0;

marble.js

export function init(root, { onChange, onPreview, drag = true } = {}) {
  const tabs = [...root.querySelectorAll('.marble-tab')];
  const icons = tabs.map(t => t.querySelector('.marble-icon'));
  const reduced = () => !!root.closest('[data-motion="reduced"]') || matchMedia('(prefers-reduced-motion: reduce)').matches;

  // the parts the buyer never writes: groove with dimples, the ball, the ring
  const groove = el('marble-groove', root);
  groove.setAttribute('aria-hidden', 'true');
  const dimples = tabs.map(() => { const d = el('marble-dimple', groove); d.glow = el('marble-dimple-glow', d); return d; });
  const ball = el('marble-ball', root);
  ball.setAttribute('aria-hidden', 'true');

Marble

A bottom tab bar where a chrome ball rolls along a groove to the tab you tap

8.7 KB0 depsNavigation

index.html

<!-- no pill in the markup:
     the script adds it
     behind the options -->
<div class="pinch"
  aria-label="View">
  <button
    class="pinch-option" …
    data-value="day"
    aria-checked="true">
<!-- radio roles, roving
     tabindex: from JS -->

pinch.css

/* isolate: z-index -1 puts
   the pill under the labels
   but above the glass */
.pinch { …
  isolation: isolate; …
.pinch-pill { …
  left: 0; …
  z-index: -1;
  /* set by JS per frame */
  will-change: transform,
    width;

pinch.js

// the edge in front gets
// the stiff spring, so the
// pill stretches, then the
// back edge catches up
const lead = movingRight
  ? R : L, trail = …
for (const [s, p] of …) {
  const a = -p.k * (s.x -
    s.target) - p.c * s.v;
  s.v += a * dt;
  s.x += s.v * dt;

Pinch

A glass segmented control whose pill stretches like a drop of water

3.2 KB0 depsNavigation

index.html

<div class="plumb">
  <nav class="plumb-toc" aria-label="On this page">
    <div class="plumb-toc-scroll">
      <p class="plumb-toc-title">On this page</p>
      <ol class="plumb-toc-list">
        <li><a class="plumb-toc-link" href="#measure">The measure</a></li>
        <li><a class="plumb-toc-link" href="#leading">Leading</a></li>
        <li><a class="plumb-toc-link" href="#kerning">Kerning and tracking</a></li>
        <li><a class="plumb-toc-link" href="#figures">Figures</a></li>
        <li><a class="plumb-toc-link" href="#rag">Hyphenation and the rag</a></li>
        <li><a class="plumb-toc-link" href="#margins">Margins</a></li>

plumb.css

.plumb-toc-title {
  margin: 0 0 18px;
  padding-left: calc(var(--plumb-gutter) + var(--plumb-indent));
  font-size: .75rem;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--plumb-muted);
}
.plumb-toc-list {

plumb.js

export function init(root, { onChange, onPreview, offset = 96, drag: draggable = true } = {}) {
  const toc = root.querySelector('.plumb-toc');
  const scroller = toc.querySelector('.plumb-toc-scroll') || toc;
  const title = toc.querySelector('.plumb-toc-title');
  const links = [...toc.querySelectorAll('.plumb-toc-link')];
  const sections = links.map(a => {
    const id = decodeURIComponent((a.getAttribute('href') || '').replace(/^#/, ''));
    return (id && (root.querySelector('#' + CSS.escape(id)) || document.getElementById(id))) || null;
  });
  const mq = matchMedia('(prefers-reduced-motion: reduce)');
  const reduced = () => mq.matches || !!root.closest('[data-motion="reduced"]');

Plumb

A table of contents where a plumb bob on a thread hangs beside the section you're reading and swings as you scroll

11.9 KB0 depsNavigation

index.html

<nav class="siphon" aria-label="Main">
  <div class="siphon-bar">
    <div class="siphon-links">
      <a class="siphon-link" href="#home" data-value="home" aria-current="page">
        <svg class="siphon-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="siphon-shape" d="M4 10.4 12 4l8 6.4v8.6a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 19z"/><path class="siphon-cut" d="M10 20.4v-4.9h4v4.9"/></svg>
        <span class="siphon-label">Home</span>
      </a>
      <a class="siphon-link" href="#work" data-value="work">
        <svg class="siphon-icon" viewBox="0 0 24 24" aria-hidden="true"><rect class="siphon-shape" x="4" y="4" width="7" height="7" rx="2"/><rect class="siphon-shape" x="13" y="4" width="7" height="7" rx="2"/><rect class="siphon-shape" x="4" y="13" width="7" height="7" rx="2"/><rect class="siphon-shape" x="13" y="13" width="7" height="7" rx="3.5"/></svg>
        <span class="siphon-label">Work</span>
      </a>

siphon.css

.siphon-dye {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--siphon-h);
  padding: 0 17px 0 15px;
  border-radius: 999px;
  color: var(--siphon-muted);
  font-size: .875rem;

siphon.js

export function init(root, { onChange, onTheme, theme = true, themeTarget = document.documentElement } = {}) {
  const row = root.querySelector('.siphon-links');
  const links = [...row.querySelectorAll('.siphon-link')];
  const themeBtn = theme ? root.querySelector('.siphon-theme') : null;
  const valueOf = i => links[i].dataset.value ?? links[i].textContent.trim();
  const id = `siphon-${++uid}`;

  // ---- build: pour layer = liquid svg + an ink copy of the links clipped to the liquid ----
  const pour = document.createElement('span');
  pour.className = 'siphon-pour';
  pour.setAttribute('aria-hidden', 'true');

Siphon

A glass navigation bar whose highlight pours from link to link like honey

9.2 KB0 depsNavigation

index.html

<nav class="sumi" aria-label="Main">
  <ul class="sumi-list">
    <li><a class="sumi-link" href="#home" aria-current="page">Home</a></li>
    <li><a class="sumi-link" href="#works">Works</a></li>
    <li><a class="sumi-link" href="#studio">Studio</a></li>
    <li><a class="sumi-link" href="#journal">Journal</a></li>
    <li><a class="sumi-link" href="#contact">Contact</a></li>
  </ul>
</nav>

sumi.css

.sumi-link {
  position: relative;
  display: inline-grid;
  justify-items: center;
  padding: var(--sumi-pad-y) var(--sumi-pad-x);
  border-radius: 6px;
  color: var(--sumi-muted);
  font-weight: 500;
  letter-spacing: .005em;
  text-decoration: none;
  white-space: nowrap;

sumi.js

export function init(root, {
  onChange,
  seal = true,
  onPreview,
  duration = 520,        // ms the stroke takes to paint
  paintOnLoad = 'auto',  // 'auto': paint only when the visitor arrived through this nav; true: always; false: never
  drag = true,           // press and drag along the nav to paint your way to a link
} = {}) {
  const links = [...root.querySelectorAll('.sumi-link')];
  const reduced = () => root.closest('[data-motion="reduced"]') !== null || matchMedia('(prefers-reduced-motion: reduce)').matches;
  const items = [];

Sumi

A site navigation whose active link is underlined by a brush stroke painted in ink, then stamped with a seal

12.3 KB0 depsNavigation

index.html

<div class="sweep">
  <button class="sweep-fab" type="button" aria-label="Quick actions">
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
  </button>
  <ul class="sweep-menu" aria-label="Quick actions">
    <li class="sweep-seat" role="none">
      <button class="sweep-item" type="button" data-value="note" aria-label="New note">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z"/><path d="M14 3v5h5M12 11v6M9 14h6"/></svg>
      </button>
    </li>
    <li class="sweep-seat" role="none">

sweep.css

.sweep-fab {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: var(--sweep-fab);
  height: var(--sweep-fab);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(120% 110% at 50% -5%, var(--sweep-fab-top), var(--sweep-fab-bottom) 72%);

sweep.js

export function init(root, {
  onOpen,              // () => void, once the menu starts opening
  onClose,             // () => void, once the menu starts closing
  onSelect,            // (index, value) => void, when an item is chosen
  onPreview,           // (index) => void, while dragging: the item the arm points at, -1 for none
  startAngle = 30,     // degrees clockwise from the top, where the first item sits
  openTime = 600,      // ms for the full opening sweep
  closeTime = 320,     // ms for the full closing sweep
  closeOnSelect = true,
  drag = true,         // press and hold or press and drag the button to aim and release on an action
} = {}) {

Sweep

A round button that opens a ring of actions as a radar arm sweeps past each one

10.7 KB0 depsNavigation

All 13 in Navigation

Toggles

Switches and checkboxes that feel like you flipped something real.

index.html

<!-- aria-checked is the
     only state: CSS reads
     it, JS writes it -->
<button class="dew"
  type="button"
  aria-labelledby="l-wifi"
  aria-checked="true">
<!-- role="switch" is added
     by the script -->
  <span class="dew-knob">
  </span></button>

dew.css

/* typed, so it can
   transition: one number
   moves knob and colour */
@property --dew-p {
  syntax: "<number>"; …
.dew { …
  transition: --dew-p
    420ms var(--dew-spring);
…
.dew[aria-checked="true"]
  { --dew-p: 1; }

dew.js

// drag writes the number
// in; CSS springs the rest
const p = Math.max(0,
  Math.min(1, drag.p0 +
  dx / travel()));
root.style.setProperty(
  '--dew-p', p.toFixed(3));
// released past halfway
// wins; a tap just flips
set(moved ? p > 0.5
  : !isOn());

Dew

A switch whose knob turns into a drop of glass while you hold it

2.1 KB0 depsToggles

Buttons

Copy, send, download and delete buttons that show what just happened.

index.html

<button class="pocket" …
  data-copy-target="#cmd">
<!-- pivot at the base so
     the clip dips as the
     label lands in it -->
  <g class="pocket-clip"
    style="transform-origin:
      9px 16px">
<!-- a live region speaks
     "Copied" instead -->
  …aria-hidden="true">Copied

pocket.css

/* dash outruns the tick;
   JS runs offset 12 → 0 */
.pocket-check { …
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
/* both words in one cell,
   so width never jumps */
.pocket-labels {
  display: grid; }
.pocket-labels > * {
  grid-area: 1 / 1; …

pocket.js

// clone the label and fly
// it to the icon centre
const dx = icon.offsetLeft
  + icon.offsetWidth / 2 - …
// the clip waits for the
// ghost to land, then dips
play(clip, [ …
  { transform: …,
    offset: .74 },

Pocket

A copy button that drops its label into the clipboard

2.5 KB0 depsButtons

Components.

Liquid glass, free to tune and copy

Forms

Dovetail

Ember

Flap

Hasp

Latch

Pleat

Riffle

Shunt

Steep

Strand

Tuck

Navigation

Abacus

Aperture

Dimple

Fresnel

Lantern

Loupe

Marble

Pinch

Plumb

Siphon

Sumi

Sweep

Toggles

Dew

Buttons

Pocket

Your cart

Saved for later