​
Motion

Motion should make Clay feel responsive and alive without slowing work. Animation is a way to communicate state, cause, and relationship between surfaces. The tokens below define how fast Clay moves and how its curves feel across themes, while the principles describe the behaviors those tokens serve.
Motion is part of the visual contract, not decoration. Every duration and easing choice should make the interface feel more oriented, never more distracted.

​
On this page

​
Tokens

These are the durations and easings that ship with Clay. Product code should reference these tokens by name rather than hardcoding values so pacing stays consistent across themes and surfaces.
TokenValueUse
motion-fast150msPress feedback, toggle changes, chip selection, taps.
motion-standard250msHover lift, card lift, tab changes, default UI transitions.
motion-slow400msDialogs, consent reveal, drawers, sheets, expanded surfaces.
ease-claycubic-bezier(0.2, 0.8, 0.2, 1)Soft energetic movement for most product transitions.
ease-privatecubic-bezier(0.4, 0, 0.2, 1)Calm private-mode movement for intimate and reflective UI.

Fast for touch

150ms is the floor for taps and toggles so feedback feels instant. Anything slower risks looking unresponsive on mobile.

Standard for surfaces

250ms is the default for cards, hovers, and tab changes. It is fast enough to keep work moving and slow enough to feel considered.

Slow for decisions

400ms is reserved for dialogs, drawers, and consent reveal where the user is making a choice and needs to feel the surface settle.

Two easings, one mood

ease-clay carries energy for the Acid Lime and Editorial themes. ease-private slows and softens the Dark Plum theme so private surfaces feel held, not animated.

​
Principles

Motion follows behavior, not novelty. Each rule below explains why the system moves the way it does.
1

Show state, cause, and relationship

Use motion to communicate what just changed, why it changed, and how the current surface connects to the next one. Motion is information first.
2

Buttons compress slightly

Pressed buttons should feel physical. A small compress or settle reinforces the tap and signals that the action was received.
3

Cards gently lift on hover

Cards elevate with motion-standard and ease-clay so the user can tell they are interactive without the surface feeling jumpy.
4

Dialogs settle into place

Dialogs, drawers, and consent reveals should arrive with motion-slow and ease into rest. The surface should feel placed, not punched in.
5

Mascots breathe subtly

Mascots carry continuous low-amplitude motion so the platform feels alive between actions. The breathing should never compete with the work in front of the user.
6

Waiting states use the mascot

Long-running operations can show the mascot stretching or looking around instead of a generic spinner. This keeps waiting legible and on-brand.
7

Success can celebrate briefly

Success states may include a short celebration, especially when the user reached a meaningful outcome. The celebration should resolve quickly and not delay the next step.
8

Error states comfort or clarify

Errors should help the user understand what happened and what to do next. Avoid language or motion that scolds, shames, or dramatizes a reversible mistake.
9

Keep product transitions inside 150 to 400ms

Anything faster than motion-fast will feel jumpy. Anything slower than motion-slow will interrupt the user’s flow on routine actions.
10

Use one expressive entrance on brand surfaces

Brand and moodboard pages can use one expressive entrance to set tone. Avoid constant scroll fades or staggered reveals on every section of every page.
11

Respect reduced motion

When the user prefers reduced motion, replace movement with opacity changes or instant state changes. The product should remain fully usable without animation.
12

No abrupt snaps

Nothing should snap abruptly unless the user has explicitly requested reduced motion. Snaps feel broken even when the underlying state change is correct.
When in doubt, slow down. It is easier to speed up a calm interaction than to make a fast one feel deliberate.
Consent, privacy, and serious decisions deserve their own motion treatment. The Clay rules around mascot expression apply here too: mascot motion is slower in consent contexts to avoid implying playfulness about permissioned choices.
Do not use elastic bounce, spring overshoot, or playful easings on consent, privacy, sharing, permission, or irreversible action surfaces. Mascot motion in consent contexts uses a 400ms reveal with no bounce so the moment stays clear and reversible.
SurfaceDurationEasingAllowed mascot motion
Consent check400msease-privateSlow reveal, no bounce, no shake.
Permission toggle150msease-clayBrief neutral expression only.
Sharing confirmation400msease-privateStill or slow settle, no reaction.
Destructive confirmation400msease-privateCalm, no celebration, no shake.
Reduced motion (consents)0mslinearInstant state change, no motion.

​
Mascot Motion

The mascot is the most expressive motion surface in the product. Its durations are tuned separately from product transitions so it can feel alive without making the UI feel busy.
StateDurationCurve / shapePurpose
Idle breathe2400msVery low amplitude loopContinuous presence between user actions.
Thinking pulse900msTwo pulses maximumSignal that Clay is processing or composing.
Found-fit pop150msLift then 150ms settleCelebrate a relevant opportunity or recommendation.
Consent reveal400msNo bounce, no overshootSurface a permission or privacy decision calmly.
Mascot motion should never distract from the work. If the breathing, pulse, or pop competes with reading copy or completing a task, the surface has too much mascot motion for that context.

​
Theme Behavior

Themes change mood without changing layout or pacing rules. The same motion-standard duration can feel different depending on which easing the theme uses.

​
Acid Lime

  • Default ease: ease-clay
  • Default duration: motion-standard (250ms)
  • Mascot breathes with slightly higher amplitude
  • Presses feel energetic but grounded

​
Editorial / Purple + Orange

  • Default ease: ease-clay
  • Default duration: motion-standard (250ms)
  • Page-level entrances may be expressive, but in-product controls stay standard
  • Mascot uses stronger poses, same durations

​
Dark Plum

  • Default ease: ease-private
  • Default duration: motion-slow (400ms) for surfaces, motion-standard (250ms) for taps
  • Mascot breathes slower and softer
  • Celebrations are muted; emphasis goes to settle, not movement

​
Reduced Motion (any theme)

  • Replace movement with opacity changes
  • Keep state changes instant and visible
  • Mascot breathing is paused or removed
  • All durations collapse to 0ms

Design language

How tokens, type, and shape language come together across themes.

Themes

How Acid Lime, Editorial, and Dark Plum shift mood without changing layout.

Mascot

Anatomy, expressions, accessories, and the state behind every motion.

Components

Button, card, dialog, and input behavior that motion supports.

Introduction

Start here for the Clay product thesis and what the platform is for.