The concept behind EXP·001 Kinetic Warm — five animated illustrations explaining how it moves

Field Notes · The making of EXP·001

How it moves.

Five small physics tricks stacked into one warm hero. None of them is heavy — together they make a page that feels alive. Here's each one, drawn in motion.

01 · proximity repel

Letters that dodge

Every glyph measures its distance to the cursor each frame. Inside a radius R, it's pushed away with force 1 − d/R and eased back when you leave. Watch the vectors — the cursor here is on autopilot.

02 · drifting light

A living background

Three soft radial orbs ride slow sine paths on a canvas. No images, no video — just a few sin/cos offsets per frame, so the warmth quietly breathes behind everything.

03 · magnetic pull

The button leans in

Within a 150px field the call-to-action translates a fraction of the way toward the pointer, then springs home. A tiny gesture that makes the whole hero feel intentional and responsive.

04 · glass & grain

Depth without noise

A frosted panel (backdrop-filter: blur) floats over the warm mesh for hierarchy, and a 5% SVG-turbulence grain sits on top so nothing feels too clean. Apple's Liquid Glass, restrained.

05 · living weight

One file, every weight

DM Sans is a variable font, so the whole 100–1000 range interpolates from a single file under ~80KB. Expressive type that stays fast — here the wght axis is just breathing on a loop.

Weight

Five tricks. One warm page.

Open the live experiment