Cloth

01 / 08

Everything here is live HTML

The page is the material.

Text, links, layout, and interaction remain part of the document. Cloth changes how the interface behaves without replacing what it is.

Pinned
Left edge
Input
Pointer / Touch
Surface
Full viewport
Fallback
Live DOM

Asciify

02 / 08

The document remains selectable

The page becomes type.

A cursor-following lens samples the live interface and rebuilds it from packed 5×5 glyphs while the original HTML stays intact underneath.

Lens
Cursor
Charset
ASCII
Cell
5 × 5
Fallback
Live DOM

Liquid

04 / 08

Pointer velocity becomes fluid force

The page remembers motion.

A live WebGL fluid field follows the pointer, leaving a colored trail that warps the interface without turning the underlying document into an image.

Field
Fluid
Input
Pointer drag
Trail
Persistent
Warp
Live content

Peel

06 / 08

Two independent DOM layers

There is another page underneath.

The foreground curls away from the right edge to reveal a second live layer. Both surfaces remain ordinary HTML rather than baked textures.

Edge
Right
Input
Cursor
Reveal
320 px
Under
Live DOM

Blaze

07 / 08

Heat distortion rises through live HTML

The page is already burning.

Sparks, smoke, and heat shimmer rise from the bottom edge. The fire reacts visually with the content while links and text remain part of the page.

Origin
Bottom
Layers
Five
Distortion
Heat
Palette
Ember

Droplets

08 / 08

A wet pane sits above the document

The page sits behind weather.

Running and static droplets refract the interface like rain on glass. Pointer movement wipes a temporary clear path without interrupting the live content.

Weather
Rain
Input
Pointer wipe
Optics
Refraction
Surface
Fogged glass

Frost

09 / 08

Ice grows over the live document

The page freezes over.

A textured pane of ice blurs, tints, and refracts the interface. Hover melts an irregular opening before the surface slowly freezes back into place.

Layer
Ice
Input
Hover
Recovery
Refreeze
IOR
1.31

Particle Reveal

10 / 08

Dust resolves into readable interface

The page gathers into focus.

The unrevealed interface disperses into fine particles. Around the cursor, the original HTML resolves into a crisp, readable region with a soft chromatic edge.

Medium
Particles
Input
Cursor
Reveal
460 px
Edge
Soft