@motiq

A collaboration/product activity feed that goes beyond a timeline: groups repeated actions, date separators, an unread divider, live arrival insertion, and event-type/actor filtering. Presentation-only — the app supplies events.

A presentation-only timeline for a multi-step agent / automation run: an ordered rail of steps with tool calls, outputs, errors, retry attempts, optional nested sub-stages, human approval checkpoints, and run-level lifecycle controls (cancel / resume). The app owns the run and every status; the component never executes an agent, generates reasoning, invents confidence, or claims a step succeeded on its own.

Renders a streaming assistant response supplied by your app — text, fenced code with copy, inline [n] citations to a sources rail, and streaming/stopped/complete/error states with Stop, Retry, and Copy. Presentation only: it never calls a model. Reduced-motion shows text instantly; a polite live region announces completion, not tokens.

Radix Dialog with Motion enter/exit choreography (scale, slide-up, fade). Preserves portal, focus trap, Esc, and overlay. Reduced-motion safe.

A semantic list whose items fade/slide in with a stagger and animate out cleanly on removal, with layout-based reordering. Requires stable keys. Reduced-motion safe.

Display and control an app-owned approval process — sequential or parallel stages, required/optional reviewers, minimum approvals, current-user actions (approve / reject / request changes / comment / cancel / resubmit), decision history, and collapsing completed stages. The app owns authorization; the component surfaces app-provided disabled reasons. Status is icon + label; reduced-motion safe.

A panel with twin comets orbiting a 2px border ring built from a rotating conic gradient cut by a two-layer CSS alpha mask (never an SVG luminance mask). The angular velocity itself is sprung (k=30, d=11), winding to 240 deg/s on hover and coasting back to 42 deg/s, with an optional coral signature comet 180 degrees opposed. One custom property per frame; content never repaints.

Five spectrum lanes written live by glowing pens: data packets stream the traces, hot ink cools into a settled trail, and event markers bloom rings as the pens cross them. One canvas + a single rAF loop; committed dark Motion Lab palette; reduced-motion static frame, offscreen-paused, forced-colors fallback.

An editable hero block for collaboration/review products showing people active, a review underway, and one pending decision with outcome copy + CTAs. Composes Live Presence Stack, Typing and Presence, Approval Workflow (one pending decision), Comment Thread, and Activity Stream across review-open/commenting/changes-requested/approval-pending/approved/rejected/resolved. App-controlled, clearly-fictional demo data. SSR-safe, reduced-motion-safe.

A before/after comparator whose divider chases the pointer through a spring (k=140, c=18, ζ≈0.76) so the lag reads as elastic resistance, demonstrates itself once on first viewport entry (50 → 96 → 4 → 50 over 2.6s), and snaps home on double-click. Coral signature handle; real slider semantics with 2% / Shift 10% arrow steps.

A canvas particle comet that reads pointer velocity, not just position: a tight ember when you drift, a long azure-to-cyan plume with coral sparks when you flick. Idle, the particles coil into an ambient orbit ring. Fixed particle pool, pre-rendered sprites with additive blending, DPR capped at 2x, one rAF loop, offscreen-paused, static orbit frame under reduced motion.

A presentation-only data-quality panel that displays app-supplied freshness/completeness/accuracy metrics (rendering "Unknown" when unmeasured), a filterable list of validation checks with keyboard-expandable per-check issue lists, affected-record counts, last-checked time, and a retry-validation control. Status is icon + text, never colour alone. It never claims accuracy without supplied evidence.

A composed, app-controlled deploy console block: an Environment Switcher in the top bar, a Deployment Pipeline as the main column, a Live Log Stream beneath it, and an API Request Inspector in the side panel — wired behind one demo state machine (env selection, deploying, following logs, request inspection, failure, retry, completion). Provider-neutral fictional data; it never talks to a real deployment provider.

A world behind the glass: consumer-supplied layers travel at depth-proportional rates as the scene passes through the viewport and drift subtly with the pointer, while the far layers slip out of focus as the near ones pass. translate3d only, quantized depth-of-field blur, one rAF loop, no scroll container in page mode, reduced-motion frozen composition.

A temporal background where application events propagate through a structured cell matrix (rows = regions/streams, cols = time/lanes) — origin cells light, then neighbors along the grid, so waves step cell-to-cell rather than as free-space circles. Overlaps are damped, failed propagation halts with a non-color glyph, acknowledged events dim, and old events settle into a quiet history layer. SVG + CSS only. Deterministic (SSR-safe), light/dark, reduced-motion shows current relationships statically, forced-colors-safe, offscreen-paused.

