Motiq

Animated React components for product interfaces that feel alive.

86 components, 8 workflow blocks, and 4 packs — all free and open source.
Install the source with shadcn. Own the code. Ship it your way.

Explore components · Get started · Browse workflow packs · Contribute

⭐ If Motiq is useful to you, star the repo — it is free, takes a second, and is how other developers find it.

_{GOLD SPONSORS
Be the first — sponsor Motiq and your logo appears here and on motiq.dev.}

Why Motiq?

Most animation libraries stop at the effect. Motiq focuses on the product interface around it: real states, real interactions, and the details that make a component safe to ship.

• Built for product UI — AI responses, deployment pipelines, live data, collaboration, security, commerce, files, and other application workflows.
• Editable source — shadcn installs the TypeScript and Tailwind source directly into your project. There is no black-box runtime package or vendor lock-in.
• Accessible by default — keyboard behavior, focus management, screen-reader semantics, and color-independent states are part of the component contract.
• Reduced-motion safe — every animation has a deliberate prefers-reduced-motion behavior; continuous effects pause when offscreen.
• React Server Component safe — client boundaries are explicit and tested for modern Next.js applications.
• Designed as a system — shared semantic tokens and motion primitives keep the catalog coherent when several components appear on the same screen.

AI interfaces · Developer tools · Collaboration · Data motion · Commerce · Security · Communication · Productivity · Files · Mobile · Text · Creative UI · Backgrounds · Workflow environments · Cursor, scroll & media showpieces · Animated shadcn · Animated icons

Complete workflows, in motion

Every preview below is rendered from unmodified registry source — the same components the install command copies into your project. Each loop plays a full workflow to its finished state: the failure is inspected and retried, the answer streams to its citations, the refresh settles, the approval completes.

Install a component

Motiq uses a shadcn-compatible registry. Add any component with a single command — no account, no config, nothing to register:

npx shadcn@latest add https://motiq.dev/r/ai-response-stream

The command copies the component and its registry dependencies into your project. Every component page has its exact copy-ready command.

@motiq is listed in the shadcn CLI's registry directory, so on a current CLI the short form works with no components.json entry:

npx shadcn@latest add @motiq/ai-response-stream

This repository is also a shadcn registry in its own right, so you can install straight from GitHub and pin to a tag:

npx shadcn@latest add RMahammad/motiq/ai-response-stream

Requirements: React 18.3+ or 19, Tailwind CSS v4, and a shadcn-initialized project.

Read the installation guide →

Explore the catalog

Motiq includes 86 components, 8 composed workflow blocks, and 4 one-command packs across 20 categories — 94 catalog items in all, published as a 100-item shadcn registry (components, blocks, primitives, and utilities).

Build	Start with
AI products	AI Response Stream, Agent Run Timeline, Tool Call Activity
Developer platforms	Deployment Pipeline, Live Log Stream, API Request Inspector
Collaborative apps	Live Presence Stack, Comment Thread, Approval Workflow
Data products	KPI Number Morph, Streaming Data Rows, Data Refresh State
Marketing pages	Kinetic Emphasis, Sticky Zoom Hero, Aurora Panel
Showpiece motion	Cursor Comet, Depth Parallax Scene, Compare Reveal
Complete workflows	AI Interface Pack, Developer Tools Pack, Collaboration Pack, Data Motion Pack

Browse every component with a live preview →

Production readiness is the feature

A polished preview is only the beginning. Components are held to the same baseline:

Guarantee	What it means
Accessibility	WCAG 2.2 AA target, keyboard operation, visible focus, and screen-reader semantics
Motion safety	Tested reduced-motion behavior and offscreen pause for continuous animation
App compatibility	Strict TypeScript, intentional "use client" boundaries, SSR and RSC checks
Source quality	Semantic tokens, bounded dependencies, cleanup for listeners and animation loops
Consumer confidence	Unit, interaction, accessibility, and clean-project fixture coverage

The catalog favors a smaller, coherent collection of useful product interfaces over an endless gallery of disconnected effects.

Local development

Motiq is a pnpm monorepo and requires Node.js 22.13 or newer (see .nvmrc).

git clone https://github.com/RMahammad/motiq.git
cd motiq
pnpm install
pnpm build
pnpm --filter docs-site dev

Useful checks:

pnpm lint
pnpm typecheck
pnpm test
pnpm docs:check

The main workspace lives in:

packages/
  tokens/           Semantic design and motion tokens
  motion/           Shared motion primitives
  react/            React components
  sections/         Composed sections and blocks
  recipes/          Multi-component composed recipes
  registry/         shadcn registry source and generator
  remotion/         Video-only compositions (isolated from the React packages)
  eslint-config/    Shared lint rules and boundary enforcement
apps/
  docs/             Documentation, live previews, and registry host
  storybook/        Component stories
  promo/            Remotion renderer for campaign and showcase assets
  playground-next/  Clean-project install fixture (Next.js)
  playground-vite/  Clean-project install fixture (Vite)

Help Motiq grow

Motiq is independently built and maintained. If it saves you time:

• Star the repository so more React developers can find it.
• Share a component or workflow you shipped with Motiq.
• Report a bug or suggest an improvement.
• Pick up a focused issue and read the contribution guide.

Sponsors

The entire catalog is free and always will be. Motiq is built and maintained independently — sponsorship funds the unglamorous work that keeps it shippable: accessibility reviews, cross-browser testing, registry hosting, and documentation.

Sponsors are recognized here and on motiq.dev — your logo could be the first.

Support once with a coffee, or back Motiq monthly:

Tier	Monthly	You get
☕ Supporter	$3	Name in SPONSORS.md (+ Discord supporter role — server coming soon)
💙 Backer	$10	Above + priority issue triage + a vote on the roadmap
⭐ Sponsor	$25	Above + your logo in this README and on the docs sponsors page
🏢 Gold Sponsor	$100	Above + prominent placement on the motiq.dev homepage

Tiers and benefits are agreed transparently before any payment, and Motiq never publishes invented audience or reach numbers.

Contributors

Acknowledgments

Motiq is a one-maintainer project with a catalog-sized surface area, and a lot of that reach comes from building with Claude Code by Anthropic. It is part of the day-to-day workflow here:

• Component work — drafting new components against the existing token and motion primitives, then reviewing the result for the guarantees in the table above rather than just the happy path.
• Accessibility and motion passes — sweeping the catalog for keyboard traps, focus handling, color-independent states, and missing prefers-reduced-motion behavior, which is exactly the tedious work a solo maintainer skips.
• Consistency at scale — applying a convention change across all 94 catalog items and their tests, docs pages, and registry entries in one coherent pass.
• Docs and registry plumbing — keeping component pages, install commands, and registry metadata in sync with the source.

Every change still goes through the same review, tests, and checks as any other contribution — the tooling accelerates the work, it does not approve it.

Thanks as well to the projects Motiq is built on: React, Tailwind CSS, Motion, Radix UI, and shadcn/ui, whose registry format Motiq ships against.

License

MIT © Mahammad Rustamov. Use, modify, and ship Motiq in personal and commercial projects.