motiq

Frosted panes over a live scene: five gradient orbs drift on lissajous paths across a DPR-capped canvas (additive in dark, soft alpha in light, palette re-read from tokens on theme change) while each glass pane parallaxes at its own depth on a critically damped spring (k=110, d=21). A rotated specular band sweeps the main pane on every viewport entry. Translate3d-only layer motion, offscreen-paused.

A floating action button that blooms into satellite actions through a gooey metaball merge - blur plus alpha contrast under the hood - with underdamped springs (~18% overshoot, 45ms stagger) and per-satellite magnetic hover. Crisp icons ride an unfiltered twin layer sharing the same transforms. Real buttons with menu semantics, roving focus, and Escape-to-close; instant fade under reduced motion.

A 3D tilt card that behaves like a physical foil pass: twin underdamped springs (k=120, d=10) chase the pointer so the card lags and overshoots ~6% on release, while the specular glare and iridescent conic foil stay pinned to the raw pointer — light is instant, mass is not. Counter-moving ground shadow, arrow-key tilt, touch drag, reduced-motion resting pose, offscreen-paused.

An application-controlled Kanban interaction layer: pointer + touch + keyboard/menu card movement, drop validation, optimistic move with failure rollback, drop indicators, and empty columns. Dragging is never required. Clean-room (no external drag library); transform-based movement that doesn't re-render every card.

A presentation-only mobile form whose sticky Submit/Cancel bar rides above the virtual keyboard via the VisualViewport API (degrading gracefully to a plain sticky footer where unavailable), with an aria-linked validation summary, cancellable async submission, and an unsaved-changes discard guard. The app owns the fields and submission.

A headline where reading emphasis physically travels through the copy: an activation front sweeps in reading order and author-marked <em> phrases ignite into a persistent designed underline treatment. SSR/no-JS/reduced-motion render the final designed state.

An accessible KPI stat that smoothly morphs between values with a direction-aware trend (arrow + sign, never color alone). Controlled value; locale, compact, and currency formatting; loading and error states. Reduced-motion snaps.

A refraction lens that floats over your own content: everything under the glass magnifies with a chromatic fringe while the background grid physically bends around the rim. A duplicated scaled clone clipped by a moving circle() - no filters, no repaint storms - with a spring-lagged centre that drifts on its own when unattended. Clones are aria-hidden, so AT reads the content once.

An outlined wordmark that fills bottom-up with a sloshing two-polygon clip-path wave rebuilt per frame, settles as the amplitude decays, then takes a coral shimmer sweep. Pure CSS-clipped text (never an SVG luminance mask), controllable level, reduced-motion safe.

An editable hero block for operational-data products centered on continuity and changing state. Composes KPI Number Morph (three metrics), Data Refresh State, a small Streaming Data Rows subset, and Filter Result Transition across initial/live/filtering/refreshing/partial-update/stale/error/recovery. App-controlled, clearly-fictional demo data. SSR-safe, reduced-motion-safe.

A live log viewer for developer surfaces (deploy/build output, jobs, server events): auto-follow that never fights the user's scroll, a "N new lines" resume indicator, pause/resume, search, per-level filtering, copy, clear, and bounded history. Levels are shown by icon + label + prefix, never colour alone. Display-only — the host app supplies the entries.

A composed, app-controlled ops dashboard: KPI Number Morph stats with a Data Refresh State control, a Filter Result Transition section, and a Streaming Data Rows live feed — wired to one demo state machine across loading, live, filtered, refreshing, partial update, stale, error, and recovery. Not a charting library; fictional demo data.

A live avatar stack for collaborative workspaces: animated join/leave without row reflow, per-user active/idle/editing/viewing status (dot + label, never color alone), an overflow +N count, and a keyboard-accessible participant detail popover. Controlled presence data.

A living woven fabric background: a shuttle of light races the loom laying luminous weft row by row, an iridescent violet→cyan→pink sheen rolls across the finished cloth, and warp threads sway. One canvas + a single rAF loop; committed dark Motion Lab palette; reduced-motion static frame, offscreen-paused, forced-colors fallback.

A distinctive SVG background of layered topographic contours that flow around configurable focal regions, thinning near a foreground safe area so text stays readable. Deterministic (SSR-safe), light/dark, reduced-motion-static, forced-colors-safe, offscreen-paused. No canvas, no WebGL, no heavy deps.

A launcher dock whose icons live inside one shared gaussian attraction field instead of per-icon hover states, so neighbours cascade and the bar reads as liquid under a magnet. Influence drives scale, lift and lateral drift springs; a label chip springs to the dominant icon; a virtual pointer sweeps the bar at idle. Transform-only, offscreen-paused, reduced-motion hover fallback.

