← Dan Crafts Media

The Lab — Web Design Experiments

46 demos × 23 categories · 0 dependencies · one page

01 · Dither, pixel & ASCII

Ordered dither gradient

canvas
animated Bayer 4×4 dithering over a moving gradient

Live ASCII waves

canvas
a density-mapped ASCII field, like a 1-bit screen

02 · Text-mode & braille graphics

Braille dot swarm

canvas
unicode braille cells as a 2×4-dot canvas

FIGlet banner typing

text
click the card to retype the banner
03 · Paper-style shaders
Mesh-gradient metaballs
canvas
soft blob field, the Paper Shaders signature look
Film grain & noise
canvas
per-pixel noise, the cheapest texture trick that works
04 · Typography & kinetic text
Scramble decoder
js
click the text to re-run the decode effect
SCRAMBLE ME
Per-char sine wave
js
each glyph rides its own spring on a sine
05 · Shaders, WebGL & 3D feel
Ink flow field
canvas
particles curling through a pseudo-fluid field
Wireframe dot globe
canvas
3D projected sphere, drag to spin
06 · Materials & pseudo-3D
Frosted glass card
css
backdrop-filter refraction, the "liquid glass" look
Glass that refracts — this card blurs whatever sits behind it, no WebGL required.
SVG turbulence wobble
svg
feTurbulence + feDisplacementMap on a rectangle
07 · Visual effects
CSS glitch
css
pure CSS chromatic-aberration glitch on ::before/::after
GLITCH
Low-poly drift field
canvas
moving triangle mesh with flat shading
08 · Audio-visual
Oscilloscope tone
webaudio
click ▶ to hear a quiet synth tone driving the scope
Video feedback loop
canvas
the canvas draws itself, rotated & scaled — classic feedback
09 · Generative art
Growing fractal tree
canvas
recursive branching, depth grows over time
Procedural botany
canvas
random-walk stems with leaf nodes — click to replant
10 · Data, maps & graphs as art
Flight arcs
canvas
great-circle arcs between cities, animated planes
Voronoi cells
canvas
nearest-site regions, click to reshuffle
11 · Hand-drawn & sketchy
Sketchy chart
canvas
the line is redrawn with jitter like a pen, never sits still
Wobbly borders
svg
rough.js-style jittered rectangles
12 · Retro OS & themed CSS
Windows 98 dialog
css
chunky bevels, gradient titlebar — click OK
uncommon.exe✕
46 demos fit in one HTML file. Cool, right?
8-bit boot terminal
js
typewriter boot log with blinking cursor
13 · CSS-only effects
Holographic foil
css
animated conic-gradient, zero JS
Pattern fills
css
repeating-linear + repeating-conic gradients
14 · Motion, physics & interaction
Spring follower
canvas
move the cursor — the dot trails with spring physics
Magnetic buttons
js
buttons flee from the cursor like magnets
15 · Scroll, pages & transitions
Sticky layer scroll
css
scroll inside the card — layers pin & release
LAYER 1 — sticky top
Keep scrolling… position:sticky does the parallax work for free.
LAYER 2 — pinned
That's the whole trick. No scroll library needed.
END
Page fold on hover
css
perspective + rotateX — one of the classic IE transitions, reborn
HOVER ME
16 · Physics & simulation
Gravity balls
canvas
click anywhere to spawn a ball with real gravity
Verlet cloth
canvas
pinned points + constraints, wind from noise
17 · Tactile & odd widgets
Split-flap counter
js
airport-board digits flipping on a timer
Synth knob
js
drag the knob — value readout follows rotation
value 50
18 · Component registry vibes
Shimmer skeleton → content
js
click to toggle loading state — the shadcn pattern
Theme token switcher
js
CSS-variable tokens swap the whole card theme
Card using theme tokens
primary · ● accent
19 · React Bits-style
Spotlight cursor
js
a light follows your cursor across the card
Staggered text reveal
js
click to replay the entrance animation
EVERY LETTER LANDS
click to replay
20 · Opinionated component kits
Neo-brutalist card
css
hard shadows, thick borders — hover to press
NEO-BRUTALISM
Big shadow. Zero subtlety. Hover me, I depress.
8-bit kit panel
css
stepped borders, console palette
★ PLAYER 1
HP ▓▓▓▓▓▓░░ 72
MP ▓▓▓░░░░░ 34
▸ ATTACK   ITEM
21 · Creative coding
Game of Life
canvas
Conway on a small grid, click to poke cells
Draggable math curve
canvas
drag the handle to bend the sine wave
22 · Music, synths & notation
Bytebeat player
webaudio
a one-line formula synthesized as sound — press play
(t*(t>>10)&42)*t
Playable piano
webaudio
click the keys — oscillator notes, no samples
23 · Games
Self-playing snake
canvas
a little AI hunts the food so you don't have to
Dice box
canvas
click to roll — tumbling physics-lite dice