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 Factory Droid
Drop a piece into your repo, point Droid at its PROMPT.md, and keep the timings safe with one line in AGENTS.md.
Droid is Factory's coding agent. It runs in the terminal (the droid CLI, installed with Homebrew, npm or a one-line script), in the Factory App, and inside VS Code, Cursor, Windsurf, JetBrains IDEs and Zed. Its docs say it loads AGENTS.md as coding guidelines, searching from your working folder up to the git root, and also reads CLAUDE.md for compatibility. A DESIGN.md is loaded separately as design guidelines. Plans start at Pro, $20 a month. Source: Factory docs: AGENTS.md, Factory docs: Droid CLI quickstart, Factory docs: IDE integrations, Factory pricing.
NEW
A glass drop magnifies the tab under it, stretches between tabs and bursts into the player.
NEW
Your card becomes the receipt: it splits, unrolls into paper and gets stamped PAID.
How to add one with Factory Droid
- 1Unzip the download into your repo, for example under components/qodesign.
- 2Run droid in the repo (or open it from your editor) and ask: "Follow components/qodesign/PROMPT.md and add the piece to app/login/page.tsx". Review the plan and the diff before you accept them.
- 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". Droid loads that file at the start of each session, so later tasks keep the timings. Visual rules can go in DESIGN.md.
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 Factory Droid
- 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 Factory Droid read AGENTS.md?
Yes. Factory's docs say Droid loads AGENTS.md as coding guidelines, looking from your working folder up to the git root, and CLAUDE.md works too. A DESIGN.md is loaded on its own as design guidelines.
Do I need a paid plan?
For Droid, yes: Factory's individual plans start at Pro, $20 a month. The pieces are separate: six are free, and paid pieces are a one-time purchase.
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.