Brand PeelBrand Peel (Beta)

Easing Curve & Motion Studio

Good motion is hard to describe until you see it move. Drag cubic bezier handles, watch the live preview, then export CSS variables, keyframes and motion tokens.
Open Box-Shadow Generator
Free Tool Design System
Tools Overview

Easing Curve & Motion Studio

Good motion is hard to describe until you see it move. Drag the easing curve handles, watch the dot run your timing live, then copy cubic bezier values, CSS variables, keyframes or motion tokens.

Catalog Context Part of Design System

See how this tool connects to category hubs, workflow paths, starter kits, and adjacent next steps.

Category HubBuild Stack

Brand System & Design Handoff

Build visual tokens

Starter Kits Including This Tool

Motion foundation

Design System

Adjacent Brand Foundations Brand Governance Developer Marketing
PreviousNext
Next Move - Strong resultDesign System

Recommended: Design Token Starter Generator

Motion tokens are ready. Capture them alongside color and type tokens.

Generate token baseline

Motion controls

Pick a personality preset or drag the curve dots to shape your own easing.

Drag the dots on the curve
Pull the two control points to shape the easing. Y can overshoot for spring effects.

Curve editor & preview

Drag the dots, watch the preview run your easing.

Drag the dots to shape the easing curve.

Live Preview

CSS Variables 

:root {
  --ease-brand: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-brand: 320ms;
}

Full export

Copy keyframes or motion-token JSON for your design system.

Keyframes 

@keyframes brand-motion {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

.brand-motion {
  animation: brand-motion var(--dur-brand) var(--ease-brand) infinite;
}

Motion Tokens 

{
  "ease": {
    "p1": {
      "x": 0.4,
      "y": 0
    },
    "p2": {
      "x": 0.2,
      "y": 1
    }
  },
  "cubicBezier": "cubic-bezier(0.4, 0, 0.2, 1)",
  "duration": 320
}