NEW
Your card becomes the receipt: it splits, unrolls into paper and gets stamped PAID.
Animated components for Antigravity
Add a piece with one shadcn command or from the download, then give Antigravity a glob rule so it leaves the timings alone.
Antigravity is Google's agent app, IDE and CLI. When it reads or edits a file it walks up from that file's folder to the workspace root and loads AGENTS.md or GEMINI.md and the files in .agents/rules/ at each level. Every file in .agents/rules/ needs a trigger in its front matter (always_on, model_decision, glob or manual), and Antigravity silently drops a rule with a missing or misspelled trigger. It only scans the top level of that folder. Google's Gemini CLI docs say unpaid and Google One users were moved to the Antigravity CLI on June 18, 2026. Source: Antigravity docs: rules, Gemini CLI docs: GEMINI.md (move to Antigravity CLI).
NEW
Products fly into the cart as discs; open it and they unfold into line items.
NEW
A glass drop magnifies the tab under it, stretches between tabs and bursts into the player.
How to add one with Antigravity
- 1For a free piece, run one of the shadcn commands below. For a paid piece, unzip the download into your project, for example under components/qodesign.
- 2Ask the agent to read components/qodesign/PROMPT.md and follow it for the page that should get the piece.
- 3Add .agents/rules/qodesign-motion.md with front matter trigger: glob and globs: "components/qodesign/**", and one line: "Don't change animation durations or easing in components/qodesign." Keep it directly in .agents/rules/, since files in subfolders are ignored unless you list them in .agents/rules.json.
- 4Read the diff and the npm install it asks for, run your dev server, and compare the motion with the live preview on our site.
Free pieces, one command each
npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/toast-stack.jsonnpx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/pricing-switch.jsonnpx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/upload-dropzone.jsonnpx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/day-night-toggle.jsonnpx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/orbit-dashboard.jsonnpx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/ledger-dashboard.json
Guides with the code and props
- Cart drawer with Stripe Checkout
- Custom Stripe card form for Next.js
- Animated tab bar for React
- Checkout that turns into a receipt
- Animated file upload dropzone
- Day / night theme toggle
Paid pieces start at $3 each, or get every one with the Shelf for $29, once.
Comparing libraries for Antigravity
- qodesign vs Motion PrimitivesMotion Primitives is best for: small motion building blocks you compose yourself: text effects, number tickers, dialogs, toolbars.
- qodesign vs 21st.dev21st.dev is best for: browsing a huge marketplace and copying many components a month.
All comparisons, with prices read on each library's own site.
From the blog: Cursor Rules for Consistent UI Animations: Tokens, a Rule File and a Check
Questions
Can I put the rule in AGENTS.md instead?
Yes. AGENTS.md takes no front matter and is always on for its folder. A components/qodesign/AGENTS.md with the one motion line works too, and Antigravity loads it whenever it edits a file in that folder.
My rule doesn't seem to load. Why?
Check the trigger. It has to be one of always_on, model_decision, glob or manual, written in snake_case. A file with no trigger, or with alwaysOn, is dropped without a warning.
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.