Motion System: Warp

Category: Developer Tools / Terminal Fast, technical, and purposeful — motion that respects the command line while elevating it.

Motion Philosophy

Warp is a terminal first and a product second. Its motion language reflects that priority: transitions are fast enough to never interrupt a developer's flow, but deliberate enough to communicate that this is not a raw TTY. The goal is to feel like a precision instrument — not a consumer app, not a toy, not a website. When something moves, it moves because it needs to, and it stops as soon as it can.

The dominant metaphor is technical precision, not physical warmth. Where other tools might use bouncy springs or playful overshoots, Warp uses critically-damped or slightly under-damped motion that reads as controlled and exact. Neon accent colors (the teal/cyan brand palette) are used sparingly in transitions — a brief flash on a newly connected AI session, a pulse on a running process — but these accents reinforce the terminal aesthetic rather than decorating it.

AI-driven features introduce a unique constraint: when the AI streams a response, the text rendering itself is the animation. Nothing else should compete with that. Input blocks enter with a subtle fade; output blocks appear cleanly. The motion system deliberately steps aside when the content is already dynamic, reserving animation for structural changes: panel transitions, command palette entrance, block focus, sidebar navigation.

Duration Scale

Easing

The ease-out curve front-loads motion so elements appear to arrive almost instantly and decelerate to rest. This supports the perception of speed even at 180ms — the first 30ms does most of the work.

Spring Configs (Framer Motion)

• Default: stiffness: 380, damping: 32, mass: 1
• Snappy (command block entrance, panel snap): stiffness: 520, damping: 36, mass: 0.9
• Tight (focus transitions, tab indicator): stiffness: 650, damping: 42, mass: 0.7
• Resize (panel drag handles, block resize): stiffness: 280, damping: 30, mass: 1.1

All configs are critically damped or above. No bounce, no oscillation. The Resize config uses slightly higher mass to simulate the inertia of dragging a real UI boundary.

Stagger Patterns

• Command palette results: 12ms between each result row
• Block list on session open: 18ms between each command block
• Settings sections: 25ms between each section card
• Notification stack: 30ms between stacked toasts

Stagger applies only on initial render or explicit load events. Re-filtering a command palette resets to no-stagger — each result snaps in at full opacity to avoid perceived lag on fast typists.

Enter / Exit Patterns

Fade + Slide (command blocks, AI output blocks)

enter: opacity 0→1, translateY 4px→0, duration: fast (120ms), ease: ease-out
exit: opacity 1→0, translateY 0→-3px, duration: micro (80ms), ease: ease-in

Scale Pop (context menus, tooltips, inline suggestions)

enter: opacity 0→1, scale 0.96→1, duration: fast (120ms), ease: ease-out
exit: opacity 1→0, scale 1→0.96, duration: micro (80ms), ease: ease-in

Command Palette (full overlay)

enter: opacity 0→1, scale 0.97→1, translateY -8px→0, duration: default (180ms), ease: ease-out
exit: opacity 1→0, scale 1→0.97, translateY 0→-8px, duration: fast (120ms), ease: ease-in

Sidebar Panel

enter: translateX -100%→0, duration: slow (250ms), ease: ease-out
exit: translateX 0→-100%, duration: default (180ms), ease: ease-in

Neon Accent Flash (AI session connect, real-time events)

keyframes: opacity 0→1→0.6, background cyan→transparent
duration: 600ms, ease: ease-in-out, fill: forwards

Interaction States

• Hover: Background fill transition at 80ms ease-out. No scale on row items — scaling feels too consumer. Icon color shifts to full opacity from 60% via CSS transition.
• Press/Active: scale(0.98) over 60ms Default spring. No overshoot. Immediate release on pointer-up to same spring.
• Focus: Focus ring appears at 80ms ease-out with a faint neon border color. Keyboard-initiated focus skips the transition entirely (0ms) — respecting the terminal user who never touches a mouse.
• Block Selection: Selected command block gets a left border accent appearing at 80ms ease-out. Background fill appears simultaneously with no separate transition.
• Loading / Running Process: Left border pulses using a CSS animation: border-color cycles between accent and transparent over 1200ms linear, infinite. No opacity changes — the content area must remain fully readable.
• AI Streaming: No animation applied to streaming text. The text rendering itself communicates activity. A blinking cursor at the stream head uses a 530ms linear step-end blink — matching classic terminal behavior.

Rules

• Respect prefers-reduced-motion. All durations collapse to 0ms; transforms are disabled. The streaming text cursor blink is exempt — it is a functional indicator, not decoration.
• Never animate text content directly. Font size, letter-spacing, and color changes on rendered terminal output are instantaneous. Motion belongs to structural elements only.
• Exit animations must be shorter than enter animations. The terminal clears history fast; the UI should follow.
• Do not animate during active command execution. While a command is running, suppress all non-critical transitions. The running state is communicated by the process indicator, not by surrounding motion.