A sign-in page in the dark: a desk lamp finds each field and floods the screen when you sign in.
Catalogue
Loading live demoNEW 
NEW
FREE
NEW
Loading live demoA sign in and create account gate for SaaS apps. The glass card sits over your real dashboard, blurred and alive. Switch tabs and a lime pill stretches across while the form grows a name field and a password strength meter. A wrong password shakes the card and shows your error message. On success the button contracts into a lime check and the view dives through it into the app. Real form with labels, an onSubmit prop for Supabase, Clerk, Auth.js or your own API, Google and GitHub buttons as data, and your own screen as the backdrop.
- React + Tailwind (TSX)
- Next.js App Router ready
- PROMPT.md
- HTML, also included
Install
- One command
npx shadcn@latest add "https://qodesign.dev/r/gateway-dive.json?key=YOUR_KEY"Your key comes with the order. Works in any shadcn project, Next.js App Router included. - Or copy it inThe zip has
react/src/components, ready for Next.js ("use client" included). - Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.
What it does
- Sign in and Create account morph on one card
- Name field and strength meter fold in
- Wrong password: shake plus your message
- Success: button to check, then a dive into the app
- Your dashboard as the live backdrop
- Stack
- React · TypeScript · HTML version
- Released
- Licence
- Personal and client projects. Licence
Came from Instagram? The reel keyword was GATE.
Keep browsing
All 17 paid piecesArcs spin around six chunky cells, merge into one check, and the blurred dashboard behind them unlocks.
A login mascot that watches you type and covers his eyes for the password.
Pull the cord, the lamp turns on, the login form appears.
A theme switch with a sun that sets into a starry night.
A glass drop magnifies the tab under it, stretches between tabs and bursts into the player.