Motion

Animation tokens and patterns for every Koder UI — 5 easing curves, 5 duration tokens, transition patterns, and the reduced-motion contract.

Read the Motion spec →

Easing curves

Every deterministic transition picks one of five canonical curves. The SVG below traces each curve; the box on the right replays its movement on click.

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

Default for on-screen change — color, position, size tweaks.

--ease-decelerate cubic-bezier(0, 0, 0, 1)

Entering — element arriving on screen (modal, drawer in).

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

Exiting — element leaving the screen (modal close, drawer out).

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

High-attention motion — container transform, hero choreography.

--linear linear

Indefinite motion only — loaders, progress, looping animation.

Curves match specs/themes/motion/easing-duration.kmd §R2. Click any box to replay.

Duration tokens

Five canonical durations covering acknowledgement (instant) through marketing-hero choreography (long). Defaults shown match the material3 preset; presets like terminal_classic override to 0 ms.

--motion-instant 50 ms

0–50 ms

Focus ring, ripple onset, immediate ack.

--motion-fast 150 ms

100–200 ms

Hover, switch toggle, button press.

--motion-medium 250 ms

200–300 ms

Modal entry/exit, drawer slide.

--motion-slow 400 ms

300–500 ms

Coordinated multi-element (FAB morph), page transition.

--motion-long 600 ms

500–700 ms

Onboarding choreography, hero animation (landing only).

Tokens match specs/themes/motion/easing-duration.kmd §R1. Click any bar to replay.

Transition patterns

Seven patterns ship with CSS-only previews — the full Material parity baseline from transitions.kmd §R1. Stateful gestures (mid-flight interrupt, drag-to-dismiss) remain on the Flutter Web embed track.

Fade

fast · standard

Disappear/appear with no spatial implication. Default for opacity-only changes.

Scale

medium · decelerate

Element zooming into view — modal, FAB expanding, badge growth.

Slide

medium · decelerate

Drawer, bottom sheet, page transition. Decelerate in, accelerate out.

Container transform

slow · emphasize

Card or thumbnail morphs into a full detail page — Material's signature shared-element transition.

Shared axis

medium · standard

Stepwise navigation (onboarding, wizard, step indicator). Outgoing slides + fades out; incoming slides + fades in along the same axis.

Push / Pop

medium · decelerate

Stack-based nav (mobile back gesture). Incoming pane slides over the previous one, which dims and recedes slightly.

Cross-fade

fast · standard

Tab switch within the same context. Old and new overlap briefly.

Sampled from specs/themes/motion/transitions.kmd §R1. Full pattern catalog →

Interaction states

Per-state choreography from transitions.kmd §R2 — the duration + easing applied when a user interacts with an element. Each demo replays the spec-defined motion on click.

Hover

fast · standard

Pointer enters / leaves. Color or elevation tweens fast; no spatial change.

Focus

instant · standard

Keyboard focus arrives. 50 ms ring fade-in — feels instant, never delayed.

Press

fast in · medium out

Touch or click. Scale 0.97 in fast; back to 1 over medium so the rebound is felt.

Drag

medium · standard

Drag start — elevation +2 with slight rotation. Drag end mirrors back.

Selection

fast · standard

Item picked. Background tints over fast — accent overlay at 28% mix.

Disabled

medium · standard

Opacity fades to 0.38 — Material's standard disabled value. Pointer-events stay live in the demo so you can replay it.

Source: specs/themes/motion/transitions.kmd §R2.

Spring physics

Spring tokens approximate physics-based motion via CSS `linear()` keyframes. Overshoot and settle are visible against the cubic-bezier transitions above. Browsers without linear() support fall back to ease-out cleanly.

Spatial · fast

--kds-motion-spring-spatial-fast

Crisp settle, ~700 ms. Use for small UI moves: chip slide, switch thumb travel.

Spatial · default

--kds-motion-spring-spatial-default

Visible overshoot. Use for full-card or panel moves where the rebound reads as physicality.

Effect · default

--kds-motion-spring-effect-default

For non-spatial effects (fade, scale, color shift). Tighter curve; no overshoot.

Three of six tokens shown — full catalog and Compose/Flutter bindings live in physics.kmd §springs →

Scroll-driven animation

`animation-timeline: scroll()` / `view()` bind animation progress to scroll position. The blob below morphs as it enters and leaves the viewport — no time loop, the user is in control.

Modern Chromium/Safari/Firefox; older browsers see a static blob via @supports fallback.

Reduced motion

When the OS reports `prefers-reduced-motion: reduce`, every animation collapses to instant. Vestibular safety is not optional — the same content must still convey state change without movement.

Default (motion enabled)

Ball pulses at 600 ms duration with ease-standard curve.

With reduced-motion preference

Same content, zero animation — duration collapses to 0 ms.

Contract: spec/themes/motion/physics.kmd §R1. Read the reduced-motion contract →

Widget motion

Canonical motion applied to concrete UI shapes — how each widget type animates in a Koder product. CSS-only previews; production widget implementations live in `engines/sdk/koder_kit`.

Clock

Analog face with second/minute/hour-hand sweep. Linear timing for every hand.

Calendar

May

Month grid flips into view on page transition. RotateY + opacity tween.

Counter

9 9 9

Digits roll up with a stagger so the eye reads the number assembling.

Form focus

Name
Email
Phone

Focus ring propagates through fields when tab navigates row to row.

Table row

NameStatus
AlphaOK
BetaOK
GammaOK

Row highlight sweeps top-to-bottom on filter / sort completion.

Card flip

Aa
★

Card pivots 180° on rotateY to reveal back face. Use for context swaps.

Photo gallery

Horizontal slide between photos. Stops on the active slide.

Video play

Play icon pulses while idle to invite interaction without competing for attention.

Date picker

15/05/2026
May 2026

Popup drops from the input field with a tiny overshoot, then settles.

Progress bar

Determinate fills end-to-end; indeterminate sweeps a 30% segment infinitely.

Carousel

Auto-advances between slides on a fixed cadence; dots track the active one.

Slider

Thumb scales up on press, slides along the track, fill follows.

Card reorder

≡
≡
≡

Drag-and-drop reorder. Lifted card scales + drops shadow; sibling slides to fill the gap. Material 3 pattern.

Circular progress

Determinate ring fills 0→75% with eased timing; indeterminate ring spins infinitely with a 25% arc.

Click any demo to replay the animation.

Creative motion

Elaborate multi-color compositions — aurora bands, color wheels, lava lamps, confetti, equalizers, RGB-split glitch, neon rings, mosaics. Beyond utility widgets.

Aurora

3 colored gradient bands waving on offset cycles. Hero atmosphere / empty-state background.

Color wheel

Conic-gradient spinner showing the 10-step hue cycle. Loading / theme picker.

Lava lamp

4 colored blobs morph + drift; blur + contrast filter blends them into one organic mass.

Confetti

18 colored particles falling with rotation + stagger. Success / celebration.

Equalizer

12 colored bars bouncing at desynced cadences. Audio playback / activity indicator.

Glitch

KDS KDS KDS KDS

RGB-split layers oscillating on stepped timing. Cyber/error/redacted aesthetic.

Neon ring

Conic-gradient halo rotating around a dark core. Avatar / brand mark / focus indicator.

Mosaic

5×5 colored cells flipping in stagger. Loading splash / data refresh / page transition.

Click any demo to start. All CSS-only; reduced-motion disables.

Reveal effect

Cursor-tracking radial highlight. Hover any tile below and the highlight follows the pointer. Pointer-only signature — disabled by reduced-motion + skipped on touch surfaces.

Source: specs/themes/motion/reveal.kmd.