Button Zoo

Sahilverse · An exhibition of interface fauna · Est. 25 Oct 2026

Thirty original button behaviours, kept in nine enclosures. Each one is alive — it springs, ripples, morphs or misbehaves — and each one does a real job: copies code, changes the view, saves a pattern, opens a detail, toggles a setting.

Enter the enclosures ↓ Download the field guide PDF · 14 pages · 187 KB

No tracking or cookies
No autoplay sound
Saved items stay in your browser
Works with keyboard & touch

How to visit

Press anything. Every specimen performs a real action on this page. Its placard says exactly what will happen before you press it. Nothing leaves your browser.

Read the placard. Each specimen lists its trigger, rules, feedback, keyboard behaviour, an accessibility risk rating, and what changes under reduced motion.

Compare motion live. Flip Motion: full / reduced in the top bar (or specimen #23) and watch all thirty change. Field notes shows full and reduced versions side by side.

Take it home. Copy any snippet, save specimens to your Field Notebook, export it as Markdown, and download the 14-page field guide.

Showing all 30 specimens.

Prompt Board

Design a “Save draft” button that tells the truth about whether the save reached the server.

Shuffle with the Pond Skipper (#11). Stamp it into your notebook with the Rubber Stamp (#15).

Magnetic House

Buttons that lean toward attention without grabbing it.

Specimen 1: The Magnet Copier

Magnetica copians

Copies its own implementation snippet to your clipboard. Within its enclosure it drifts up to 6px toward a mouse pointer.

Copy code
Pointer events
Accessibility: Watch closely

Keyboard: Fully operable; magnetism never applies to keyboard focus, so focus rings stay put.

Implementation snippet

const btn = document.querySelector('.magnet');
const zone = btn.parentElement;
zone.addEventListener('pointermove', (e) => {
  if (e.pointerType !== 'mouse' || matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  const r = btn.getBoundingClientRect();
  const dx = (e.clientX - (r.left + r.width / 2)) * 0.12;
  const dy = (e.clientY - (r.top + r.height / 2)) * 0.12;
  const clamp = (v) => Math.max(-6, Math.min(6, v));
  btn.style.translate = clamp(dx) + 'px ' + clamp(dy) + 'px';
});
zone.addEventListener('pointerleave', () => (btn.style.translate = '0 0'));
btn.addEventListener('click', () => navigator.clipboard.writeText(SNIPPET));

Specimen 2: The Lodestone

Lodestonia proxima

Scrolls to the next zone of the zoo and moves keyboard focus to that zone’s heading.

Navigate
Pointer events
Accessibility: Low risk

Keyboard: Enter/Space; focus lands on the destination heading.

Implementation snippet

function goToNextZone(currentId) {
  const zones = [...document.querySelectorAll('[data-zone-section]')];
  const i = zones.findIndex((z) => z.id === currentId);
  const next = zones[(i + 1) % zones.length];
  const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
  next.scrollIntoView({ behavior: reduce ? 'auto' : 'smooth', block: 'start' });
  const h = next.querySelector('h2');
  h.setAttribute('tabindex', '-1');
  h.focus({ preventScroll: true });
}

Specimen 3: The Iron Filings

Ferrum collectivum

Saves every specimen currently visible (after your filters) into your Field Notebook in one go.

Save / collect
CSS transitions
Accessibility: Low risk

Keyboard: Enter/Space. The filing animation also plays on :focus-visible.

Implementation snippet

function saveVisible() {
  const visible = [...document.querySelectorAll('.specimen:not([hidden])')];
  const book = JSON.parse(localStorage.getItem('notebook') || '[]');
  let added = 0;
  for (const card of visible) {
    if (!book.some((e) => e.id === card.dataset.id)) {
      book.push({ id: card.dataset.id, at: Date.now() });
      added++;
    }
  }
  localStorage.setItem('notebook', JSON.stringify(book));
  status('Saved ' + added + ' new pattern' + (added === 1 ? '' : 's'));
}

Spring Paddock

Mass, stiffness, damping: motion that says “this is physical, and it settled.”

Specimen 4: The Pogo Toggle

Saltator conspectus

Switches the whole gallery between grid and list layouts. The label always names the current view.

Change view
Web Animations API
Accessibility: Low risk

Keyboard: Enter/Space; aria-pressed reflects list view.

Implementation snippet

const spring = [
  { transform: 'scale(1,1)' },
  { transform: 'scale(1.12,0.86)', offset: 0.25 },
  { transform: 'scale(0.94,1.08)', offset: 0.55 },
  { transform: 'scale(1.02,0.98)', offset: 0.8 },
  { transform: 'scale(1,1)' },
];
btn.addEventListener('click', () => {
  const list = document.body.classList.toggle('view-list');
  btn.setAttribute('aria-pressed', String(list));
  btn.textContent = 'View: ' + (list ? 'list' : 'grid');
  if (!matchMedia('(prefers-reduced-motion: reduce)').matches)
    btn.animate(spring, { duration: 520, easing: 'ease-out' });
});

Specimen 5: The Slinky

Spira densitatis

Cycles gallery spacing through compact → cozy → airy.

Change view
CSS transitions
Accessibility: Low risk

Keyboard: Enter/Space.

Implementation snippet

const steps = ['compact', 'cozy', 'airy'];
btn.addEventListener('click', () => {
  const cur = document.documentElement.dataset.density || 'cozy';
  const next = steps[(steps.indexOf(cur) + 1) % steps.length];
  document.documentElement.dataset.density = next;
  btn.textContent = 'Density: ' + next;
});
/* CSS */
:root[data-density='compact'] { --gap: 0.5rem; }
:root[data-density='airy'] { --gap: 2rem; }

Specimen 6: The Jack-in-the-Box

Pyxis exsiliens

Opens the full field-guide entry for today’s specimen (chosen deterministically from the date).

Explore / discover
Web Animations API
Accessibility: Low risk

Keyboard: Enter/Space opens; Esc closes; focus returns to this button.

Implementation snippet

const day = Math.floor(Date.now() / 86400000);
const id = SPECIMENS[day % SPECIMENS.length].id;
btn.addEventListener('click', () => {
  openDetail(id);              // fills and calls dialog.showModal()
  const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
  dialog.animate(
    reduce ? [{ opacity: 0 }, { opacity: 1 }]
           : [{ transform: 'scale(.6)', opacity: 0 }, { transform: 'scale(1.04)' }, { transform: 'scale(1)', opacity: 1 }],
    { duration: reduce ? 150 : 420, easing: 'cubic-bezier(.2,.9,.3,1.2)' });
});
dialog.addEventListener('close', () => btn.focus());

Specimen 7: The Bungee

Funis reditus

Returns to the top of the page and focuses the main heading.

Navigate
Web Animations API
Accessibility: Low risk

Keyboard: Enter/Space; focus moves to the page title.

Implementation snippet

btn.addEventListener('click', () => {
  const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (!reduce) btn.animate(
    [{ transform: 'scaleY(1)' }, { transform: 'scaleY(1.35) translateY(-6px)' }, { transform: 'scaleY(1)' }],
    { duration: 380, easing: 'ease-out' });
  window.scrollTo({ top: 0, behavior: reduce ? 'auto' : 'smooth' });
  const h1 = document.querySelector('h1');
  h1.setAttribute('tabindex', '-1');
  h1.focus({ preventScroll: true });
});

Morphing Glasshouse

One control, several honest shapes. The shape is the state.

Specimen 8: The Chrysalis

Pupa tokenorum

Copies the zoo’s CSS motion tokens (durations, easings, reduced-motion overrides) as design code.

Copy code
CSS transitions
Accessibility: Low risk

Keyboard: Enter/Space; result announced via live region.

Implementation snippet

:root {
  --dur-micro: 120ms;  --dur-short: 220ms;  --dur-medium: 420ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.2, .9, .3, 1.25);
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-short: 1ms; --dur-medium: 1ms; --ease-spring: linear; }
}
.btn { transition: background var(--dur-micro) var(--ease-out),
                   transform var(--dur-short) var(--ease-spring); }

Specimen 9: The Shapeshifter

Lux tenebraeque

Toggles light and dark themes. Its icon morphs between a full circle (sun) and a bitten crescent (moon).

Toggle setting
CSS transitions
Accessibility: Low risk

Keyboard: Enter/Space; aria-pressed = dark.

Implementation snippet

<button class="theme" aria-pressed="false">
  <svg viewBox="0 0 24 24" aria-hidden="true"><mask id="m">
    <rect width="24" height="24" fill="#fff"/>
    <circle class="bite" cx="30" cy="8" r="7"/></mask>
    <circle cx="12" cy="12" r="8" mask="url(#m)" fill="currentColor"/></svg>
  <span>Theme: light</span></button>
<style>.bite{transition:cx .4s} [aria-pressed=true] .bite{cx:17}</style>

Specimen 10: The Unfolding Pill

Ordo explicans

Unfolds into three sort choices (number, zone, risk). Picking one re-sorts the gallery and folds back.

Change view
CSS transitions
Accessibility: Watch closely

Keyboard: Enter opens, Tab through options, Esc closes and returns focus.

Implementation snippet

trigger.addEventListener('click', () => {
  const open = trigger.getAttribute('aria-expanded') === 'true';
  trigger.setAttribute('aria-expanded', String(!open));
  panel.hidden = open;
});
panel.addEventListener('click', (e) => {
  const opt = e.target.closest('[data-sort]');
  if (!opt) return;
  sortGallery(opt.dataset.sort);
  panel.querySelectorAll('[data-sort]').forEach((b) => b.setAttribute('aria-pressed', String(b === opt)));
  trigger.setAttribute('aria-expanded', 'false'); panel.hidden = true; trigger.focus();
});

Ripple Pond

Feedback that radiates from exactly where you touched.

Specimen 11: The Pond Skipper

Unda inventionis

Draws a new button-design challenge from a deck of 24 original prompts and shows it on the Prompt Board.

Explore / discover
CSS transitions
Accessibility: Low risk

Keyboard: Enter/Space ripple from the centre.

Implementation snippet

btn.addEventListener('click', (e) => {
  const r = btn.getBoundingClientRect();
  const x = e.clientX ? e.clientX - r.left : r.width / 2;   // keyboard: centre
  const y = e.clientY ? e.clientY - r.top : r.height / 2;
  const dot = document.createElement('span');
  dot.className = 'ripple';
  dot.style.left = x + 'px'; dot.style.top = y + 'px';
  btn.append(dot);
  dot.addEventListener('animationend', () => dot.remove());
  board.textContent = nextPrompt();   // board has aria-live="polite"
});
/* .ripple{position:absolute;width:8px;aspect-ratio:1;border-radius:50%;
   background:currentColor;opacity:.35;translate:-50% -50%;animation:rip .6s ease-out}
   @keyframes rip{to{scale:40;opacity:0}} */

Specimen 12: The Sonar

Echo inveniens

Highlights every specimen already in your notebook, scrolls to the first, and announces how many it found.

Explore / discover
CSS transitions
Accessibility: Low risk

Keyboard: Enter/Space; focus moves to the first matching card.

Implementation snippet

function ping(savedIds) {
  const hits = savedIds.map((id) => document.querySelector('[data-id="' + id + '"]')).filter(Boolean);
  hits.forEach((el) => { el.classList.remove('ping'); void el.offsetWidth; el.classList.add('ping'); });
  status(hits.length ? 'Found ' + hits.length + ' saved specimen(s)' : 'Your notebook is empty');
  if (hits[0]) { hits[0].scrollIntoView({ block: 'center' }); hits[0].focus(); }
}

Resonantia communis

Copies a URL that reproduces your current filters and sort (stored in the #hash). Paste it anywhere to share the exact view.

Copy code
CSS transitions
Accessibility: Low risk

Keyboard: Enter/Space.

Implementation snippet

function viewToHash(state) {
  const p = new URLSearchParams();
  for (const [k, v] of Object.entries(state)) if (v && v !== 'all') p.set(k, v);
  return '#' + p.toString();
}
btn.addEventListener('click', async () => {
  const url = location.origin + location.pathname + viewToHash(currentFilters());
  history.replaceState(null, '', url);
  try { await navigator.clipboard.writeText(url); status('Link copied'); }
  catch { showSelectableField(url); }
});

Tactile Burrow

Pressure, holding, buzzing and the size of a fingertip.

Specimen 14: The Patient Burrower

Tenax exportans

Press and hold (0.9s) to download your Field Notebook as a Markdown file. Prefer not to hold? Press twice within 4 seconds.

Download
Timers / state machine
Accessibility: Needs care

Keyboard: Hold Space or Enter, or press twice.

Implementation snippet

let timer, armedUntil = 0;
const start = () => { btn.classList.add('holding'); timer = setTimeout(doExport, 900); };
const cancel = () => { btn.classList.remove('holding'); clearTimeout(timer); };
btn.addEventListener('pointerdown', start);
btn.addEventListener('pointerup', cancel);
btn.addEventListener('pointerleave', cancel);
btn.addEventListener('keydown', (e) => { if ((e.key === ' ' || e.key === 'Enter') && !e.repeat) { e.preventDefault(); start(); } });
btn.addEventListener('keyup', cancel);
btn.addEventListener('click', () => {           // accessible alternative: press twice
  if (Date.now() < armedUntil) return doExport();
  armedUntil = Date.now() + 4000; status('Press again to export, or hold.');
});

Specimen 15: The Rubber Stamp

Sigillum promptorum

Saves the design prompt currently on the Prompt Board into your notebook (with today’s date).

Save / collect
CSS transitions
Accessibility: Low risk

Keyboard: Enter/Space; :active styling also triggers via a .pressed class on keydown.

Implementation snippet

.stamp { transition: transform 90ms ease-out, box-shadow 90ms; box-shadow: 0 6px 0 var(--ink); }
.stamp:active, .stamp.pressed { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .stamp:active, .stamp.pressed { transform: none; background: var(--accent); }
}
/* JS: mirror :active for keyboard */
btn.addEventListener('keydown', (e) => { if (e.key === ' ' || e.key === 'Enter') btn.classList.add('pressed'); });
btn.addEventListener('keyup', () => btn.classList.remove('pressed'));

Specimen 16: The Buzzing Beetle

Vibratio permissa

Turns on optional 15ms vibration feedback for zoo actions — only where the browser supports it (mainly Android). It tells you honestly if your device can’t.

Toggle setting
Vibration API
Accessibility: Watch closely

Keyboard: Enter/Space; aria-pressed.

Implementation snippet

const supported = 'vibrate' in navigator;
btn.addEventListener('click', () => {
  const on = btn.getAttribute('aria-pressed') !== 'true';
  btn.setAttribute('aria-pressed', String(on));
  btn.textContent = 'Haptics: ' + (on ? 'on' : 'off');
  if (on && supported) navigator.vibrate(15);
  status(supported ? 'Haptics ' + (on ? 'enabled' : 'disabled')
                   : 'This browser does not support vibration; setting saved anyway.');
});

Specimen 17: The Fingertip Gauge

Mensura digiti

Overlays every button and link on this page with a size verdict: green ≥44px, amber 24–43px, red under 24px. Reports totals.

Toggle setting
DOM reorder
Accessibility: Low risk

Keyboard: Enter/Space; aria-pressed.

Implementation snippet

function inspectTargets() {
  const tally = { ok: 0, warn: 0, fail: 0 };
  for (const el of document.querySelectorAll('button, a[href], [role="button"]')) {
    const { width, height } = el.getBoundingClientRect();
    if (!width) continue;
    const min = Math.min(width, height);
    const verdict = min >= 44 ? 'ok' : min >= 24 ? 'warn' : 'fail';
    el.dataset.target = verdict; tally[verdict]++;
  }
  return tally;   // style [data-target=fail]{outline:3px solid red} etc.
}

Confirmation Aviary

The pause before an action that cannot simply be taken back.

Specimen 18: The Two-Step Heron

Ardea bis-tangens

Empties your Field Notebook. First press arms it (“Really clear? 4s”); second press clears. An Undo is offered afterwards.

Destructive
Timers / state machine
Accessibility: Watch closely

Keyboard: Enter/Space twice. Focus never moves between steps.

Implementation snippet

let armed = null;
btn.addEventListener('click', () => {
  if (armed) { clearTimeout(armed); armed = null; reset(); return clearNotebookWithUndo(); }
  btn.classList.add('armed');
  btn.textContent = 'Really clear? Press again';
  status('Press Clear again within 4 seconds to confirm');
  armed = setTimeout(() => { armed = null; reset(); }, 4000);
});
btn.addEventListener('blur', () => { if (armed) { clearTimeout(armed); armed = null; reset(); } });
function reset() { btn.classList.remove('armed'); btn.textContent = 'Clear notebook'; }

Specimen 19: The Inkwell Checkmark

Signum perlectum

Marks the specimen you most recently opened as “reviewed” (persists in this browser). Press again to un-mark.

Save / collect
SVG stroke
Accessibility: Low risk

Keyboard: Enter/Space; aria-pressed reflects reviewed state of the target.

Implementation snippet

<svg viewBox="0 0 24 24" aria-hidden="true">
  <path class="tick" d="M4 12.5l5 5L20 6" fill="none" stroke="currentColor"
        stroke-width="3" stroke-linecap="round" pathLength="1"/></svg>
<style>
.tick { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .45s ease-out; }
[aria-pressed='true'] .tick { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .tick { transition: none; } }
</style>

Specimen 20: The Weighing Stork

Pondus documenti

First press tells you exactly what you’ll get (page count, file size, format). Second press downloads the PDF.

Download
Timers / state machine
Accessibility: Low risk

Keyboard: Enter/Space twice.

Implementation snippet

const FILE = { href: 'microinteractions-that-matter.pdf', pages: 14, size: '187 KB' };
let armed = 0;
btn.addEventListener('click', () => {
  if (Date.now() < armed) {
    const a = Object.assign(document.createElement('a'), { href: FILE.href, download: '' });
    a.click(); armed = 0; btn.textContent = 'Get the field guide (PDF)'; return;
  }
  armed = Date.now() + 6000;
  btn.textContent = 'PDF · ' + FILE.pages + ' pages · ' + FILE.size + ' — press again';
});

Reversible Reef

Act now, regret safely. Undo beats “Are you sure?”

Specimen 21: The Hermit Crab

Paguroidea revertens

Removes the most recent notebook entry immediately, then offers an Undo toast for 8 seconds.

Destructive
Timers / state machine
Accessibility: Low risk

Keyboard: Enter/Space. Toast Undo is reachable by Tab and by pressing Ctrl/⌘+Z.

Implementation snippet

function removeLast() {
  const item = notebook.pop(); if (!item) return status('Notebook is already empty');
  save();
  toast('Removed “' + item.title + '”', {
    action: 'Undo', timeout: 8000,
    onAction() { notebook.push(item); save(); status('Restored'); },
  });
}
document.addEventListener('keydown', (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key === 'z' && activeToast) activeToast.action();
});

Specimen 22: The Rewinding Nautilus

Spira temporis

Undoes the most recent change to any zoo setting (theme, view, density, motion, sound, mirror…). Keeps a 20-step history.

Toggle setting
Timers / state machine
Accessibility: Low risk

Keyboard: Enter/Space. When empty it uses aria-disabled, not disabled, so it stays discoverable.

Implementation snippet

const history = [];
function setSetting(key, value) {
  history.push({ key, prev: settings[key] });
  if (history.length > 20) history.shift();
  settings[key] = value; apply();
}
rewindBtn.addEventListener('click', () => {
  const last = history.pop();
  if (!last) return status('Nothing to rewind yet');
  settings[last.key] = last.prev; apply();
  status('Rewound ' + last.key + ' to ' + last.prev);
  rewindBtn.setAttribute('aria-disabled', String(!history.length));
});

Specimen 23: The Tortoise Twin

Testudo comparativa

Switches the entire zoo between full motion and reduced motion, so you can compare every specimen live. Press again to switch back.

Toggle setting
CSS transitions
Accessibility: Low risk

Keyboard: Enter/Space; aria-pressed = reduced.

Implementation snippet

const os = matchMedia('(prefers-reduced-motion: reduce)');
let mode = localStorage.getItem('motion') || (os.matches ? 'reduced' : 'full');
function apply() {
  document.documentElement.dataset.motion = mode;
  btn.setAttribute('aria-pressed', String(mode === 'reduced'));
  btn.textContent = 'Motion: ' + mode;
}
btn.addEventListener('click', () => { mode = mode === 'full' ? 'reduced' : 'full';
  localStorage.setItem('motion', mode); apply(); });
/* CSS: [data-motion=reduced] *{animation-duration:1ms!important;transition-duration:1ms!important} */

Sound Permission Hut

Silent by default. Audio arrives only when invited.

Specimen 24: The Gatekeeper Owl

Strix silentii

Grants permission for this page to make short procedural sounds. No AudioContext exists until you press it.

Toggle setting
Web Audio
Accessibility: Low risk

Keyboard: Enter/Space; aria-pressed.

Implementation snippet

let ctx = null;
btn.addEventListener('click', async () => {
  const on = btn.getAttribute('aria-pressed') !== 'true';
  if (on) { ctx ??= new AudioContext(); await ctx.resume(); blip(660); }
  else if (ctx) await ctx.suspend();
  btn.setAttribute('aria-pressed', String(on));
  btn.textContent = 'Sound: ' + (on ? 'on' : 'off');
});
function blip(freq, t = 0.09) {
  const o = ctx.createOscillator(), g = ctx.createGain();
  o.frequency.value = freq; g.gain.setValueAtTime(0.08, ctx.currentTime);
  g.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + t);
  o.connect(g).connect(ctx.destination); o.start(); o.stop(ctx.currentTime + t);
}