A transition layer for filtered/searched collections your app drives: cards enter, leave, and reorder with layout continuity, the result count morphs, and empty/loading/error states cross-fade. If the focused item is filtered out, onFocusFallback fires so focus never drops to the page root. Capped entrance stagger; results are never delayed for animation; reduced motion is an instant swap. Not a data table or a search library.

A content-aware structural grid for hero sections: the grid quiets inside one or many safe areas (via an SVG mask) so foreground copy stays readable, while detail collects toward the frame edges. Optional perspective skew, highlighted cells, and a restrained accent shimmer. Deterministic (SSR-safe), light/dark, reduced-motion-static, forced-colors-safe, offscreen-paused. SVG + CSS only.

A composed, app-controlled AI agent workspace that composes Agent Run Timeline + Tool Call Activity + AI Response Stream + Source Citation Rail into one realistic full page; the app owns every state and it never simulates a model.

Radix Accordion with Motion height/opacity reveal and a rotating chevron. Single/multiple modes, keyboard, and disabled state preserved. Reduced-motion safe.

A CSS-only animated grid background layer with a slow drift, optional radial fade mask, and a prefers-reduced-motion stop. No canvas, no JS loop. Decorative.

Radix Tabs with a Motion layoutId sliding active indicator and cross-faded, direction-aware content. Keyboard and roles preserved. Reduced-motion safe.

A product card that carries its own sky: three dual-sine ribbons drift across a canvas roof, softened by one GPU CSS blur at 116% scale with a seeded grain tile over the top and dark-only stars beneath. Pointer x retargets a lean spring (k=50, d=14) that shifts ribbon phase up to 90px and lifts amplitude ~20%, relaxing home on leave. One rAF loop, DPR capped at 2x, still-frame under reduced motion.

A deck that handles like physical cards: every card rides a continuous slot spring (k=90, d=12) and sending the front card drives a 210px side arc, a 150px z-lift and a full rotateY flip that reveals a patterned back before it tucks in behind. Drag, tap, prev/next buttons and arrow keys all drive one state, with an aria-live announcement per shuffle and instant reordering under reduced motion.

An app-controlled multi-step checkout progress/orchestration surface (not a payment processor) — current + completed + editable steps, per-step validation + blocked reasons, async step save, return-to-previous, error/progress summaries, sticky order-summary slot, and optional guest/account modes. Never collects or processes payment; no fake processing progress.

A composed review screen: Live Presence Stack, an app-owned Approval Workflow, the Comment Thread, and an Activity Stream wired into one demo state machine — approving advances the workflow and records activity; new comments appear in the thread and the feed. Clearly fictional users; the app owns persistence + authorization.

An engraved plate lit from within: candle-gold light waves radiate from a focal point and ignite each burin stroke as they pass, making the whole plate glint in sequence. One canvas + a single rAF loop; committed dark Motion Lab palette; reduced-motion static frame, offscreen-paused, forced-colors fallback.

A data-driven contour background: contours are computed from application-supplied values (signed focal pressure points, thresholds, active/comparison regions) via canvas marching-squares — not a random topographic texture. Emphasized thresholds get heavier bands, the active region brightens, comparison regions ghost, and data changes ease smoothly. One canvas + one rAF loop (no per-frame React state, no WebGL). Deterministic first paint, intentional light/dark, reduced-motion-static, forced-colors-safe, offscreen-paused.

A rich, accessible refresh indicator your app drives: idle, checking, refreshing (determinate or honestly-indeterminate), partially updated, success, stale, offline, error, paused, and cancelled — with manual refresh, cancel, retry, pause/resume, and interval controls in compact, inline, and panel modes. Never spins on idle, never fakes progress, and never signals status by color alone. Presentation-only: the host owns the fetch and progress.

An editable hero block for developer-tool/infra products showing a real deployment control surface with outcome copy + CTAs. Composes Environment Switcher (selected env), Deployment Pipeline (four stages), a short Live Log Stream, and one API Request Inspector result across ready/deploying/validating/failed/retrying/completed. App-controlled, provider-neutral demo data. SSR-safe, reduced-motion-safe, readable on laptop and mobile.

The complete Developer Tools Pack — installs the Deployment Command Center block and its four components (Deployment Pipeline, Live Log Stream, API Request Inspector, Environment Switcher) as editable source, deduping shared utilities.

