Animated components for Next.js

Logins, checkouts, tab bars and dashboards that move. Each one is a client component you drop into the App Router.

Every piece is React + TypeScript with Tailwind CSS and Framer Motion. The files start with "use client", so they work in the App Router and in the Pages Router.

NEW

Liquid Glass Tab Bar

$3

A glass drop magnifies the tab under it, stretches between tabs and bursts into the player.

NEW

Spotlight Lamp Login

$3

A sign-in page in the dark: a desk lamp finds each field and floods the screen when you sign in.

NEW

Step-Up OTP Gate

$3

Arcs spin around six chunky cells, merge into one check, and the blurred dashboard behind them unlocks.

How to add one with Next.js

  1. 1Pick a piece and open its Next.js guide to see the props and the exact file to create.
  2. 2Copy the component folder from the download into your components folder, or run the one-line shadcn command for a free piece.
  3. 3Install framer-motion if the guide lists it, then import the component from any page.

Guides with the code and props

Paid pieces start at $3 each, or get every one with the Shelf for $29, once.

Questions

Do they work with Server Components?

Render them from a Server Component page as usual. The animated part is a client component, marked with "use client" at the top of its file.

Which Tailwind version?

The packages work with Tailwind CSS v3 and v4. Styles Tailwind can't express sit in a small CSS file next to the component.

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.