Flow AI · the dot
The amber dot opens its eyes.
The Flow AI mark is four dots rising to one amber dot. The amber dot is Flow Intelligence, and it is not a thing: it is a light, a core of intelligence with two eyes where the light is absent. The cream dots are the agents it sends out, and they are solid, because agents do tangible work. This page is the character, its physics, and the engine that runs it on this site, open source like everything else here.
Move your pointer around the stage: the eyes lead, the body follows a beat later. Leave it alone and it looks around on its own.
Eyes · round, high and left · State · idle
The run
One job, start to finish, told by the character alone.
This is the test a world-class character passes: can a visitor understand what the product does by watching the dot, with no copy? A brief arrives, it reads the site, it briefs three agents, they come back, it stages the work and waits for a human, the human approves, it rests.
Run · ready
- 00Brief receivednod
- 01Reading the sitescan
- 02Briefing three agentssplit
- 03Agents at workorbit
- 04Agents returnmerge
- 05Staged, waiting for youring
- 06Approvednod, squint
- 07Restidle
Physics
Why it feels alive now, and did not before.
Round two moved the eyes with a linear ease, which is how a cursor moves. Living things move in saccades and springs. Eight changes, all small, all borrowed from animation fundamentals rather than invented.
- Springs, not eases. The gaze is a damped spring (stiffness 140, damping 18), so it overshoots a hair and settles, like an eye.
- Saccades. Left alone, it picks a new point every 1.5 to 4 seconds and jumps there. Eyes never drift.
- Eyes lead, body follows. The body tilts toward the gaze a beat later, through a slower spring. That lag is what reads as weight.
- Perspective. Looking right, the right eye grows 6 percent and the left shrinks 12. A flat disc becomes a head.
- Anticipation. A blink widens the eyes 4 percent for 60 ms before it closes. Closes in 70, opens in 140. Nothing in nature is symmetrical.
- Eyes as absence. On the light core the eyes are the two places the light is not, so there is no catchlight: a light has none. Solid agent dots keep one cream point in the upper left of each eye, so they read as wet and round.
- Squash and stretch. Breathing stretches along the vertical by 1.2 percent; the nod squashes to 90 and recovers through the same spring.
- Looking down narrows the eyes. A 15 percent lid when the gaze drops, so reading looks like reading.
Eye studio
Twelve ways to draw two eyes. Click one to try it on.
Same body, same inks, same physics. The eyes carry the whole personality, so this is the decision that matters most.
Recommendation: round, high and left for Flow Intelligence, with a different style per agent so the ten are told apart at a glance.
Unmistakable
Eyes make it a face. Behaviour makes it yours.
Anyone can draw a dot with eyes. The behaviours come from what Flow AI actually does: reading sites, briefing agents, waiting for a human, working overnight in Auckland.
A signature blink.
Humans blink once. The dot blinks twice, fast, like a camera confirming focus. The smallest possible trademark.
It reads, line by line.
While working, the eyes sweep left to right and drop a line, as a person reads. This is what an AI-search audit looks like from the outside.
Attention goes where you are.
Focus the field and it looks at it. Type and it follows the caret. Stop and it looks back up at you.
Approval is a nod.
When a run is approved, the body dips once and the eyes squint. No tick mark, no confetti. A nod from a colleague.
It keeps your hours.
Between ten at night and six in the morning in Auckland the site's dot is in the dark state. Visitors on the other side of the world see that it works while you sleep.
The eyes are the trail.
The two cream dots nearest the amber one become the eyes when the trail folds in. Logo and face are the same four dots.
The mark and the pixel grid
The trail stays abstract. The character appears at 32 pixels and up.
Below 32 pixels the eyes are two smudges, so the header and footer keep the trail exactly as it is today. The favicon is the one exception: a single amber dot with eyes, drawn on the 16-pixel grid by hand rather than scaled.
The favicon, drawn on the grid.
A six-pixel-radius amber core with a soft edge, two two-by-two ink squares one pixel above the centre line, two pixels apart. Scaling the big face down produces grey mush; placing squares on the grid produces eyes that are crisp in every tab bar. The 32-pixel version uses the same drawing doubled, which is why it also stays crisp.
Ship as favicon.svg with shape-rendering="crispEdges" on the eyes, plus a 32 and 180 PNG for Safari and iOS.
Identifying the agents
Ten agents, ten cream dots, each with its own eyes.
Colour is off the table (three inks), so identity lives in the eyes. Each agent owns a style chosen for its job, so the Recents list reads without labels after a week. Hover any agent: it looks at you, then away, the way a colleague acknowledges you.
Option A from round two (one style, ten geometries) is kept in the API as a fallback for agents added later: FlowDot.mount(el, {agent: 'new-agent'}) derives a stable face from the name.
In context
Where it lives on the site.
Five places, all small, all in the existing layouts. The character is a presence, not a mascot shouting from the hero.
The demo window. Each run carries its agent's dot; the status carries Flow Intelligence looking at you until you approve.
The island header. The trail stays as it is. On the amber button, hover turns the ↗ circle into the dot for a second: a glance, not a gag.
Loading and empty states. The dot breathes and reads while it works; no spinner anywhere on the site.
The 404. It looks left, then right, then at you.
Lights off, only the eyes glow. For anything that happened while the person was away.
Spec and API
Everything a developer needs, on one page.
The engine running this page is the reference implementation: one file, no dependencies, 7 KB. Mount it on any SVG and it does the rest. The motion table is what it obeys.
| Moment | Timing | Curve | What moves |
|---|---|---|---|
| Gaze | spring k 140 · d 18 | critically damped | Eye position, up to 0.18 r horizontally, 0.14 r vertically. Far eye scales 0.88, near eye 1.06. |
| Body follow | spring k 40 · d 10 | underdamped | Tilt up to 6 degrees toward the gaze, one beat behind. |
| Saccade | every 1.5 to 4 s | instant target | New gaze target within ±0.5, ±0.35. Only when nothing else holds attention. |
| Blink | 60 · 70 · 140 ms | widen, close, open | Lids scale from the top. Double blink repeats after 260 ms. Every 3 to 6 s at rest. |
| Breathing | 3.9 s period | sine | 1.2 percent vertical stretch. 6× faster while working. |
| Nod | 600 ms | half sine | Body drops 10 percent of r and squashes to 0.9; lids to 0.4; then recovers through the body spring. |
| Split and merge | 1.1 s per dot, 0.55 s apart | cubic out | Through the goo filter (blur 2.2 at 100 units, alpha matrix 22 −10). Agents leave along the trail's diagonal. |
| Halo | 2.1 r · 0.85 to 1.0 | sine, half rate | The light breathes in intensity, not size. Brighter by 0.15 while waiting for review. Night state drops to 0.08. |
| Review ring | 2.9 s period | sine | A 1.5-unit amber ring breathes between r + 6 and r + 18, opacity 0.2 to 0.9. |
| Reduced motion | — | — | Gaze jumps without springs, no saccades, no blink, no breathing. States still read. |
API
<script src="/assets/dot.js" defer></script>
// Flow Intelligence, 48 px, in the demo window status
var fi = FlowDot.mount(document.querySelector('#status svg'), { role: 'flow', style: 'high' });
fi.set('review'); // idle · think · work · review · done · late · error
fi.lookAt(0.2, -0.1); // −1..1, overrides saccades until lookAt(null)
fi.nod(); // on approve
fi.blink(true); // double
// an agent, 28 px, in Recents. Style comes from the agent map,
// or is derived from the name for agents the map does not know.
FlowDot.mount(li.querySelector('svg'), { role: 'agent', agent: 'ai-search' });
// the dark state follows Auckland time on its own
FlowDot.autoNight(fi); // 22:00–06:00 Pacific/Auckland
// every mounted dot shares one requestAnimationFrame loop and
// pauses off screen. Nothing is hidden if the script fails:
// the SVG you mount can carry a static dot as its fallback.
Source of the engine on this page, for the build: show dot.js
Rules
What keeps it cute instead of corporate-mascot.
Always
- Two eyes, nothing else. No mouth, no arms, no eyebrows, no hat. Expression comes from eye shape, direction and blink timing.
- Light and matter. Flow Intelligence is a luminous amber core, the one glow the brand permits, because it is the one thing on the site that is not an object. Agents are solid cream. Eyes are ink, or the absence of light.
- Asymmetric eyes. The right eye is 20 percent larger. Symmetry reads as an icon; the imbalance reads as a face.
- The double blink, every 3 to 6 seconds. Never on a visible loop.
- Springs and saccades. Nothing glides. Eyes jump, bodies settle.
Never
- No eyes under 32 pixels, except the hand-drawn favicon.
- No second character. Agents differ by eyes, not by colour, clothes or body shape.
- No talking. It never gets speech bubbles. The thread in the demo window is the product's, not the character's.
- No sad state. Failure is flat eyes and a tilt, not tears.
- No motion for its own sake. Every animation marks a real state: working, waiting, done, away.