arqobrand / motion · v01 · 2026.05.15
    ← /brand·/brand/logo·/brand/color·/brand/type
    04 · motion

    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.

    §1.0PrinciplesFour 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.
    §2.0The 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.