An application-controlled file upload workflow: presents app-supplied upload items with progress, pause/resume/retry/cancel/remove, processing stages, and empty/drag-over/partial-failure/offline states. It never uploads bytes itself unless given an adapter. Status by icon+text; progress announcements throttled.

A media surface that liquefies under the pointer: a 32×20 spring mesh (k=90, c=8) displaces sub-rects of your image with a (1−d/R)² falloff and snaps back elastically, throws a radial splash on pointer exit, and swells on a Lissajous path while idle. One canvas, DPR capped at 2, arrow keys and Space as the keyboard equivalent.

An editable hero block for AI/automation products that shows a real agent workflow with outcome copy + CTAs. Composes Agent Run Timeline (trimmed), Prompt Composer (compact), Tool Call Activity (one active tool), and Source Citation Rail (one result) at reduced complexity across idle/running/tool-active/waiting-for-approval/completed/failed. App-controlled — never simulates a model or shows chain-of-thought. SSR-safe, reduced-motion-safe. Clearly-fictional demo data.

The complete AI Interface Pack — installs the AI Agent Workspace block and its four components (AI Response Stream, Tool Call Activity, Source Citation Rail, Agent Run Timeline) as editable source, deduping shared utilities.

A real button with press-scale feedback and accessible loading (aria-busy + polite spinner) and success states. Solid, outline, and ghost variants. Reduced-motion safe.

Two inline-SVG animated icons — AnimatedArrow (nudge) and AnimatedCopy (copy-to-check swap) — triggered on hover, tap, focus, or mount. Decorative and inherit their label from a parent control. Reduced-motion safe.

A presentation-only inspection surface for a single HTTP request/response your app already has — method/url/status/duration/timing phases, headers/query/body, error, requestId, environment, retryCount, and an auth summary. Credential headers and fields are redacted by default and can never be revealed from inside the component. Expandable sections, in-payload search, formatted/raw + wrapped/scrolling views, and copy of url/request/response. It never sends anything.

Reveals text segment-by-segment with a de-blur and drift. Reduced-motion safe.

An app-controlled animated cart LINE ITEM (not a full cart) — arrival, quantity/total morph, variant crossfade, price-change, limited/unavailable, removal→Undo→restore, with optimistic mutation + automatic rollback and honest failed/Retry. Never touches a backend or payment; price/inventory are app-owned. No manipulative urgency.

The complete Collaboration Pack — installs the Collaborative Review Workspace block and its four components (Live Presence Stack, Activity Stream, Approval Workflow, Comment Thread) as editable source, deduping shared utilities.

A production comment thread your app persists: root comments + nested replies, mentions, reactions, edit, resolve/reopen, delete, and optimistic send (pending → sent, failed → retry, temp-id replacement, focus preserved). Unread divider and sort. The app owns persistence + permissions.

A survey scanner reading the deep record: three parallax strata layers drift while a luminous beam sweeps the core, igniting amber marker seams as it finds them. One canvas + a single rAF loop; committed dark Motion Lab palette; reduced-motion static frame, offscreen-paused, forced-colors fallback.

The complete Data Motion Pack — installs the Live Operations Dashboard block and its four components (KPI Number Morph, Streaming Data Rows, Filter Result Transition, Data Refresh State) as editable source, deduping shared utilities.

Copy that arrives decoded rather than typed: every glyph boils from the first frame and character i locks at 350 + i·55ms ± 120ms behind a 420ms accent flash. Mount / in-view / hover triggers, a monospace terminal variant, SSR-readable text, reduced-motion safe.

Visualize a CI/CD deployment run: ordered stages with queued/running/passed/failed/cancelled/skipped status, running-stage emphasis, per-stage durations, expandable logs, and a Retry control. Display-only — the host app supplies the pipeline data.

A presentation + control surface for choosing the environment an app targets (dev / staging / production, regions, preview branches). Current-environment trigger opens a searchable, fully keyboard-navigable listbox with per-environment status/health, region/branch/version/last-deploy, disabled reasons, recents + favorites, and optional groups. Production switches are icon + label marked (never color alone) and can be gated behind a confirmation dialog. Controlled value/onValueChange with app-owned switching + error/retry. It never mutates a backend.

A filmstrip with a spring-loaded playhead (k=90, c=16, ζ≈0.84 — one soft overshoot): hover or drag the strip and the large preview crossfades ⌊p⌋ into ⌈p⌉ by the fractional part, with frame ticks and a monospace timecode. Scrubs itself at 0.9 frames/s when idle. The strip is a real slider with arrow/Home/End keys.

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.