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.

· · ·

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

GOLD SPONSORS
Be the first — and your logo appears here and on .

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.

AI Interface pack: a prompt is submitted, the agent runs tools with a human approval step, and the response streams in with source citations
Deployment Pipeline: install and build pass, tests fail, logs expand, retry is focused and run, and the deploy finishes green
Data Motion pack: a refresh begins, KPI numbers morph, table rows reorder, and the updated state settles
Collaboration pack: a collaborator joins the presence stack, a comment lands in the release thread, and the approval completes

Install a component

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

bash
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 , so on a current CLI the short form works with no components.json entry:

bash
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:

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

Requirements: React 18.3+ or 19, Tailwind CSS v4, and a .

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

BuildStart with
AI products, ,
Developer platforms, ,
Collaborative apps, ,
Data products, ,
Marketing pages, ,
Showpiece motion, ,
Complete workflows, , ,

Production readiness is the feature

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

GuaranteeWhat it means
AccessibilityWCAG 2.2 AA target, keyboard operation, visible focus, and screen-reader semantics
Motion safetyTested reduced-motion behavior and offscreen pause for continuous animation
App compatibilityStrict TypeScript, intentional "use client" boundaries, SSR and RSC checks
Source qualitySemantic tokens, bounded dependencies, cleanup for listeners and animation loops
Consumer confidenceUnit, 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 ).

bash
git clone https://github.com/RMahammad/motiq.gitcd motiqpnpm installpnpm buildpnpm --filter docs-site dev

Useful checks:

bash
pnpm lintpnpm typecheckpnpm testpnpm docs:check

The main workspace lives in:

text
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 enforcementapps/  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:

  • so more React developers can find it.
  • Share a component or workflow you shipped with Motiq.
  • .
  • Pick up a focused issue and read the .

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 — your logo could be the first.

Support once with a coffee, or back Motiq monthly:

TierMonthlyYou get
☕ Supporter$3Name in (+ Discord supporter role — server coming soon)
💙 Backer$10Above + priority issue triage + a vote on the roadmap
⭐ Sponsor$25Above + your logo in this README and on the docs sponsors page
🏢 Gold Sponsor$100Above + prominent placement on the 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 by . 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: , , , , and , whose registry format Motiq ships against.

License

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