Animated React components
One page per piece: what it does, how it fits a Next.js + Tailwind app, and the prompt to paste into Cursor, v0 or Lovable.
- Animated tab bar for React + Tailwind (liquid glass, Next.js)A liquid glass drop slides between tabs and opens into a music player. React, Tailwind, Framer Motion.
- Dynamic Island navbar for React + Tailwind (Next.js)A pill navbar that morphs for a notification, a music player and search.
- Animated login page for React + Tailwind (spotlight lamp, Next.js)A desk lamp finds each field in the dark and floods the screen when you sign in.
- Animated login form with a mascot for React + TailwindHe watches you type the email and covers his eyes for the password. A React, Tailwind and TypeScript login form for Next.js, with a PROMPT.md.
- Pull-cord login form for React + Tailwind (lamp animation)Pull the cord, the lamp turns on and the login card appears. A React, Tailwind and TypeScript login form for Next.js, with a PROMPT.md for Cursor or v0.
- Animated OTP input for React + Tailwind (2FA verification, Next.js)Six code cells, spinning arcs, one check, and the page behind unlocks.
- Animated cart drawer for React + Tailwind (Next.js e-commerce)Products fly into the cart as discs and unfold into line items. A React, Tailwind and TypeScript cart drawer for Next.js, with a free shipping threshold.
- Checkout animation for React + Tailwind (card to receipt, Next.js)The card splits, unrolls into paper and gets stamped PAID. A React, Tailwind and TypeScript checkout for Next.js with Stripe Elements in the card fields.
- Animated credit card form for React + Tailwind (3D flip, Next.js)A 3D card fills in as you type and flips for the CVC. React, Tailwind and TypeScript, with Stripe Elements in the card fields for Next.js checkouts.
- Hold to delete button for React + Tailwind (with undo)Press and hold, the file crumples into the bin, and Undo stays for a few seconds.
- Day/night theme toggle for React + Tailwind (free, Next.js)The sun rolls into a moon, clouds fall away and stars drop in. A free, MIT licensed React, Tailwind and TypeScript theme toggle you add with one command.
- Animated analytics dashboard template for React + Tailwind (Next.js)A dark dashboard where every number counts up and the charts draw in. React, Tailwind and TypeScript source for Next.js, with a PROMPT.md for Cursor or v0.
- SaaS dashboard with a ⌘K command palette for React + TailwindA whole app you drive from the command palette. Rows stretch into pages.
- Particle text animation for React + Three.js (Next.js)9,000 particles spring between a sphere, your word and a torus knot. React, Tailwind and TypeScript with three.js, plus a PROMPT.md for Cursor or v0.
- Liquid metal WebGL shader for React (chrome blob, Next.js)A drop of liquid chrome drawn live by a WebGL shader. No three.js and no extra packages: React, Tailwind and TypeScript source for Next.js.
- Stacked toast notifications for React + Tailwind (free, Next.js)Toasts stack like a deck, fan out on hover and swipe away. Free and MIT licensed: React, Tailwind and TypeScript, added to Next.js with one shadcn command.
- Monthly/yearly pricing toggle for React + Tailwind (free)A stretchy pill, prices that roll like an odometer, a 2-months-free badge. Free.
- Animated file upload dropzone for React + Tailwind (free)Drop files, a shockwave rolls out, each file gets a progress ring. Free.
- Observability dashboard template for React + Tailwind (free)KPIs that count up, a live service map, latency chart and events table. Free.
- Trading dashboard template for React + Tailwind (free)Candlesticks, a flashing order book, a buy/sell ticket and a portfolio donut. Free.
- Supabase login page for Next.js (animated, React + Tailwind)The spotlight lamp login wired to Supabase Auth: email and password, the real error message on a wrong password, and a redirect when it works.
- Auth.js (NextAuth) credentials login page, animated (React + Tailwind)The shy-eyes mascot login calling Auth.js signIn with redirect: false, so you choose what happens on a wrong password.
- Next.js cart drawer with Stripe Checkout (animated, React + Tailwind)The stack cart drawer hands its items to a server action, the server action makes a Stripe Checkout session, and the browser goes to Stripe to pay.
- Delete with undo in Next.js (server action, no confirm dialog)Hold to delete, then five seconds to undo. The server action only runs when that window closes, so undo never has to restore anything.
- Three.js hero section for Next.js (particle text, no SSR errors)A particle hero that spells your word, loaded with next/dynamic and ssr: false so the server never touches WebGL.
- AI chat UI for React + Tailwind (animated demo for your landing page)An AI chat screen that plays itself: the prompt lifts into a bubble, an answer card opens and a chart builds. You write every word it shows.
- Supabase Storage upload component for Next.js (free, drag and drop)The free upload dropzone with Supabase Storage as its uploader. Errors land on the file's row with a retry button. MIT.
- Stripe subscription pricing page for Next.js (free monthly/yearly switch)The free pricing switch sends the plan and the billing period to a server action that opens Stripe Checkout in subscription mode.
- Toast after a server action in Next.js (loading → success, free)Wrap the server action in toast.promise: a spinner while it runs, a check when it returns, the error message if it throws. Free.
- Liquid glass effect in React + Tailwind (the CSS behind our tab bar)The glass in our tab bar is a backdrop blur, a saturation boost, a thin light border and an inner highlight. Here are the exact values as Tailwind classes.
- Firebase Auth login page for Next.js (animated, React + Tailwind)The pull-cord lamp login wired to Firebase Authentication: email and password, a shake on a wrong password, and a redirect when it works.
- Custom Clerk sign-in page for Next.js (animated, React + Tailwind)The spotlight lamp login on Clerk's useSignIn hook: password sign-in, Clerk's own error text under the field, and a redirect when the session is ready.
- Stripe revenue dashboard for Next.js (animated, React + Tailwind)The animated analytics dashboard fed by your Stripe charges: revenue, orders, change against the previous period and a goal ring, read on the server.
- Collapsible sidebar for React + Tailwind (icon rail, Next.js app shell)Collapse the sidebar to a 76 px icon rail and the page reflows with it on a spring. React and Framer Motion, ready for the Next.js App Router.
- Supabase email OTP login for Next.js (animated 6-digit code, React + Tailwind)Passwordless sign-in with Supabase: the user types their email, gets a 6-digit code, and the animated code card checks it with verifyOtp and opens the app.
- Better Auth login page for Next.js (animated, React + Tailwind)The pull-cord lamp login calling Better Auth's signIn.email: Better Auth's own error text on a wrong password, a shake, and a redirect when it works.
- Stripe Elements custom card form for Next.js (animated, React + Tailwind)The 3D card checkout with Stripe's own card fields inside it. Your server sets the amount, and the card still flips for the CVC.
- Polar checkout for Next.js with a monthly/yearly pricing page (free component)The free pricing switch sends the chosen plan and billing period to Polar's Next.js checkout route, which redirects the buyer to Polar to pay.