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 Jules
Commit a piece to your GitHub repo, give Jules one task that points at its PROMPT.md, and review the pull request with the motion intact.
Jules is Google's asynchronous coding agent: you connect a GitHub account, pick repos, and each task runs in a short-lived Ubuntu VM that clones the repo, installs dependencies and runs tests, with Node.js 22, npm, pnpm and yarn preinstalled. Its getting-started guide has a step for including an AGENTS.md file, and its environment docs say Jules also reads agents.md or your README for setup hints; a setup script can be added for anything more. Plans on Oct 21 2026: the free plan allows 15 tasks a day (rolling 24 hours) and 3 at a time; Jules in Pro (100 a day, 15 concurrent) and Jules in Ultra (300 a day, 60 concurrent) come with the Google AI Pro and Ultra subscriptions, which their docs say are available only for individual @gmail.com accounts for now. Source: Jules docs: getting started, Jules docs: environment setup, Jules docs: usage and limits, Jules docs: FAQ, jules.google.
NEW
Products fly into the cart as discs; open it and they unfold into line items.
A delete button you press and hold, then the file crumples into the bin.
How to add one with Jules
- 1Unzip the download into your repo, for example under components/qodesign, and push it to GitHub. Jules works from the repo, so it can't read a zip on your laptop.
- 2Start a task: "Follow components/qodesign/PROMPT.md and add the piece to app/login/page.tsx". Read the plan Jules proposes before approving it.
- 3When the task finishes, open the diff or the pull request, pull the branch locally, and compare the motion with the live preview on our site.
- 4Add one line to AGENTS.md in the repo root, such as "Don't change animation durations or easing in components/qodesign", so the next task keeps 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 Jules
- 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 Jules read AGENTS.md?
Yes. Jules' getting-started guide includes a step for adding an AGENTS.md file, and its environment docs say it reads agents.md or your README for hints when it sets up the VM.
Can Jules install the npm dependencies the piece needs?
Yes. Each task runs in a VM with Node.js, npm, pnpm and yarn preinstalled, and Jules' docs say it installs dependencies and runs tests there. If your setup is unusual, add a setup script in the environment settings.
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.