00 — Labs

Labs

Small, working experiments in interaction, motion, type, colour, and browser craft. Open a card to try the piece, then read the short teardown behind it.

For a broader set of practical interface studies, browse The unreasonable effectiveness of HTML, a recreation of the ThariqS/html-effectiveness example gallery in this site’s design system.

Bookshelf

· 5 min · Article · Joost van der Laan

Twenty-five books on a shelf that leans, lifts under the cursor, and swings open into a page with CSS 3D over real data.

Ledger

· 3 min · Quick read · Joost van der Laan

Issue and commit histories share one real calendar axis; finished work stops while unfinished work leaves the frame.

Photo Effects

· 3 min · Quick read · Joost van der Laan

Twelve portraits show distinct image treatments made from CSS gradients, blend modes, masks, and filters.

VHS Tape Text

· 4 min · Article · Joost van der Laan

Blocky display type wobbles on a dark CRT field with scanlines, color bleed, tape noise, and bloom.

Magnetic Type

· 1 min · Quick read · Joost van der Laan

Three lines of display type stretch away from a movable point, leaving fine ghost outlines behind.

Soft Bodies

· 1 min · Quick read · Joost van der Laan

Six soft ink-colored bodies sag, collide, and can be grabbed, moved, and piled together.

Dot Field

· 3 min · Quick read · Joost van der Laan

A grid of dots bends away from a movable point and springs back into neat rows.

Design Tokens

· 8 min · Article · Joost van der Laan

A generated gallery shows every color, type style, spacing step, and component defined by the site design tokens.

Gradients & P3

· 5 min · Article · Joost van der Laan

Side-by-side color swatches compare ordinary sRGB gradients with their wider-gamut Display P3 versions.