Specimens · 04

Four small interfaces, built to be looked at.

Each one is a self-contained study. Not a demonstration of a library, but of how a common interaction pattern reads when it is designed rather than assembled — state, motion, accessibility and copy each getting equal attention. Choose one to open it.

No. 01

Appointment scheduler

Pick a session type, a date and a slot, then confirm. Demonstrates state discipline — six real treatments (default → date → slot → form → submitting → confirmed), so no browser default is ever left to speak for the interface.

BUILT WITH
vanilla HTML / CSS / JS
STATES
6 · default, date, slot, form, submitting, confirmed
PERSISTENCE
MariaDB via CSRF-protected POST · PII encrypted at rest
A11Y
WCAG 2.2 AA · keyboard-first
Open specimen
No. 02

Registration form

Name, email, password, confirmation. Live validation on blur, a four-segment strength meter that scores real entropy rather than composition rules, and honest error messages set alongside each field rather than above the whole form.

BUILT WITH
vanilla HTML / CSS / JS
STATES
5 · default, typing, invalid, submitting, created
PERSISTENCE
MariaDB · Argon2id (memory ≥ 65536)
A11Y
WCAG 2.2 AA · aria-invalid + aria-describedby
Open specimen
No. 03

Image upload, search, view

Drop images onto the panel or pick them from disk; thumbnails appear in a responsive grid as they load. Live-filter by filename. Click any thumbnail for a full-frame view with keyboard-navigable next / previous and ESC to dismiss.

BUILT WITH
vanilla HTML / CSS / JS · Drag & Drop + File API
STATES
6 · empty, dragging, uploading, ready, filtered, viewing
PERSISTENCE
MariaDB metadata · files stored outside webroot
A11Y
WCAG 2.2 AA · focus trap in viewer, ESC dismiss
Open specimen
No. 04

Theme orchestrator

Every colour and typography token in one panel, wired to a live sample page. Change any value and the nav, hero, cards, buttons, form fields and table all update in real time via CSS custom properties. Signed-in visitors save themes to their browser only, keyed to their account — anonymous edits die with the tab.

BUILT WITH
vanilla HTML / CSS / JS · CSS custom properties
STATES
live preview · save · reset · export
PERSISTENCE
localStorage per user · never server-side
A11Y
WCAG 2.2 AA · keyboard-first · reduced-motion respected
Open specimen