Specimen 25: The Step-Volume Cricket

Gryllus gradatus

Cycles the zoo’s sound level through 0 → 1 → 2 → 3. Plays a short tick at the new level if sound is on.

Toggle setting
Web Audio
Accessibility: Watch closely

Keyboard: Enter/Space; Arrow keys are not used, because this is a button, not a slider.

Implementation snippet

const GAINS = [0, 0.03, 0.07, 0.12];
let level = 2;
btn.addEventListener('click', () => {
  level = (level + 1) % GAINS.length;
  btn.textContent = 'Volume: ' + level + ' of 3';
  btn.style.setProperty('--level', level);      // CSS fills the bars
  if (soundOn && level) blip(440 + level * 110, GAINS[level]);
});

Specimen 26: The Mockingbird

Mimus auditionis

Plays the zoo’s four UI sounds in sequence — success, warning, undo, navigate — with captions shown as each plays. If sound is off, it tells you how to turn it on.

Sound / media
Web Audio
Accessibility: Low risk

Keyboard: Enter/Space.

Implementation snippet

const PALETTE = [
  { name: 'success',  notes: [660, 880] },
  { name: 'warning',  notes: [330, 300] },
  { name: 'undo',     notes: [520, 390] },
  { name: 'navigate', notes: [440] },
];
async function audition() {
  if (!soundOn) return status('Sound is off. Turn it on with the Owl (#24).');
  for (const cue of PALETTE) {
    caption.textContent = cue.name;
    for (const f of cue.notes) { blip(f); await wait(110); }
    await wait(350);
  }
}

