Lab 002 · Thinking orb
A loading state you can hold.
Most loading indicators are a promise that something is happening. This one shows what kind of thing: a globe being scanned for searching, a constellation wiring itself for connecting, bands that scramble and click back for solving. Nine states, each a small piece of geometry that turns while the wait lasts.
It is the open-source thinking-orbs component (MIT, Jakub Antalik) taken off React. The engine is the package's own geometry, kept verbatim. What changed is the wrapper: a <thinking-orb> element and a mountOrb() call, plain 2D canvas, no build step, nothing to install.
Then one addition the package doesn't have: you can pick it up. Hold it and it stops. Drag it sideways and it turns through its own motion. Let go and it coasts back to its own pace.
In use on this site: the Work intake button shows a 20px searching orb while your answers send.
Hold one
Hold to stop it. Drag sideways to spin it. Let go to fling it. Arrow keys nudge, Home resets.
ink
All nine
Every state at 64 and at 20, the sizes it ships at. The big ones can be held too. The light cell takes its theme from the page around it.
What it is made of
Holding it moves time, not the picture
Every state turns as its own clock runs. So a drag doesn't rotate an image; it moves that one orb's clock forward or back. Shading, depth order and each state's own motion stay exactly what the engine draws, at any speed you throw it. A fling decays exponentially, and it stops once it is too slow to see.
It costs nothing while you aren't looking
Every orb pauses offscreen and when the tab is hidden, then resumes in phase, because all of them share one clock. Device pixel ratio is capped at 2. Reduced motion gets one representative still frame, and a drag can still turn it.
Try the real wait
The one place it works for a living is the intake button. This one only pretends:
The reel was drawn by the same engine, frame by frame, in a headless browser. Nothing in it was animated by hand.