Motion

The sphere is a sentient being; the spirals are its intelligence and its tools. That's it — everything else is an add-on. The lobes may become anything the being needs — an eye, a wing, an arrow — so long as the loop brings them home. Every state passes through the exact logo once a cycle: the same path string the favicon uses, character for character.

Geometry layer — the logo is redrawn

Each frame re-evaluates r = r₀·e^(θ·lnφ/(π/2)) with different numbers, so these are not the logo being pushed around — every in-between frame is a real golden spiral the generator would have shipped. Two of the three parameters are free under the 2% footprint law: the lobe is normalised to its reach, so the arm can coil and uncoil without the mark growing by a thousandth of a unit.

Capability layer — the lobes stop being lobes

The sphere is a sentient being and the spirals are its intelligence and its tools — that is the whole doctrine, and everything else is an add-on. The lobes become whatever the being needs (a tool may even root under the body: a wing, a tail), so long as the loop brings them home. Each of these leaves the logo, does a job, and returns to the exact path the favicon uses.

Examples, not the set. Every one of them is a SWEEP — an angular run, an outer radius, an inner radius — which is the engine that keeps the morphs fluid and correspondence-free. Since v8 the sweep is machinery, not aesthetics: a shape earns its place by being instantly nameable, and the best ones here ignore the spiral entirely. Mechanism in src/lib/capability-shapes.ts; adding one is a function, not a rebuild.

Attending — the sphere is an entity

The arm un-draws into its tail, tucks behind the pupil, and the almond eye is born hidden and scales out around it — the being draws its intelligence in and re-expresses it. Thin strokes, corners meeting on the midline, the pupil floating in the dark aperture; blinks squash only the aperture and ride the saccades. Rebuilt to the designer's frames, measured to the unit, after the first build was judged much worse — and was.

Transform layer — the logo is moved

The original nine, on the Web Animations API. Still the right tool for most states: a breath is a scale, and nothing is gained by re-cutting a curve to do it.

flappy — at the sizes it has to survive

favicon 16
UI 24
web 64
presentation 200

flappy — the morph, as stills

One cycle, sixteen frames, evenly spaced. This is how the reference animation was read — frames show what motion hides. Look for the gather: the arms should draw in before they change and grow back out, rather than tweening across at full size.

0.00
0.06
0.13
0.19
0.25
0.31
0.38
0.44
0.50
0.56
0.63
0.69
0.75
0.81
0.88
0.94

The parameter space, held still

Every geometry state above is a walk through this box. Drag to see where the edges are — the point at which an arm stops reading as an arm is a design fact, and it is easier to find with the frames standing still.

exactly the shipped mark

{"k":0.45,"reach":450,"biteR":258}

The same mark, doing jobs

Continuity is not felt on a swatch card. It is felt when the thing that thinks in the header is the thing that waits in the button and the thing that listens in the composer — the same geometry, at 16 and 20 and 28px, never a second icon set.

reply pending — thinking
amma lai ke pathaune?
सोच्दै…
voice open — attend (halo widening)
Listening…End

No microphone glyph, no waveform. The mark opens.

acting — tool (arms reach in turn)
SendingSearching

Where every product in the world puts a spinner.

app opening — unfurl, at chrome size
Sathistatic, for reference

The two are the same path at rest — that is the contract.

reply arriving — stream
आमालाई सन्देश: “शुभ बिहानी, आमा…

Where a caret would blink: the arm sending its packets is the text arriving.

connection lost — offline
Reconnecting…

Reach is what the network takes; the self stays lit. No cloud with a slash through it.

reading your document — lookRead
बुबाको रिपोर्ट पढ्दै…

Immediately obvious, which is the designer's argument in one tile: eyes need no caption.

The being wears its tools — a bird, at three sizes

The body IS the disc — the being itself, untouched. A membrane wing pinned at a shoulder inside the body heaves and tucks; a forked tail opens left; a beak points right; so the bird faces right, like the side-scroller the example always was. It arrives through the self: the arms melt into the dot, and the bird grows back out of it.

The bob is a CSS translate on the wrapper — the only motion on this page that is not the mark's own geometry, and it is outside the mark on purpose.

On dark, and inverted

Provenance. boot, retry, stream, offline, recurse, the look family and the rebuilt sync all arrived as suggestions in a designer's library of thirty-three (media/sathi-motion-library.html), translated into this geometry rather than copied. v6 records the first reading; v7 records the correction — the rules were a starting point, the sphere is an entity, and two of v6's declines were wrong — in brand/MOTION_v1.md.