First-Class Language, Not Prose

Motion —
see, hear, feel.

Every NMG animation pulls from the same seven durations and five easings. Click anything below to play. The dot-reveal hero, the card lift, the KPI count-up — they're all named primitives an agent can reach for by name.

Reduced motion previewToggle to see what NMG looks like when the user has prefers-reduced-motion: reduce on.

Section 01

Durations

Seven tokens. Default is duration.md (320 ms). Reach for the smallest that still reads as intentional. Click any bar to feel it; click "Race them" to compare side-by-side.

Token

Bar fills in this long

Value

instant

0 ms

120 ms

200 ms

320 ms

560 ms

900 ms

hero

1500 ms

Section 02

Easings

Five named curves. standard is the default for almost everything. emphasis when the element must feel decisive. Click "Race them" to send a red ball through each curve at the same time.

standard

cubic-bezier(0.2, 0, 0, 1)

iOS-style ease-out. Default for all transitions.

emphasis

cubic-bezier(0.3, 0, 0, 1)

Crisper landing. For entrances + the dot reveal.

decelerate

cubic-bezier(0, 0, 0.2, 1)

Decelerate-only. Off-screen → on-screen entrances.

accelerate

cubic-bezier(0.4, 0, 1, 1)

Accelerate-only. On-screen → off-screen exits.

linear

Constant rate. Only for shimmer / marquee / skeleton loops. Never for UI transitions — they feel mechanical.

Section 03

Named Choreographies

Seven complete animations NMG owns. An agent reaches for the name, not the properties. Click "Replay" on any card to play it.

hero.dotReveal

DURATION 2.5 s

nmg.

Silent black canvas → dot grows alone → hold → dot fades as wordmark arrives. The signature hero choreography.

card.lift

320 ms · standard

142K

Hover lift for surface cards. translateY(-2px) + shadow elevation. Reduced-motion: shadow only.

tab.crossFade

200 ms · standard

OverviewKeywordsBacklinks

Overview

Keywords

Backlinks

Tab switch. Old content fades out, new content enters with a 4px translate.

report.kpiCount

900 ms · emphasis

Organic Sessions

KPI numbers count up from 0 when the card scrolls into view. Tabular numerals preserved during animation.

toast.enter

200 ms · emphasis

Copied hex #FF0000

Non-modal confirmation. translateY(8px → 0) + opacity 0→1. Dwells 2s, exits at 60% the duration.

modal.scrim

320 ms · standard

Background dim. opacity 0→0.5. No backdrop-filter — NMG forbids glassmorphism.

annotation.draw

560 ms · standard

142,328

The hand-drawn red annotation circle on dashboard screenshots. Slightly rotated, slightly skewed. Drawn as if by a print editor with a red pen. Never replays.

Section 04

Universal Rules

Six Things to Never Get Wrong

Motion rules every NMG render must pass

Default to duration.md + easing.standard unless a named choreography applies.
Never animate color directly — animate opacity or use a different element.
Never bounce or overshoot. NMG motion settles; it never springs.
Hover transitions on interactive elements: duration.xs to duration.sm, never longer.
Entrance animations: duration.md to duration.lg, staggered 60–120 ms between siblings.
Exit animations are 60% the duration of their entrance. People leave faster than they arrive.

Section 05

Copy-paste tokens

For your CSS file. Mirror of motion: in design.md.

/* NMG motion tokens — v3.14 */ :root { --duration-instant: 0ms; --duration-xs: 120ms; --duration-sm: 200ms; --duration-md: 320ms; --duration-lg: 560ms; --duration-xl: 900ms; --duration-hero: 1500ms; /* one-off, hero.dotReveal */ --easing-standard: cubic-bezier(0.2, 0, 0, 1); --easing-emphasis: cubic-bezier(0.3, 0, 0, 1); --easing-decelerate: cubic-bezier(0, 0, 0.2, 1); --easing-accelerate: cubic-bezier(0.4, 0, 1, 1); --easing-linear: linear; }/* Default transition for any interactive element */ * { transition: all var(--duration-md) var(--easing-standard); }/* Reduced-motion fallback */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }}