---
name: "@motiq"
slug: "motiq"
description: "Production-ready animated React and Next.js components — accessible, reduced-motion-safe and RSC-safe — installable as editable source with the shadcn CLI. Free and open source."
category: "Animated components"
tags: ["accessibility", "ai", "animation", "auth", "backgrounds", "blocks", "buttons", "cards", "charts", "dashboard", "design-system", "e-commerce", "forms", "glassmorphism", "hooks", "icons", "loaders", "maps", "media", "mobile", "navigation", "onboarding", "overlays", "tables"]
framework: "react"
license: "MIT"
author: "RMahammad"
website: "https://motiq.dev"
github: "https://github.com/RMahammad/motiq"
registry: "https://motiq.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 15
component_count: 100
generated_at: "2026-09-05T09:50:59.044Z"
---

# @motiq

Production-ready animated React and Next.js components — accessible, reduced-motion-safe and RSC-safe — installable as editable source with the shadcn CLI. Free and open source.

## Links

- Website: https://motiq.dev
- GitHub: https://github.com/RMahammad/motiq
- Registry JSON: https://motiq.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/motiq
- This file: https://sh4dcn.vercel.app/md/motiq.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://motiq.dev/r/registry.json
pnpm dlx shadcn@latest add https://motiq.dev/r/registry.json
bunx shadcn@latest add https://motiq.dev/r/registry.json
# clone the source repo
git clone https://github.com/RMahammad/motiq.git
# fetch the raw registry index
curl -s https://motiq.dev/r/registry.json
```

## Components (100)

| name | type | description | install |
| --- | --- | --- | --- |
| utils | registry:lib | Tailwind class-merge helper used by every Motiq component. | `npx shadcn@latest add https://motiq.dev/r/utils.json` |
| primitives | registry:lib | Shared, dependency-free hooks used across workflow components: useReducedMotion, useVisibilityPause (offscreen pause), useSequence (drive live data over time),… | `npx shadcn@latest add https://motiq.dev/r/primitives.json` |
| ai-response-stream | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/ai-response-stream.json` |
| deployment-pipeline | registry:component | Visualize a CI/CD deployment run: ordered stages with queued/running/passed/failed/cancelled/skipped status, running-stage emphasis, per-stage durations, expan… | `npx shadcn@latest add https://motiq.dev/r/deployment-pipeline.json` |
| live-presence-stack | registry:component | A live avatar stack for collaborative workspaces: animated join/leave without row reflow, per-user active/idle/editing/viewing status (dot + label, never color… | `npx shadcn@latest add https://motiq.dev/r/live-presence-stack.json` |
| kpi-number-morph | registry:component | An accessible KPI stat that smoothly morphs between values with a direction-aware trend (arrow + sign, never color alone). Controlled value; locale, compact, a… | `npx shadcn@latest add https://motiq.dev/r/kpi-number-morph.json` |
| tool-call-activity | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/tool-call-activity.json` |
| live-log-stream | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/live-log-stream.json` |
| activity-stream | registry:component | A collaboration/product activity feed that goes beyond a timeline: groups repeated actions, date separators, an unread divider, live arrival insertion, and eve… | `npx shadcn@latest add https://motiq.dev/r/activity-stream.json` |
| streaming-data-rows | registry:component | A live operational table your app drives: animated row insertion, update, resort with continuity, per-cell change emphasis (arrow glyph, never color alone), nu… | `npx shadcn@latest add https://motiq.dev/r/streaming-data-rows.json` |
| luminous-topography | registry:component | A distinctive SVG background of layered topographic contours that flow around configurable focal regions, thinning near a foreground safe area so text stays re… | `npx shadcn@latest add https://motiq.dev/r/luminous-topography.json` |
| workflow-topology-field | registry:component | An atmospheric SVG background that renders an application-defined workflow as a topology: nodes with lifecycle status, directed connections, an animated active… | `npx shadcn@latest add https://motiq.dev/r/workflow-topology-field.json` |
| queue-pulse-lanes | registry:component | A queue/throughput background that renders your lanes rather than decorative streaks: pulses flow through restrained lanes, congestion makes them denser and sl… | `npx shadcn@latest add https://motiq.dev/r/queue-pulse-lanes.json` |
| adaptive-safe-zone-grid | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/adaptive-safe-zone-grid.json` |
| runtime-signal-map | registry:component | An infrastructure-flavored background where signal packets move through an application-defined service topology with health + direction: requests enter at ingr… | `npx shadcn@latest add https://motiq.dev/r/runtime-signal-map.json` |
| event-propagation-matrix | registry:component | A temporal background where application events propagate through a structured cell matrix (rows = regions/streams, cols = time/lanes) — origin cells light, the… | `npx shadcn@latest add https://motiq.dev/r/event-propagation-matrix.json` |
| data-contour-surface | registry:component | A data-driven contour background: contours are computed from application-supplied values (signed focal pressure points, thresholds, active/comparison regions) … | `npx shadcn@latest add https://motiq.dev/r/data-contour-surface.json` |
| agent-operations-hero | registry:block | 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… | `npx shadcn@latest add https://motiq.dev/r/agent-operations-hero.json` |
| deployment-control-hero | registry:block | An editable hero block for developer-tool/infra products showing a real deployment control surface with outcome copy + CTAs. Composes Environment Switcher (sel… | `npx shadcn@latest add https://motiq.dev/r/deployment-control-hero.json` |
| live-data-command-hero | registry:block | An editable hero block for operational-data products centered on continuity and changing state. Composes KPI Number Morph (three metrics), Data Refresh State, … | `npx shadcn@latest add https://motiq.dev/r/live-data-command-hero.json` |
| collaborative-launch-hero | registry:block | An editable hero block for collaboration/review products showing people active, a review underway, and one pending decision with outcome copy + CTAs. Composes … | `npx shadcn@latest add https://motiq.dev/r/collaborative-launch-hero.json` |
| source-citation-rail | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/source-citation-rail.json` |
| api-request-inspector | registry:component | A presentation-only inspection surface for a single HTTP request/response your app already has — method/url/status/duration/timing phases, headers/query/body, … | `npx shadcn@latest add https://motiq.dev/r/api-request-inspector.json` |
| approval-workflow | registry:component | Display and control an app-owned approval process — sequential or parallel stages, required/optional reviewers, minimum approvals, current-user actions (approv… | `npx shadcn@latest add https://motiq.dev/r/approval-workflow.json` |
| filter-result-transition | registry:component | A transition layer for filtered/searched collections your app drives: cards enter, leave, and reorder with layout continuity, the result count morphs, and empt… | `npx shadcn@latest add https://motiq.dev/r/filter-result-transition.json` |
| swipe-action-row | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/swipe-action-row.json` |
| agent-run-timeline | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/agent-run-timeline.json` |
| environment-switcher | registry:component | A presentation + control surface for choosing the environment an app targets (dev / staging / production, regions, preview branches). Current-environment trigg… | `npx shadcn@latest add https://motiq.dev/r/environment-switcher.json` |
| comment-thread | registry:component | A production comment thread your app persists: root comments + nested replies, mentions, reactions, edit, resolve/reopen, delete, and optimistic send (pending … | `npx shadcn@latest add https://motiq.dev/r/comment-thread.json` |
| data-refresh-state | registry:component | A rich, accessible refresh indicator your app drives: idle, checking, refreshing (determinate or honestly-indeterminate), partially updated, success, stale, of… | `npx shadcn@latest add https://motiq.dev/r/data-refresh-state.json` |
| mobile-filter-sheet | registry:component | A mobile-first filter workflow, not a sheet of checkboxes: app-defined groups (checkbox, radio, range, date, search-within-options, hierarchical, custom) with … | `npx shadcn@latest add https://motiq.dev/r/mobile-filter-sheet.json` |
| prompt-composer | registry:component | A presentation-only, production-oriented prompt-composition surface: multiline draft, caret-aware {{variable}} insertion, app-supplied attachments/templates/mo… | `npx shadcn@latest add https://motiq.dev/r/prompt-composer.json` |
| webhook-event-stream | registry:component | A presentation-only console for an app-owned stream of outbound webhook deliveries: animated arrival, per-delivery status (icon+text), retry counts, response c… | `npx shadcn@latest add https://motiq.dev/r/webhook-event-stream.json` |
| mention-suggestions | registry:component | A presentation-only, fully-controlled @-mention suggestion popup: the app owns the editable field and text insertion while the component renders an accessible,… | `npx shadcn@latest add https://motiq.dev/r/mention-suggestions.json` |
| data-quality-status | registry:component | A presentation-only data-quality panel that displays app-supplied freshness/completeness/accuracy metrics (rendering "Unknown" when unmeasured), a filterable l… | `npx shadcn@latest add https://motiq.dev/r/data-quality-status.json` |
| keyboard-safe-form | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/keyboard-safe-form.json` |
| file-upload-pipeline | registry:component | An application-controlled file upload workflow: presents app-supplied upload items with progress, pause/resume/retry/cancel/remove, processing stages, and empt… | `npx shadcn@latest add https://motiq.dev/r/file-upload-pipeline.json` |
| product-variant-selector | registry:component | A production variant selector for product options (color/size/material/plan/bundle/custom): controlled selection, dependent options, app-supplied availability … | `npx shadcn@latest add https://motiq.dev/r/product-variant-selector.json` |
| passkey-setup-flow | registry:component | A presentation + orchestration layer for passkey (WebAuthn) setup. The app supplies WebAuthn operations and results; the component renders intro/capability/nam… | `npx shadcn@latest add https://motiq.dev/r/passkey-setup-flow.json` |
| message-delivery-states | registry:component | A message list with an honest delivery-receipt layer for chat/support/collaboration: draft/sending/sent/delivered/read/failed/retrying/scheduled/cancelled/edit… | `npx shadcn@latest add https://motiq.dev/r/message-delivery-states.json` |
| kanban-card-movement | registry:component | An application-controlled Kanban interaction layer: pointer + touch + keyboard/menu card movement, drop validation, optimistic move with failure rollback, drop… | `npx shadcn@latest add https://motiq.dev/r/kanban-card-movement.json` |
| multi-file-queue | registry:component | A presentation-only queue MANAGER for a collection of files/jobs — priority lanes, concurrency-slot occupancy, blocked-item explanation, queue-level progress, … | `npx shadcn@latest add https://motiq.dev/r/multi-file-queue.json` |
| cart-item-transition | registry:component | An app-controlled animated cart LINE ITEM (not a full cart) — arrival, quantity/total morph, variant crossfade, price-change, limited/unavailable, removal→Undo… | `npx shadcn@latest add https://motiq.dev/r/cart-item-transition.json` |
| two-factor-setup-flow | registry:component | Orchestration + presentation for adding a second auth factor (authenticator/security-key/SMS/email/recovery-codes/custom). The app supplies all operations + st… | `npx shadcn@latest add https://motiq.dev/r/two-factor-setup-flow.json` |
| typing-and-presence | registry:component | A combined real-time typing + participant-presence strip for messaging/collaboration — presence (online/active/idle/away/offline/reconnecting) + typing (typing… | `npx shadcn@latest add https://motiq.dev/r/typing-and-presence.json` |
| task-dependency-map | registry:component | An app-controlled task DEPENDENCY visualization (not a graph editor / not pan-zoom-only). Deterministic dependency-depth layout with static SVG lines, blocked/… | `npx shadcn@latest add https://motiq.dev/r/task-dependency-map.json` |
| processing-timeline | registry:component | A presentation-only timeline for ONE ingested item moving through multiple app-owned processing stages (scan → transcode → thumbnail → caption → publish) — per… | `npx shadcn@latest add https://motiq.dev/r/processing-timeline.json` |
| checkout-progress | registry:component | An app-controlled multi-step checkout progress/orchestration surface (not a payment processor) — current + completed + editable steps, per-step validation + bl… | `npx shadcn@latest add https://motiq.dev/r/checkout-progress.json` |
| session-security-center | registry:component | A presentation + control surface for reviewing and revoking active account sessions — device/browser/os, app-supplied approximate location + IP summary + trust… | `npx shadcn@latest add https://motiq.dev/r/session-security-center.json` |
| thread-expansion | registry:component | A presentation-only navigation + expansion surface for deeply nested discussions — expand/collapse branches, jump to next unread branch, go-to-parent, selected… | `npx shadcn@latest add https://motiq.dev/r/thread-expansion.json` |
| project-timeline | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/project-timeline.json` |
| ai-agent-workspace | registry:block | A composed, app-controlled AI agent workspace that composes Agent Run Timeline + Tool Call Activity + AI Response Stream + Source Citation Rail into one realis… | `npx shadcn@latest add https://motiq.dev/r/ai-agent-workspace.json` |
| deployment-command-center | registry:block | 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… | `npx shadcn@latest add https://motiq.dev/r/deployment-command-center.json` |
| collaborative-review-workspace | registry:block | 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… | `npx shadcn@latest add https://motiq.dev/r/collaborative-review-workspace.json` |
| live-operations-dashboard | registry:block | 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… | `npx shadcn@latest add https://motiq.dev/r/live-operations-dashboard.json` |
| ai-interface-pack | registry:block | 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… | `npx shadcn@latest add https://motiq.dev/r/ai-interface-pack.json` |
| developer-tools-pack | registry:block | The complete Developer Tools Pack — installs the Deployment Command Center block and its four components (Deployment Pipeline, Live Log Stream, API Request Ins… | `npx shadcn@latest add https://motiq.dev/r/developer-tools-pack.json` |
| collaboration-pack | registry:block | The complete Collaboration Pack — installs the Collaborative Review Workspace block and its four components (Live Presence Stack, Activity Stream, Approval Wor… | `npx shadcn@latest add https://motiq.dev/r/collaboration-pack.json` |
| data-motion-pack | registry:block | The complete Data Motion Pack — installs the Live Operations Dashboard block and its four components (KPI Number Morph, Streaming Data Rows, Filter Result Tran… | `npx shadcn@latest add https://motiq.dev/r/data-motion-pack.json` |
| kinetic-emphasis | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/kinetic-emphasis.json` |
| blur-text | registry:component | Reveals text segment-by-segment with a de-blur and drift. Reduced-motion safe. | `npx shadcn@latest add https://motiq.dev/r/blur-text.json` |
| spotlight-card | registry:ui | A surface with a radial glow that follows the pointer. CSS-only, no runtime deps beyond cn. | `npx shadcn@latest add https://motiq.dev/r/spotlight-card.json` |
| animated-dialog | registry:ui | Radix Dialog with Motion enter/exit choreography (scale, slide-up, fade). Preserves portal, focus trap, Esc, and overlay. Reduced-motion safe. | `npx shadcn@latest add https://motiq.dev/r/animated-dialog.json` |
| animated-tabs | registry:ui | Radix Tabs with a Motion layoutId sliding active indicator and cross-faded, direction-aware content. Keyboard and roles preserved. Reduced-motion safe. | `npx shadcn@latest add https://motiq.dev/r/animated-tabs.json` |
| animated-accordion | registry:ui | Radix Accordion with Motion height/opacity reveal and a rotating chevron. Single/multiple modes, keyboard, and disabled state preserved. Reduced-motion safe. | `npx shadcn@latest add https://motiq.dev/r/animated-accordion.json` |
| animated-button | registry:ui | A real button with press-scale feedback and accessible loading (aria-busy + polite spinner) and success states. Solid, outline, and ghost variants. Reduced-mot… | `npx shadcn@latest add https://motiq.dev/r/animated-button.json` |
| rotating-text | registry:ui | 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… | `npx shadcn@latest add https://motiq.dev/r/rotating-text.json` |
| animated-list | registry:ui | 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… | `npx shadcn@latest add https://motiq.dev/r/animated-list.json` |
| animated-grid | registry:ui | 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. | `npx shadcn@latest add https://motiq.dev/r/animated-grid.json` |
| loom-draft | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/loom-draft.json` |
| copperplate-hatch | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/copperplate-hatch.json` |
| chart-recorder | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/chart-recorder.json` |
| riso-registration | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/riso-registration.json` |
| core-strata | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/core-strata.json` |
| animated-icons | registry:ui | Two inline-SVG animated icons — AnimatedArrow (nudge) and AnimatedCopy (copy-to-check swap) — triggered on hover, tap, focus, or mount. Decorative and inherit … | `npx shadcn@latest add https://motiq.dev/r/animated-icons.json` |
| magnetic-dock | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/magnetic-dock.json` |
| cursor-comet | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/cursor-comet.json` |
| lens-card | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/lens-card.json` |
| torch-reveal | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/torch-reveal.json` |
| gooey-actions | registry:component | A floating action button that blooms into satellite actions through a gooey metaball merge - blur plus alpha contrast under the hood - with underdamped springs… | `npx shadcn@latest add https://motiq.dev/r/gooey-actions.json` |
| decrypt-text | registry:component | 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. … | `npx shadcn@latest add https://motiq.dev/r/decrypt-text.json` |
| proximity-type | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/proximity-type.json` |
| split-flap | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/split-flap.json` |
| liquid-fill-headline | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/liquid-fill-headline.json` |
| word-cascade | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/word-cascade.json` |
| holo-card | registry:component | 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,… | `npx shadcn@latest add https://motiq.dev/r/holo-card.json` |
| border-beam-panel | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/border-beam-panel.json` |
| card-stack-deck | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/card-stack-deck.json` |
| glass-refraction-panel | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/glass-refraction-panel.json` |
| aurora-panel | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/aurora-panel.json` |
| sticky-zoom-hero | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/sticky-zoom-hero.json` |
| depth-parallax-scene | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/depth-parallax-scene.json` |
| mask-wipe-sections | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/mask-wipe-sections.json` |
| scroll-count-stats | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/scroll-count-stats.json` |
| velocity-skew-feed | registry:component | 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'… | `npx shadcn@latest add https://motiq.dev/r/velocity-skew-feed.json` |
| orbital-gallery | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/orbital-gallery.json` |
| flow-warp-image | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/flow-warp-image.json` |
| velocity-marquee | registry:component | 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 … | `npx shadcn@latest add https://motiq.dev/r/velocity-marquee.json` |
| filmstrip-scrub | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/filmstrip-scrub.json` |
| compare-reveal | registry:component | 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… | `npx shadcn@latest add https://motiq.dev/r/compare-reveal.json` |

## For AI agents

```text
You are adding components from @motiq to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/motiq.md) for the component list.
2. Fetch the machine-readable index: https://motiq.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: motiq).
```