About the Lab
A small collection of interaction ideas, built properly.
16 experiments, each one a behaviour rather than a skin: something that solves a real interaction problem and survives being copied into a real codebase.
What this is
The Lab is a workshop. Every experiment starts from a behavioural question — what should scrolling past a large card feel like, how should a system ask a person to review its work — and ends as a standalone component with the same obligations as production code: TypeScript, keyboard support, visible focus, reduced-motion behaviour, and no hidden services.
It is deliberately small. Sixteen experiments that can each be defended beats sixty that cannot.
Rules every experiment follows
- One behaviour, done well. No kitchen-sink components with eleven modes.
- Self-contained. Components install as a folder of files with relative imports and scoped CSS. Nothing reads from the Lab's own design tokens or state.
- Honest about cost. Dependencies are listed, and most experiments have none — browser APIs and CSS come first.
- Accessible by construction. Keyboard paths, ARIA where it is genuinely needed, and documented limitations where an interaction is inherently pointer-first.
- Tested in a realistic context. Previews are sample products, not empty boxes, and each component has been installed into a separate consumer project and built there.
How installation works
Every experiment is published as a shadcn-compatible registry item. The install command on each page points at this site's /r/<slug>.json endpoint, which serves the shipped source as JSON; the shadcn CLI writes the files into your project and installs any npm dependency the component needs.
Nothing is hosted for you and nothing phones home. If you prefer, every file is readable and copyable from the Source section of each experiment.
Accessibility principles
- Motion is an enhancement:
prefers-reduced-motionremoves easing, magnetism and settling — never information. - Every custom interaction has a keyboard path, or documents that it is pointer-first and renders safely without one.
- Colour is never the only signal; statuses are written as words too.
- Components that run render loops pause offscreen, when the tab is hidden, and under reduced motion.
Licence
The Lab's own code is MIT licensed. Parts of the Signal Field engine, the Inverted Cursor lifecycle and the Soft Snap settling rules were adapted from Tanishk Salagame's portfolio (the same copyright holder); the adaptations are generalised and relicensed under the same MIT terms. See LICENSE in the repository.