The Lab · free tools

Motion you can feel before you ship

Interactive playgrounds for the craft behind great interfaces. Tune a spring, sketch a scroll sequence, forge a gradient — then export production-ready output. All tools run in your browser; nothing is uploaded.

Easing Lab

Watch your curve race a linear dot, then copy the exact cubic-bezier for CSS, Tailwind or JS.

Curve preset

Duration

your curve

linear (baseline)

transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); /* 1100ms */

Spring Lab

A real mass–spring–damper integrator. Pull the ball, watch overshoot, then read the settle time.

Stiffness180Damping14Mass1.0×

release point → rest

Press pull & release to startphysics: F = −kx − cv, integrated per frame

{ stiffness: 180, damping: 14, mass: 1 } // ~—ms to settle

Scroll Lab

Sketch scroll choreography on a playhead: drag it, set your trigger points, and export the recipe with exact thresholds.

or scrub:32%enter

0%25% enter55% pin80% exit100%

Pinned hero

A card that enters, pins, then hands off to the next section.

Trigger points

Enter completes25%Pin begins55%Exit begins80%

belowenterpinexit

ScrollObserver recipe (from your choreography)
  enter completes ~ 25%
  pin window        25% → 55%
  pin ends          55%
  exit completes  ~ 80%–100%

  // import { onScroll } from "your-scroll-lib"
  // hero element:
  enter: opacity 0→1 · translateY 60→0  (cubic-bezier(.16,1,.3,1))
  pin:   scale 1.06 · subtle glow, sticky
  exit:  opacity →0 · translateY →-40
  // honor prefers-reduced-motion: jump to final state

Gradient Forge

Pick three hues and an angle; the harmony guardrail nudges you toward tasteful spreads.

Hue A258Hue B198Hue C320Angle115°

hsl(258 85% 60%)hsl(198 90% 62%)hsl(320 80% 66%)60° hue step

background: linear-gradient(115deg, hsl(258 85% 60%), hsl(198 90% 62%), hsl(320 80% 66%));

Also in the Lab

Smaller tools for the decisions that surround motion: stagger math, radius shapes, shadow stacks, filter checks.

Timing-chart composer

Author an enter → dwell → exit timeline and read it as CSS keyframes.

Enter420ms

Dwell900ms

Exit280ms

keyframes.css

