Six states. One job each.

Built on CSS keyframes, same timing and easing curves as Framer Motion presets. Each state plays one role; the default state of the mark is no motion at all.

PrinciplesFour rules. Break one and motion stops feeling brand-coded.

01 · One state at a time. Never combine.
02 · Motion is the exception. Default is static.
03 · Easing curves match Framer Motion presets, engineered, not freehand.
04 · Sub-300ms for interactive feedback. 1.6s–3s for narrative / load.

The statesHover to test the hover state. The rest loop.

Draw-in

3.0s · ease-in-out

Stroke traces the spiral, then fill blooms behind it. First-paint on cold loads + brand cinematics.

Reveal

2.4s · clip-path · cubic

Circular wipe from center. Page transitions, modal opens, content swaps.

Idle pulse

1.8s · ease-in-out · loop

Gentle breath when the app waits on the writer. Empty states, ready surfaces.

Success

2.4s · spring green flash

Brief tint to Spring green + slight scale-up. Save confirmed, export ready, merge accepted.

Error

1.6s · shake · 5 stops

Horizontal shake + red tint. Plays once on trigger, looping here for spec only.

Hover

0.4s · spring · interactive

Slight scale and counter-rotation on cursor over the mark. Hover the icon → springs back.

Thinking markThe spiral in dots, for when Arqo is working for you. Two rows of fine dots per arc from 44px up, one row below. Canvas, not keyframes. Ink is currentColor; at rest for reduced motion.

thinking

A swell winds around the eye of the spiral. Arqo Assist at work: Scene Surgeon, Continuity Tracker.

writing

The pen lays the spiral down over its ghost, holds, lifts it off. While AI drafts lines.

working

The mark sways on its axis, the curl standing proud. Long jobs: imports, exports.

forming

A dotted orb winds in to become the spiral, holds, lets go. The in-app loading screen, while a script opens.

listening

Rings of sound roll out from the eye. Voice input.

searching

A scan line sweeps the mark. Search, memory, the Library.

arqo

Loading…