@motiq

Tailwind class-merge helper used by every Motiq component.

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

Renders a streaming assistant response supplied by your app — text, fenced code with copy, inline [n] citations to a sources rail, and streaming/stopped/comple…

Visualize a CI/CD deployment run: ordered stages with queued/running/passed/failed/cancelled/skipped status, running-stage emphasis, per-stage durations, expan…

A live avatar stack for collaborative workspaces: animated join/leave without row reflow, per-user active/idle/editing/viewing status (dot + label, never color…

An accessible KPI stat that smoothly morphs between values with a direction-aware trend (arrow + sign, never color alone). Controlled value; locale, compact, a…

A presentation-only live inspector for an AI agent's tool calls — concurrent calls, expand/collapse details, inline approve/reject, retry on failure, and compr…

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 in…

A collaboration/product activity feed that goes beyond a timeline: groups repeated actions, date separators, an unread divider, live arrival insertion, and eve…

A live operational table your app drives: animated row insertion, update, resort with continuity, per-cell change emphasis (arrow glyph, never color alone), nu…

A distinctive SVG background of layered topographic contours that flow around configurable focal regions, thinning near a foreground safe area so text stays re…

An atmospheric SVG background that renders an application-defined workflow as a topology: nodes with lifecycle status, directed connections, an animated active…

A queue/throughput background that renders your lanes rather than decorative streaks: pulses flow through restrained lanes, congestion makes them denser and sl…

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 det…

An infrastructure-flavored background where signal packets move through an application-defined service topology with health + direction: requests enter at ingr…

A temporal background where application events propagate through a structured cell matrix (rows = regions/streams, cols = time/lanes) — origin cells light, the…

A data-driven contour background: contours are computed from application-supplied values (signed focal pressure points, thresholds, active/comparison regions) …

An editable hero block for AI/automation products that shows a real agent workflow with outcome copy + CTAs. Composes Agent Run Timeline (trimmed), Prompt Comp…

An editable hero block for developer-tool/infra products showing a real deployment control surface with outcome copy + CTAs. Composes Environment Switcher (sel…

An editable hero block for operational-data products centered on continuity and changing state. Composes KPI Number Morph (three metrics), Data Refresh State, …

An editable hero block for collaboration/review products showing people active, a review underway, and one pending decision with outcome copy + CTAs. Composes …

Presentation-only citation rail that keeps inline [n] markers and a side source list in sync — active-source highlight, expandable excerpts, copy link, open-so…

A presentation-only inspection surface for a single HTTP request/response your app already has — method/url/status/duration/timing phases, headers/query/body, …

Display and control an app-owned approval process — sequential or parallel stages, required/optional reviewers, minimum approvals, current-user actions (approv…

A transition layer for filtered/searched collections your app drives: cards enter, leave, and reorder with layout continuity, the result count morphs, and empt…

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…

A presentation-only timeline for a multi-step agent / automation run: an ordered rail of steps with tool calls, outputs, errors, retry attempts, optional neste…

A presentation + control surface for choosing the environment an app targets (dev / staging / production, regions, preview branches). Current-environment trigg…

A production comment thread your app persists: root comments + nested replies, mentions, reactions, edit, resolve/reopen, delete, and optimistic send (pending …

A rich, accessible refresh indicator your app drives: idle, checking, refreshing (determinate or honestly-indeterminate), partially updated, success, stale, of…

A mobile-first filter workflow, not a sheet of checkboxes: app-defined groups (checkbox, radio, range, date, search-within-options, hierarchical, custom) with …

A presentation-only, production-oriented prompt-composition surface: multiline draft, caret-aware {{variable}} insertion, app-supplied attachments/templates/mo…

A presentation-only console for an app-owned stream of outbound webhook deliveries: animated arrival, per-delivery status (icon+text), retry counts, response c…

A presentation-only, fully-controlled @-mention suggestion popup: the app owns the editable field and text insertion while the component renders an accessible,…

A presentation-only data-quality panel that displays app-supplied freshness/completeness/accuracy metrics (rendering "Unknown" when unmeasured), a filterable l…

A presentation-only mobile form whose sticky Submit/Cancel bar rides above the virtual keyboard via the VisualViewport API (degrading gracefully to a plain sti…

An application-controlled file upload workflow: presents app-supplied upload items with progress, pause/resume/retry/cancel/remove, processing stages, and empt…

A production variant selector for product options (color/size/material/plan/bundle/custom): controlled selection, dependent options, app-supplied availability …

A presentation + orchestration layer for passkey (WebAuthn) setup. The app supplies WebAuthn operations and results; the component renders intro/capability/nam…

A message list with an honest delivery-receipt layer for chat/support/collaboration: draft/sending/sent/delivered/read/failed/retrying/scheduled/cancelled/edit…

An application-controlled Kanban interaction layer: pointer + touch + keyboard/menu card movement, drop validation, optimistic move with failure rollback, drop…

A presentation-only queue MANAGER for a collection of files/jobs — priority lanes, concurrency-slot occupancy, blocked-item explanation, queue-level progress, …

An app-controlled animated cart LINE ITEM (not a full cart) — arrival, quantity/total morph, variant crossfade, price-change, limited/unavailable, removal→Undo…

Orchestration + presentation for adding a second auth factor (authenticator/security-key/SMS/email/recovery-codes/custom). The app supplies all operations + st…

A combined real-time typing + participant-presence strip for messaging/collaboration — presence (online/active/idle/away/offline/reconnecting) + typing (typing…

An app-controlled task DEPENDENCY visualization (not a graph editor / not pan-zoom-only). Deterministic dependency-depth layout with static SVG lines, blocked/…

A presentation-only timeline for ONE ingested item moving through multiple app-owned processing stages (scan → transcode → thumbnail → caption → publish) — per…

An app-controlled multi-step checkout progress/orchestration surface (not a payment processor) — current + completed + editable steps, per-step validation + bl…

A presentation + control surface for reviewing and revoking active account sessions — device/browser/os, app-supplied approximate location + IP summary + trust…

A presentation-only navigation + expansion surface for deeply nested discussions — expand/collapse branches, jump to next unread branch, go-to-parent, selected…

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…

A composed, app-controlled AI agent workspace that composes Agent Run Timeline + Tool Call Activity + AI Response Stream + Source Citation Rail into one realis…

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…

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 — a…

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 Ro…

The complete AI Interface Pack — installs the AI Agent Workspace block and its four components (AI Response Stream, Tool Call Activity, Source Citation Rail, A…

The complete Developer Tools Pack — installs the Deployment Command Center block and its four components (Deployment Pipeline, Live Log Stream, API Request Ins…

The complete Collaboration Pack — installs the Collaborative Review Workspace block and its four components (Live Presence Stack, Activity Stream, Approval Wor…

The complete Data Motion Pack — installs the Live Operations Dashboard block and its four components (KPI Number Morph, Streaming Data Rows, Filter Result Tran…

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…

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

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

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

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

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

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

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. Reduc…

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…

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.

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 fini…

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 i…

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…

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 can…

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 the…

Two inline-SVG animated icons — AnimatedArrow (nudge) and AnimatedCopy (copy-to-check swap) — triggered on hover, tap, focus, or mount. Decorative and inherit …

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 liqui…

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 fli…

A refraction lens that floats over your own content: everything under the glass magnifies with a chromatic fringe while the background grid physically bends ar…

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 rend…

A floating action button that blooms into satellite actions through a gooey metaball merge - blur plus alpha contrast under the hood - with underdamped springs…

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. …

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…

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 fa…

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 shi…

Hero copy that arrives cast rather than printed: words are measured into real visual lines and each runs its own underdamped spring (k=180, c=16) with blur, ro…

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,…

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 a…

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-l…

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…

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 til…

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 lif…

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 pointe…

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, o…

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 odomet…

A feed whose cards shear and stretch with scroll velocity and rubber-snap back when you stop. Smoothed velocity drives a real spring (s" = k(target - s) - c*s'…

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 cue…

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 elas…

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 …

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 t…

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 o…