@keyframes motif-timing {
  0%   { transform: translateX(0); opacity: 0; }
  26.25% { transform: translateX(60px); opacity: 1; }
  82.5% { transform: translateX(60px); opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}

.timing {
  animation: motif-timing 1600ms;
}

Stagger calculator

Input N items and read the per-item delay offsets for one wave.

Items (N)6First delay60msStep50ms

60110160210260310

Wave length 310ms · per-item offsets in ms.

stagger.ts

const items = [...document.querySelectorAll(".wave > *")];
items.forEach((el, i) => {
  el.style.transitionDelay = `60 + i * 50ms`;
});
// or in CSS: transition-delay: 60ms, 110ms, 160ms…

Background-position painter

Drag the two stops on the canvas; the gradient direction follows your hand.

Stop AStop B

Direction angle ≈ 131° · stops at (15%, 20%) and (85%, 80%).

background.css

background: linear-gradient(131deg, #8b5cf6 0%, #22d3ee 100%);

Text-animation lab

Compare scramble, typewriter and wipe on your own copy before choosing.

Copy less. Ship more.

Tip: scramble suits short claims, typewriter suits code/terminal scenes, wipe suits hero moments. See the library's scramble-text and wipe-reveal.

Colour-ramp checker

Build an accessible ramp — every step is measured against the dark surface, live.

Ramp baseSteps7

#000083

✗1.2

#1a1da8

✗1.6

#3e41cc

✗2.6

#6366f1

large4.3

#888bff

AA ✓6.6

#acafff

AA ✓9.5

#d1d4ff

AA ✓13.5

ramp.css

:root {
  --ramp-0: #000083; /* 1.23:1 on dark */
  --ramp-1: #1a1da8; /* 1.65:1 on dark */
  --ramp-2: #3e41cc; /* 2.62:1 on dark */
  --ramp-3: #6366f1; /* 4.35:1 on dark */
  --ramp-4: #888bff; /* 6.64:1 on dark */
  --ramp-5: #acafff; /* 9.55:1 on dark */
  --ramp-6: #d1d4ff; /* 13.47:1 on dark */
}

Border-radius playground

Asymmetric radii with a live preview and Tailwind-ready output.

Top-left24pxTop-right8pxBottom-right24pxBottom-left8px

Asymmetric corners give cards direction — large top corners make a card read as "opening downward".

tailwind

className="rounded-[24px_8px_24px_8px]"

Shadow stacker

Stack up to three layers and read the combined elevation as one CSS value.

Layer 1 · Y1pxBlur2pxAlpha6%

Layer 2 · Y4pxBlur12pxAlpha10%

Layer 3 · Y16pxBlur32pxAlpha12%

shadow.css

box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 12px rgb(0 0 0 / 0.1), 0 16px 32px rgb(0 0 0 / 0.12);

Filter lab

Single-filter previews on a synthetic test card — no stock photo required.

Blur0pxBrightness100%Saturation100%Contrast100%

Sharp text sampleMid tone blockAccent chip

filter.css

/* no filters applied — the card is clean */

System tools

Share state, audit cost, preview preferences — the meta-tools that make the other labs productive.

Hue-shift simulator

Preview a brand hue rotated across the surfaces it actually lives on.

Brand hue250°Shift0°

Primary action

Surface

Text accent

Shifting hue by ±20–40° simulates seasonal or campaign theming without touching structure.

tokens.css

:root {
  --brand-hue: 250;
  --accent: hsl(250 82% 22%);
  --accent-text: hsl(250 82% 70%);
  --surface-tint: hsl(250 18% 96%);
}

Breakpoint inspector

Drag the container width and watch one demo component reflow through its own breakpoints.

Container width720px

splitnow 720px — the component asks its container, not the viewport.

Field notes card

Media sits beside the copy until the container gets roomy.

Breakpoint: 560–860px · same logic as a container query.

Motion-preference preview

Toggle prefers-reduced-motion and watch the same scene pick a calmer branch.

Scene: toast-style confirmation queue

Save the draftnudge + fade

Full branch: items nudge and cascade. The reduced preview shows what the switch buys.

Export clipboard

One click from any lab to your project — pick the dialect first, then copy.

Copy target: 131 chars · Tailwind · button · no build step needed.

tailwind-button.txt

className="rounded-xl bg-violet-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-violet-500 active:scale-[.97]"

Perf meter

Every motion has a price. Pick an animation and read which pipeline stage it taxes.

Transform slide1ms / 16.7ms frame

Stage: cheap — compositor-only.

URL state for labs

Tune a curve, then share the exact configuration as a link — state lives in the URL.

x116y1100x230y2100

cubic-bezier(.16, 1.00, .30, 1.00) · /lab?x1=.16&y1=1&x2=.3&y2=1

Favourite recipes

Pin tuned outputs with a name — they persist in your browser for the next session.

No saved recipes yet — tap one of the presets above.

Random inspiration button

Stuck on a blank canvas? Shuffle a considered palette and start from somewhere real.

Midnight archive

ink on bone, one amber

CTA

Preset 1 of 5 — every preset obeys the three-colour rule, so the start is never a mess.

inspiration.css

:root {
  --bg: #0c0d12;
  --text: #f5f1e8;
  --accent: #eab308;
}

The craft shelf

Twenty-five small tools from the third idea bank — one decision each, all in your browser.

#276

Token contrast lab

The quick brown fox

16.69:1 — AA pass

#277

Spacing scale visualiser

#278

Type scale previewer

12px — Scale

16px — Scale

20px — Scale

24px — Scale

32px — Scale

#279

Radius previewer

4px

8px

12px

16px

24px

9999px

#280

Shadow stack viewer

elev 1

elev 2

elev 3

#281

Motion duration lab

300 ms across three standard easings

#282

Grid playground

cols 3gap 8

#283

Colour-blindness approximation

approximations from filter matrices — not a diagnosis

prota

deute

trita

#284

Reduced-motion preview toggle

#285

Focus-order tracer

tab order: click into the fields, or Tab to them

#286

Breakpoint ruler

reading…

sm 640 · md 768 · lg 1024 · xl 1280 — resize the window

#287

Z-index inventory

dropdown · z10

sticky nav · z20

toast · z30

modal · z40

#288

Inline icon searcher

→ arrow✓ check✕ close★ star♥ heart⚡ bolt

#289

Copy tone checker

Could not save. Check your connection and try again.

#290

Locale formatter lab

en-USSeptember 12, 2026

de-DE12. September 2026

ja-JP2026年9月12日

zh-CN2026年9月12日

#291

ARIA role explorer

switch: needs aria-checked

#292

Gradient contrast helper

worst end-to-end pair: 2.96:1 — white text needs ≥4.5 at both stops

#293

Easing compare

ease-out

ease-in

ease-in-out

#294

Line-length measurer

longest line 91 chars — over the band

#295

Tab-stop simulator

the grid is a heuristic, not a measurement

#296

Print preview tool

Essay, as printed

Navigation and chrome are removed by the @media print block; the body keeps its measure and its footnotes.

the site’s print stylesheet is asserted by the export gate

#297

JSON schema formatter

{
  "slug": "combo-box",
  "kind": "element",
  "a11y": 98
}

#298

Slug generator

reading-a-diff-as-a-reviewer

#299

Meta-tag previewer

Components that ship with receipts | Motif UI (34/60)

Every component is audited, scored and priced in bytes. (55/155)

#300

Keyboard-only run sheet

tick each as you walk the flow with keys only

Calibration & review

Tune the details that make generated work feel finished — then compare two versions before you choose.

Typing-speed meter

Calibrate a typewriter demo: your copy length against a believable words-per-minute pace.

Copy length42 charsPace35 wpmDuration14.4s

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA▍

At 35 wpm a real typist lands ≈ 14.4s on 42 characters — anything faster than that reads as telepathy, not typing.

typewriter.css

width: 0;
overflow: hidden;
white-space: nowrap;
animation: typing 14400ms steps(42) forwards;

@keyframes typing { to { width: 100%; } }

Icon line-weight lab

Stroke width and cap roundness across the icon set, tuned as one family.

Stroke width2pxCorner roundnessround / soft

heart

bolt

send

star

A family should share one stroke weight and one cap style — mixing 1.5px and 3px icons in one UI is the fastest way to look unfinished.

icon-attrs

<svg fill="none" stroke="currentColor"
     strokeWidth="2"
     strokeLinecap="round"
     strokeLinejoin="round">

Logo-drift preview

Preview a drifting logo inside its safe zone — the guides keep the drift honest.

Drift10pxCycle6s

Mmotif

safe zone · keep the mark inside the dashes

logo-drift.css

@keyframes drift {
  0%, 100% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
}

Diff viewer

Paste two exports side by side; the loop scrubs a mid-frame so the difference is visible, not theoretical.

Export AExport B

mid

The middle pane cross-fades between the two exports so you can see the frame where they are indistinguishable.

Title and description against their length limits, as the SERP renders them.

Try it above ↑

✓

Preview

Keyboard-Only Run Sheet

A checklist that walks a flow with keys only — tick as you go.

Try it above ↑