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 Lovable
Give a Lovable app a login, cart or checkout that moves. The pieces are plain React + Tailwind, so they don't depend on Next.js.
Lovable's FAQ says new apps (from May 13, 2026) use TanStack Start and older apps use React + Vite, and that it doesn't offer Next.js. Our pieces are React components with Tailwind CSS and Framer Motion, so they run in both. The "use client" line at the top is a Next.js hint that other setups ignore. Source: Lovable FAQ.
NEW
Products fly into the cart as discs; open it and they unfold into line items.
NEW
Your card becomes the receipt: it splits, unrolls into paper and gets stamped PAID.
How to add one with Lovable
- 1Open the download and find PROMPT.md. It explains which files to copy and what to install.
- 2Paste the prompt into Lovable's chat and attach or paste the component files it names.
- 3Ask Lovable to connect the callbacks to your backend, for example onVerify to your one-time-code check.
Guides with the code and props
- Animated login page for React
- Animated cart drawer for React
- Checkout that turns into a receipt
- Animated OTP input for React
- Login form with a shy mascot
- Animated analytics dashboard
Paid pieces start at $3 each, or get every one with the Shelf for $29, once.
Questions
Do I need Next.js?
No. The components are React. In a Lovable app you can ignore the Next.js notes in the guides.
Do they work with Supabase auth?
The login and OTP pieces take callbacks. Point them at your Supabase sign-in or code check; the piece only handles the animation and the form.
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.