Chaptered storytelling with hard cuts instead of crossfades: each section is revealed by a scroll-driven clip-path wipe - an angled sweep, an expanding iris, or a centre-split curtain - led by a lit accent edge. The iris ring is an SVG circle whose radius animates, so the stroke hugs the clip edge at constant width. Reduced motion collapses the sticky stack into plain stacked sections.

A presentation-only, fully-controlled @-mention suggestion popup: the app owns the editable field and text insertion while the component renders an accessible, keyboard-navigable listbox of people/teams and drives selection, keeping DOM focus in the app's input via the ARIA combobox + aria-activedescendant pattern.

A message list with an honest delivery-receipt layer for chat/support/collaboration: draft/sending/sent/delivered/read/failed/retrying/scheduled/cancelled/edited as icon+text, read receipts, associated errors, retry/cancel/edit/copy. The app owns delivery; no network simulation and no constant idle animation.

A mobile-first filter workflow, not a sheet of checkboxes: app-defined groups (checkbox, radio, range, date, search-within-options, hierarchical, custom) with disabled reasons and option counts, a draft-vs-applied model (Apply commits, Cancel restores, Reset, Clear-group/Clear-all), a live announced result count, removable chips, collapsible groups, and an unsaved-change confirm. Ships as a bottom sheet, fullscreen, or desktop side panel with focus trap + restoration, 200%-zoom-safe sticky footer, safe-area insets, and swipe-to-close that is never gesture-only.

Shared, dependency-free hooks used across workflow components: useReducedMotion, useVisibilityPause (offscreen pause), useSequence (drive live data over time), formatNumber (locale), useAnimatedNumber.

A presentation-only queue MANAGER for a collection of files/jobs — priority lanes, concurrency-slot occupancy, blocked-item explanation, queue-level progress, per-item reorder + priority, and pause-all/resume-all/retry-failed/clear-completed. Distinct from File Upload Pipeline; never uploads internally.

Media cards on a perspective ring you can grab and flick: real inertia clamped to ±6 rad/s decaying as v·e^(−2.2t), an under-damped focus spring, and depth cues (scale, dim, quantized blur) driven by cos θ. Drag, wheel, click and arrow keys all drive one selection; reduced-motion jumps instantly, loop pauses offscreen.

A presentation + orchestration layer for passkey (WebAuthn) setup. The app supplies WebAuthn operations and results; the component renders intro/capability/naming/starting/system-prompt/success/failure/existing-credential/unsupported states, always keeps an alternative sign-in path, and never implements crypto, collects key material, or fakes success.

A presentation-only timeline for ONE ingested item moving through multiple app-owned processing stages (scan → transcode → thumbnail → caption → publish) — per-stage status/progress/output/logs/warnings/errors, current-stage focus, stage expansion, retry/skip/cancel/restart, duration summary, and vertical/horizontal layouts. Distinct from File Upload Pipeline + Multi-file Queue; never fakes progress.

A production variant selector for product options (color/size/material/plan/bundle/custom): controlled selection, dependent options, app-supplied availability + inventory + unavailable combinations, animated-but-text-backed price adjustments, and a mobile compact layout. No fabricated scarcity or discounts.

An app-controlled, time-scaled project timeline (not a Gantt/charting library) — milestones/phases/tasks/releases/events on a day/week/month axis, current-date marker (from a today prop), horizontal nav + jump-to-today, phase collapse, item selection with textual date ranges, dependency indication, status filtering, delayed/blocked surfacing, a structured list/mobile fallback, and a non-drag keyboard reschedule (optimistic + rollback). No scheduling algorithms; the app owns dates.

A presentation-only, production-oriented prompt-composition surface: multiline draft, caret-aware {{variable}} insertion, app-supplied attachments/templates/models, an honest app-owned token budget, and idle/loading/streaming/error states with Send/Stop/Retry. It never calls a model or sends anything.

A headline with gravity: each character chases a numeric font weight (340 → 900) based on pointer distance with exponential smoothing, so the type visibly lags the cursor. Glow, letter-spacing falloff and an idle breathing wave. Reduced-motion safe.

A queue/throughput background that renders your lanes rather than decorative streaks: pulses flow through restrained lanes, congestion makes them denser and slower, completed work fades into a tail history band, and blocked/delayed lanes carry a non-color stop cap + glyph. Density thins over a readable safe area. Deterministic (SSR-safe), light/dark, reduced-motion-static, forced-colors-safe, offscreen-paused. SVG + CSS only.

Two halftone ink plates hunting for register: pink and blue screen-blended grids drift apart then snap into alignment as a press roller sweeps through. One canvas + a single rAF loop; committed dark Motion Lab palette; reduced-motion static frame, offscreen-paused, forced-colors fallback.

Cycles through phrases in place with slide or fade motion. Polite aria-live announces the current word, pauses on hover/focus, and keeps a stable layout. Reduced-motion safe.

