Animated components for OpenCode

Run opencode in your project, point it at the piece's PROMPT.md, and the login, checkout or sidebar lands in your Next.js app with its timings intact.

OpenCode is an open-source coding agent (MIT on GitHub) that runs as a terminal interface, a desktop app and an IDE extension. It works with 75+ model providers, local models included, and you can log in with a GitHub Copilot or ChatGPT Plus/Pro account. Project instructions live in AGENTS.md, which the /init command creates or updates; personal rules go in ~/.config/opencode/AGENTS.md. If there's no AGENTS.md, it falls back to CLAUDE.md, and opencode.json can pull in other files, for example .cursor/rules/*.md. Its built-in plan agent looks at code and suggests changes without editing anything. Source: OpenCode docs: rules, OpenCode docs: agents, opencode.ai, anomalyco/opencode on GitHub (MIT).

NEW

Step-Up OTP Gate

$3

Arcs spin around six chunky cells, merge into one check, and the blurred dashboard behind them unlocks.

NEW

Receipt Morph Checkout

$3

Your card becomes the receipt: it splits, unrolls into paper and gets stamped PAID.

NEW

Reflow Sidebar

$3

Collapse the sidebar to an icon rail and the whole app reflows with it on a spring.

How to add one with OpenCode

  1. 1Unzip the download into your repo, for example under components/qodesign, and commit first so the diff is easy to read.
  2. 2Run opencode in the project folder. Optionally ask the plan agent to read components/qodesign/PROMPT.md and lay out the changes before anything is edited.
  3. 3Switch to the build agent, tell it which page should get the piece, approve the npm install, then compare the motion with the live preview on our site.
  4. 4Add one line to AGENTS.md, such as "Don't change animation durations or easing in components/qodesign". If your rules live in .cursor/rules, list them under instructions in opencode.json instead of copying them.

Free pieces, one command each

  • Toast stack
    npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/toast-stack.json
  • Monthly/yearly pricing toggle
    npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/pricing-switch.json
  • File upload dropzone
    npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/upload-dropzone.json
  • Day / night theme toggle
    npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/day-night-toggle.json
  • Observability dashboard
    npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/orbit-dashboard.json
  • Trading dashboard
    npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/ledger-dashboard.json

Guides with the code and props

Paid pieces start at $3 each, or get every one with the Shelf for $29, once.

Comparing libraries for OpenCode

  • qodesign vs Motion PrimitivesMotion Primitives is best for: small motion building blocks you compose yourself: text effects, number tickers, dialogs, toolbars.
  • qodesign vs React BitsReact Bits is best for: text animations, animated backgrounds and creative effects.

All comparisons, with prices read on each library's own site.

Questions

Will OpenCode use my Cursor rules?

It can. OpenCode's docs show an instructions list in opencode.json that accepts paths and globs like .cursor/rules/*.md, so you don't have to copy them into AGENTS.md.

Do I need a paid model to use these pieces with OpenCode?

No. OpenCode says free models are included and you can bring any provider. Any model that can read PROMPT.md and edit files can install the piece.

Is anything free?

Yes. Six pieces are free under the MIT licence and install with one shadcn command. The Day / Night toggle is also on the free code page.

Can I use them in a client project?

Yes. The licence covers personal, commercial and client projects. You can't resell the source code itself.