03 Playground

Experiments

Small, open builds that prove a point — reactivity, layout, animation, and the Web APIs that quietly do the job of a library. Open any of them, inspect the source, fork it.

Area

8 experiments

Live demo · ~3 KB

A reactive state engine in pure JS, three kilobytes

Signals, derived values, and effects in about twenty-five lines — no virtual DOM, no compiler, no dependencies. Every demo below runs on exactly this code.

Open the demo →
Interactive

Sortable data grid without a framework

Column sort, keyboard navigation, and live region announcements — built from a table, a few event listeners, and web component slots.

Open the demo →
Custom elements

Menus and tooltips with Popover API

Dropdowns, nested menus, and anchored tooltips using the native popover and anchor positioning APIs — no positioning library required.

Open →
Canvas

Spring physics in forty lines

Damped harmonic motion on the canvas with requestAnimationFrame — smooth, interruptible, and small enough to read in one sitting.

Open →
Interactive

View Transitions API playground

Cross-document and same-document transitions with a toggle, a few CSS rules, and the callback the spec gives you for free.

Open the demo →
Interactive

Container queries vs media queries

The same card component at three container widths — why the breakpoint should belong to the component, not the viewport.

Open →
Interactive

Reorderable lists with the native drag API

Drag handles, drop indicators, and keyboard reordering using HTML draggable and a handful of data attributes.

Open →
Interactive

Live theming playground

Swap light and dark palettes by toggling data attributes and CSS custom properties — no build step, no theme provider.

Open the demo →