Mischief Enclosure

Playful surprises with ethical fences: brief, optional, never trapping.

Specimen 27: The Shy Lemur

Lemur verecundus

Opens a random specimen’s field-guide entry. With a mouse, it shyly dodges the pointer — at most twice — then stays put for good.

Explore / discover
Pointer events
Accessibility: Needs care

Keyboard: Never dodges. Enter/Space open a random specimen immediately.

Implementation snippet

let dodges = 0;
btn.addEventListener('pointerenter', (e) => {
  if (e.pointerType !== 'mouse' || dodges >= 2 || reducedMotion() || document.activeElement === btn) return;
  dodges++;
  btn.style.translate = (dodges % 2 ? 60 : -30) + 'px 0';
  if (dodges === 2) caption.textContent = 'Fine. You win. I’ll stay.';
});
btn.addEventListener('click', () => openDetail(randomSpecimenId()));

Specimen 28: The Unguilty Goose

Anser sine culpa

Takes you to the Sahilverse home, sahiltayal.com. First press shows the guilt-trip you would see on a manipulative site — crossed out — then a plain “Go” confirmation.

Navigate
Timers / state machine
Accessibility: Low risk

Keyboard: Enter/Space twice.

Implementation snippet

let shown = false;
btn.addEventListener('click', () => {
  if (shown) return location.assign('https://sahiltayal.com/');
  shown = true;
  caption.innerHTML = '<s>No thanks, I don’t care about good design.</s> ' +
                      'Just kidding. Leaving is a normal thing to do.';
  btn.textContent = 'Go to sahiltayal.com';
});

