frilo / motion library · v1.0
The mark, in motion
Two components built from one mark. Thinking: nine agent states for AI and voice interfaces. Coin Bloom: the brand animation, where sixteen edge-on coins open and return to the logo. Monochrome, dependency-free, one shared clock.
Nine states
64 px for the avatar slot, 20 px inline with text. Each size is tuned separately, not scaled.
Workingstate="working"
A coin flip orbits the ring with a loader tail. The canonical spinner.
Searchingstate="searching"
A scan beam sweeps round; coins turn to face it and dim behind it.
Solvingstate="solving"
Coins scramble in angle, turn and distance, then snap back into the mark.
Listeningstate="listening"
Rays lengthen with a travelling waveform. Takes the live mic level.
Connectingstate="connecting"
The mark assembles token by token, each landing edge-on, then resets.
Weavingstate="weaving"
Two strands braid round the ring, one pushing out as the other pulls in.
Composingstate="composing"
An undulating sash of half-open coins. Rises with the voice level while speaking.
Breathingstate="breathing"
The mark breathes in size and light; tokens stay edge-on and crisp. Idle.
Shapingstate="shaping"
Tokens gather into four stacks, hold, then fan back out into the mark.
Mapping
What each orb state did, and how the mark says the same thing.
| State | Orb today | frilo mark |
|---|---|---|
| working | Particles on tilted orbits | A coin flip orbits the ring with a loader tail. The canonical spinner. |
| searching | A scan meridian sweeps a globe | A scan beam sweeps round; coins turn to face it and dim behind it. |
| solving | Bands scramble, then click back | Coins scramble in angle, turn and distance, then snap back into the mark. |
| listening | A waveform rolls through rings | Rays lengthen with a travelling waveform. Takes the live mic level. |
| connecting | A constellation wires itself | The mark assembles token by token, each landing edge-on, then resets. |
| weaving | Three strands plait a sphere | Two strands braid round the ring, one pushing out as the other pulls in. |
| composing | An undulating multi-band sash | An undulating sash of half-open coins. Rises with the voice level while speaking. |
| breathing | A ring slowly morphing | The mark breathes in size and light; tokens stay edge-on and crisp. Idle. |
| shaping | Dotted outline: circle, triangle, square | Tokens gather into four stacks, hold, then fan back out into the mark. |
Coin Bloom
The logo animation. Every ray is a coin seen edge-on; the loop opens them on an expo curve and lands back on the exact mark.
Eighteen variations across tempo, stagger order, turn, space and proportion live in the Motion Lab, with a bench to tune and export each one.
Open the Motion LabInstall
One script, no build step. Or the React wrapper, which keeps the thinking-orbs props so the import is the only change.
<script src="/lab/frilo-thinking.js"></script> <frilo-thinking state="searching" size="64"></frilo-thinking> <frilo-thinking state="working" size="20"></frilo-thinking>
- import { ThinkingOrb } from 'thinking-orbs';
+ import { ThinkingOrb } from './frilo-thinking-react';
<ThinkingOrb state="listening" size={64} level={mic} />API
Attributes on the element, props in React.
| Prop | Type | Default | Notes |
|---|---|---|---|
| state | working · searching · solving · listening · connecting · weaving · composing · breathing · shaping | working | Same nine verbs as the orbs. |
| size | 64 · 20 | 64 | Two tuned designs: 16 coins at 64, 8 heavier coins at 20. Other sizes use the nearest tuning. |
| speed | number | 1 | Multiplier on the state's tuned tempo. |
| paused | boolean | false | Freezes on the current frame. |
| theme | auto · dark · light | auto | Auto reads an ancestor data-theme or dark/light class, then the OS setting. Live. |
| level | 0 to 1 | none | New. Voice amplitude for listening and composing. Set el.level from a mic analyser every frame; it costs no re-render. |
| aria-label | string | per state | Overrides the default label, for example "Analysing repository…". |
Accessibility and performance
- Announced. role="img" with a label per state.
- Reduced motion. Renders one representative still frame per state, and still follows the theme.
- One clock. Every instance shares a single animation frame and stays in phase.
- Pauses itself. Offscreen instances and hidden tabs stop drawing.
- Real 3D, no WebGL. Each ray is a token with two faces and a shaded rim, drawn with CSS 3D transforms on the GPU. About 12 KB.
frilo motion library · Sep 2026 · Orlando Jimenez