Field notes / systems 01—05

Motion studies

Five interactive systems, taken apart from visible behavior to frame budget. Each note follows one question through the algorithm, the design trade-offs, and the point where expressive motion becomes interface noise.

Enter the live atlas Browse production patterns
Scope
Five browser-native motion systems
Method
Behavior → constraint → application
Release
5 of 5 studies published

Directory / 01—05

The systems under review

  1. Sparks

    A catalog, rebuilt as a force field

    Can an index reveal its structure before a visitor begins to browse it?

    Sixty-five library entries become particles that gather, repel, connect, and settle. The study follows the choices that keep a data-shaped hero expressive without turning navigation into noise.

    Index particle systems, force fields, damping, proximity graphs

    Read study

  2. Ink Current

    The current is designed by its eraser

    Which should disappear first: the motion or its visible trace?

    Ink Current stores no stroke. A bounded tracer population draws one segment per frame; velocity damping and a time-corrected framebuffer wash decide how long the gesture remains visible.

    Index temporal compositing, direction fields, pointer injection, decay budgets

    Read study

  3. Elastic Fabric

    A surface made from shared displacement

    How much motion should neighboring elements inherit from one another?

    Elastic Fabric is not a cloth or constraint solver. Its 195 or 247 points are tethered home, coupled through four-neighbor displacement differences, and strongly damped.

    Index coupled springs, graph Laplacian, damping, connected motion

    Read study

  4. Morphogenesis Garden

    The solver makes structure. The palette makes emphasis.

    Which choices remain authored when no frame is drawn by hand?

    Nine authored concentration patches—fixed in the default field and deterministically varied by seed—enter a two-field reaction–diffusion update. The layout, finite-difference stencil, fixed boundary, 32,768-cell ceiling, staged warm-up, and copper transfer determine what appears.

    Index reaction–diffusion, finite-difference stencil, deterministic initialization, palette transfer

    Read study

  5. Gesture-to-Easing

    The route survives. The timing is rewritten.

    What can easing express after the original gesture timing is deliberately discarded?

    The field accepts movement beyond four pixels, keeps the latest 160 points, and caches cumulative distance while retaining timestamps that the comparison does not replay. The default 4.3-second clock maps linear, cubic ease-out, and clamped damped-cosine timing over one polyline.

    Index spatial sampling, arc-length parameterization, timing functions, endpoint clamping

    Read study

Method / publication threshold

The note begins where the demo stops.

A finished animation proves only that a frame can move. A useful study has to show what drives the movement, which values carry the visual character, what the browser pays for each frame, and where the same idea becomes distracting or inaccessible.

Notes are published individually after the implementation, prose, internal links, mobile layout, and reduced-motion result agree with one another. Unfinished records stay out of search and never masquerade as complete articles.

Observe
Describe the behavior before naming the technique.
Measure
Trace forces, timing, budgets, and failure modes to real implementation choices.
Apply
State when the pattern helps a product—and when stillness would work better.