Specimen 29: The Looking-Glass Gecko

Gekko speculi

Flips the gallery to right-to-left direction (dir="rtl") so you can check that every specimen survives a bidirectional layout.

Toggle setting
CSS transitions
Accessibility: Low risk

Keyboard: Enter/Space; aria-pressed.

Implementation snippet

btn.addEventListener('click', () => {
  const g = document.querySelector('#gallery');
  const rtl = g.dir !== 'rtl';
  g.dir = rtl ? 'rtl' : 'ltr';
  btn.setAttribute('aria-pressed', String(rtl));
  status('Gallery direction: ' + (rtl ? 'right-to-left' : 'left-to-right'));
});
/* Prefer logical properties so this “just works”: */
.card { padding-inline-start: 1rem; border-inline-start: 4px solid var(--zone); }

Specimen 30: The Tidy Gremlin

Gremlinus ordinans

Shuffles the order of all specimens (useful for unbiased browsing). The label then becomes “Restore order”, which puts everything back.

Change view
DOM reorder
Accessibility: Watch closely

Keyboard: Enter/Space. Reading order and visual order stay identical (DOM is reordered, not CSS order).

Implementation snippet

function shuffleChildren(parent) {
  const kids = [...parent.children];
  for (let i = kids.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [kids[i], kids[j]] = [kids[j], kids[i]];
  }
  parent.append(...kids);          // DOM order == visual order
}
function restore(parent) {
  [...parent.children].sort((a, b) => a.dataset.n - b.dataset.n).forEach((c) => parent.append(c));
}

