NEW
A sign-in page in the dark: a desk lamp finds each field and floods the screen when you sign in.
Animated components for Warp
Put a piece in your repo, let the Warp Agent read its PROMPT.md, and keep the timings safe with one line in AGENTS.md.
Warp is a terminal with a built-in coding agent. The Warp Agent runs commands in a real terminal, reads the output to decide its next step, and asks before it runs commands or edits files. You can use it in the Warp app, in any terminal through the Warp Agent CLI (the warp command), or as a cloud agent. Project rules live in an AGENTS.md file (WARP.md still works) in the repo root or in subfolders; Warp applies the root file and the one in your current folder, and the filename has to be in capitals. Pricing on Oct 21 2026: Free is $0 a month, and Build is $20 a month with $20 of agent usage included. Source: Warp docs: agents overview, Warp docs: rules, Warp docs: Agent CLI quickstart, Warp pricing.
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 Warp
- 1Unzip the download into your repo, for example under components/qodesign.
- 2Open the project in Warp and ask the agent: "Follow components/qodesign/PROMPT.md and add the piece to app/login/page.tsx". Approve the commands and review the diff before it lands.
- 3Run npm run dev and compare the motion with the live preview on our site before you keep the change.
- 4Add one line to AGENTS.md in the repo root, such as "Don't change animation durations or easing in components/qodesign". Warp applies that file automatically, so later tasks keep the timings.
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
- Supabase login page for Next.js
- Cart drawer with Stripe Checkout
- Delete with undo, no confirm dialog
- Animated tab bar for React
- Stacked toast notifications
- Monthly / yearly pricing toggle
Paid pieces start at $3 each, or get every one with the Shelf for $29, once.
Comparing libraries for Warp
- 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
Does Warp read AGENTS.md?
Yes. Warp's rules docs say project rules live in AGENTS.md (or WARP.md for older projects), in the repo root or subfolders, and that Warp applies the root file and the current folder's file automatically. The name must be all capitals.
Do I need a paid plan?
No. The pieces don't care which plan you're on. Warp's pricing page on Oct 21 2026 lists a Free plan at $0 a month and Build at $20 a month with $20 of agent usage included.
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.