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 goose
Drop a piece into your repo, point goose at its PROMPT.md, and keep the timings safe with one line in AGENTS.md.
goose is an open-source AI agent (Apache 2.0 on GitHub) that runs on your own machine as a desktop app and a CLI on macOS, Linux and Windows, with the model provider of your choice. Its docs say it has moved to the Agentic AI Foundation (AAIF). With the Developer extension on, it reads AGENTS.md and .goosehints by default, from your working folder up to the repo root, and loads the ones in subfolders as it works in them. A global ~/.config/goose/.goosehints applies to every session, and the CONTEXT_FILE_NAMES setting adds other files such as CLAUDE.md. Source: goose docs: providing hints, goose docs: environment variables, goose docs: installation, aaif-goose/goose on GitHub.
NEW
A glass drop magnifies the tab under it, stretches between tabs and bursts into the player.
NEW
A whole SaaS app you drive from ⌘K: rows stretch into pages, coins fly into the total.
How to add one with goose
- 1Unzip the download into your repo, for example under components/qodesign.
- 2Start goose in the repo (desktop app or CLI, with the Developer extension on) and ask: "Follow components/qodesign/PROMPT.md and add the piece to app/login/page.tsx". Ask it to show each change before it applies it.
- 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". goose reads that file at the start of each session, 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 goose
- 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 goose read AGENTS.md?
Yes. goose's docs say it looks for AGENTS.md and .goosehints by default, from your working folder up to the repo root, once the Developer extension is on. Other names like CLAUDE.md can be added with CONTEXT_FILE_NAMES.
Do I need a paid plan?
No. goose is open source under Apache 2.0, and the pieces don't care which model you connect to it. What you pay for model use depends on the provider you pick.
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.