An infrastructure-flavored background where signal packets move through an application-defined service topology with health + direction: requests enter at ingress nodes, flow along edges between services grouped into regions, and degraded/error paths are marked without color (dashed strokes + slower/stalled flow + a glyph). One canvas + one rAF loop (no per-frame React state, no WebGL). Deterministic first paint, light/dark, reduced-motion-static, forced-colors-safe, offscreen-paused. Clearly-fictional default data.

A stats band that is a pure function of scroll progress, so scrolling back rewinds it digit by digit instead of counting once and going inert. Per-digit odometer columns roll with stagger and a small overshoot, the coral signature underline draws itself, and sparklines trace in. Fixed-height column crops, tabular-nums, true values always in the accessible tree.

A presentation + control surface for reviewing and revoking active account sessions — device/browser/os, app-supplied approximate location + IP summary + trust/risk labels, current-session identification, single + bulk revocation with confirmation (current session preserved), rename/trust, filter/sort, and honest failed-revocation + retry. The app owns revocation; never labels a session compromised without app data.

Presentation-only citation rail that keeps inline [n] markers and a side source list in sync — active-source highlight, expandable excerpts, copy link, open-source callback, keyboard nav, and rail / list / cards layouts. The app owns every source; the component never retrieves, verifies, or scores anything.

A departures board that actually flips: cells step through the charset drum-style with a col·38 + row·110 ± 90ms sweep, 3D top/bottom halves, motion blur on fast runs, a back-ease slap on the final flap and idle twitches. Polite live region announces each settled page.

A surface with a radial glow that follows the pointer. CSS-only, no runtime deps beyond cn.

The opening move of a product page: a framed hero card held at arm's length scales to full bleed as you scroll, the corner radius closes to 0, the vignette lifts, and captions crossfade through the beats. One rAF loop, getBoundingClientRect progress smoothed through an exponential lerp, transform + opacity only; page or container scroll mode, SSR-settled markup, reduced-motion static layout.

A live operational table your app drives: animated row insertion, update, resort with continuity, per-cell change emphasis (arrow glyph, never color alone), numeric morphs, and status transitions. Loading, empty, and error states; sortable headers with aria-sort; rate-limited screen-reader summaries; reduced-motion instant swaps. Not a data-grid — for live subsets.

A mobile-first swipe action row that also works with pointer and keyboard: left/right actions with threshold + snap, opt-in full-swipe, only-one-open groups, a visible overflow menu and focus-revealed action buttons, destructive-action safeguards (confirmation / undo, full-swipe off by default), and reduced-motion fallbacks. Never touch-only.

An app-controlled task DEPENDENCY visualization (not a graph editor / not pan-zoom-only). Deterministic dependency-depth layout with static SVG lines, blocked/blocking relationships, prerequisite + dependent inspection, highlighted active path, app-supplied cycle error, status filter, and a compact list/mobile fallback. Keyboard-first (dragging never required); optimistic move with rollback.

A presentation-only navigation + expansion surface for deeply nested discussions — expand/collapse branches, jump to next unread branch, go-to-parent, selected-path breadcrumb, collapse-resolved, deleted-reply placeholder, and lazy reply loading (loading/error/retry/load-more). Rendered as an accessible tree; depth-capped so pathological threads never render unbounded. Distinct from Comment Thread.

A presentation-only live inspector for an AI agent's tool calls — concurrent calls, expand/collapse details, inline approve/reject, retry on failure, and compressed completed calls. The app owns the data; the component never runs tools or invents results.

A finished hero with a second layer hiding above it: a soft, flickering torch around the pointer uncovers a blueprint twin, a wireframe, or a before/after render. The reveal is a CSS alpha mask driven by three custom properties per frame (never an SVG luminance mask, which silently no-ops in Chromium). Springs after the pointer, patrols a Lissajous path at idle, and degrades to a static split view.

Orchestration + presentation for adding a second auth factor (authenticator/security-key/SMS/email/recovery-codes/custom). The app supplies all operations + state; the component never implements crypto, shows real secrets, stores codes, or claims the account is secure because setup finished. Recovery codes are treated as sensitive; an alternative method is always offered.

A combined real-time typing + participant-presence strip for messaging/collaboration — presence (online/active/idle/away/offline/reconnecting) + typing (typing/recording/uploading/editing) by shape+text, avatar initials, overflow summary ("Three people are typing"), compact/inline/floating modes. App supplies all data; a debounced polite live region avoids keystroke spam; ambient motion pauses when hidden.

Counter-rotating media rails that feed on page-scroll velocity: a smoothed reading surges them to ~6× and shears them ±10° while you scroll, then exhales back to a 36px/s drift over ~600ms. Hover or focus a rail to ease it to a quarter speed and lift the card out of the stream. One passive scroll listener, one rAF loop.