Your Field Notebook

Saved specimens and stamped prompts live only in this browser’s localStorage. Clear them anytime with the Two-Step Heron (#18) or the buttons below.

Nothing saved yet. Press Save on any specimen.

Anatomy of a specimen

Every placard in this zoo uses the four-part anatomy that the designer Dan Saffer set out in Microinteractions (O’Reilly, 2013): a trigger that starts it, rules that decide what happens, feedback that shows it happened, and loops and modes that govern what it does over time.

The zoo adds three fields of its own. Keyboard says what a person without a pointer experiences. Reduced says what the specimen does when someone has asked their operating system for less motion. And the accessibility rating — low risk, watch closely or needs care — is an editorial judgement about how easily the pattern goes wrong in other people’s hands. It is not a compliance score.

Motion is a sentence. Reduced motion should rephrase it, not delete it.

A common mistake is to treat prefers-reduced-motion as a kill switch. The better question is: what information did the motion carry? If a spring said “this settled,” a colour change can say it too. If a ripple said “here is where you touched,” a brief outline can. The zoo’s twins are designed that way: reduced versions keep the meaning and drop the travel.

The take-home field guide

Microinteractions That Matter

A 14-page Sahilverse field guide: the four-part anatomy, all 30 patterns with do/don’t notes, three worked redesigns, a reduced-motion translation table, the twelve-point testing checklist, design exercises and references — with an honest page on what it doesn’t cover.

Download the PDF 14 pages · 187 KB · no sign-up

Explore related worlds

Four Sahilverse destinations, each opened and read on 25 October 2026 before being listed here. Each note explains why it belongs next to this zoo.

Expressive controlsANGRY — The Art of Turning Heat into Work ↗angry.sahiltayal.online
ANGRY’s Heat Transformer uses a slider and choice chips to turn intensity into a prompt. It is a study in how a control’s tone can carry emotion without trapping the visitor. Button Zoo dissects the same territory at the scale of a single press: how much expression a control can carry before it stops being clear.
Ethical engagementThe Attention Casino ↗attentioncasino.sahiltayal.com
Its Room 06 (“The Choice Already Made”) examines defaults, unequal button salience and hard refusals. Button Zoo’s Confirmation Aviary, Reversible Reef and the Unguilty Goose (#28) are the constructive half of that argument: what fair buttons look like in code.
Playful digital craftSYNAPSE — The living idea laboratory ↗synth.sahiltayal.com
SYNAPSE (served at synth.sahiltayal.com) treats the browser as a craft material: local search, a canvas “synthesis reactor”, exports, no external scripts. Button Zoo shares that ethic of zero-dependency, transparent browser craft, applied to the humblest UI element.
The main atlasSahilverse — One Mind. Infinite Worlds. ↗sahiltayal.com
The home atlas has its own “Big Magic Button” and six navigation modes. Button Zoo is one more world in that index, and every exit here leads back to it.

References & honesty notes

W3C, Web Content Accessibility Guidelines 2.2 — especially 2.1.1 Keyboard, 2.2.1 Timing Adjustable, 2.3.3 Animation from Interactions, 2.5.7 Dragging Movements, 2.5.8 Target Size (Minimum), 1.4.11 Non-text Contrast, 2.4.7/2.4.11 Focus.
W3C WAI, ARIA Authoring Practices: Button pattern (toggle buttons and aria-pressed).
MDN, prefers-reduced-motion and Navigator.vibrate().
Dan Saffer, Microinteractions: Designing with Details, O’Reilly Media, 2013 (book; the trigger/rules/feedback/loops anatomy).

The specimen names, Latin binomials, prompts and accessibility ratings are original editorial inventions for this exhibition. The ratings are judgements, not test results. Vibration works only in browsers that support it (not iOS Safari).

How to visit

Sort and filter the specimens

Prompt Board

Magnetic House

Spring Paddock

Morphing Glasshouse

Ripple Pond

Tactile Burrow

Confirmation Aviary

Reversible Reef

Sound Permission Hut

Mischief Enclosure

Your Field Notebook

Anatomy of a specimen

The twelve-point button inspection

Microinteractions That Matter

Explore related worlds

References & honesty notes