Studio

Glass typeshader · sdf

Type anything and pick a font. The letters are turned into a distance field and wrapped into glass in a shader: thin fonts grow into round tubes, heavy ones puff up like balloons. Light bends through them, splits into colour and catches star-shaped glints.

Press Play to write it on. A inflates the letters one by one. B works out strokes from the letter shapes (thinning them to a skeleton, then ordering the pieces like a hand would), so it works with any font. C writes with real stroke order: a single-line hand drawn for this page, and real stroke order for Chinese. D uses ready-made stroke templates for four script fonts, so the writing joins up like real cursive.

Light pushfluid

A hidden fluid simulation bends slanted beams of light instead of drawing smoke: swipe and the rays smear, fringe into red, green and blue, and leave a glow that slowly settles. Pick a palette, or mix your own sky, horizon and light.

Technique: Jos Stam’s Stable Fluids (1999), used here only to displace the image.

Text scrambledom

Letters arrive as coloured noise and settle one by one, line after line.

A terminal-era trope; Justin Windle’s Text Scramble on CodePen is the classic web reference.

Fluid dyefluid

The same solver, this time pouring coloured light into the flow: it curls, spreads and pushes the type behind it apart.

Pavel Dobryakov’s open-source WebGL Fluid Simulation made this look popular on the web.

Lens flareshader

Two takes on the same optics. A, cinematic: the light is the subject, on a dark field, with a long anamorphic streak, oval ghosts, chromatic rings and a wordmark that only shows where the light falls. B, backlit: shot into the sun through out-of-focus leaves, with bokeh glinting through the gaps, a haze that washes out the contrast, and a flare that flickers as the leaves sway across the sun.

It imitates what real lenses do when they are pointed at something bright.

Variable typefont axes

Instrument Sans has weight and width axes: letters near the cursor swell, widen and turn amber. Leave, and a slow wave runs through the line.

Variable fonts have worked in every major browser since 2018.

ASCII lightcanvas

A moving field of light, redrawn as characters: the brighter it is, the denser the glyph. The cursor is a lamp and a click sends out a ripple.

A nod to the ASCII art of early computers.

Tilt & glarecss 3d

Cards lean toward the cursor, lift a little and catch a moving highlight and a holographic sheen, like something you could hold.

Magnetic dotssprings

A grid of dots on springs: the cursor pushes them away and lights them up, and a click sends out a shockwave.

Pixel dissolvetransition

From wherever you click, one page dissolves into the next cell by cell, with a bright seam along the edge.

A nod to the transitions of early video games and TV.