Halo: Glass Auth Card with Docking Chips

Premium products deserve a premium front door. Halo is a chamfered glass card with a gold-and-silver rim over a molten black-and-gold backdrop. Switching between Sign In and Sign Up is a small piece of choreography: the form blurs out, two glass arrow chips glide in from opposite corners, meet at the centre with a golden spark, then separate as the new form blooms into view.

Signature docking transition

A four-stage Framer Motion sequence (fade, glide, spark, bloom) driven by animation controls, so the mode switch feels like a crafted moment rather than a page swap.

Complete sign-in and sign-up

Email and password with remember-me; full name, email, password and confirm password with terms agreement; show/hide toggles, Google and Apple buttons, and animated "Authenticating" and success states.

Features

• ✓Chamfered SVG glass card with gradient gold/silver rim
• ✓Docking arrow-chip transition with golden spark flare
• ✓Sign In and Sign Up modes
• ✓Show/hide toggles on every password field
• ✓Remember-me and terms-agreement checkboxes
• ✓Google and Apple sign-in buttons
• ✓Animated submitting and success states
• ✓Specular light-refraction overlay
• ✓Framer Motion and Lucide icons

What's included
Full JavaScript source code, package.json with locked dependencies, Vite config, RVT.ai README with setup and customisation guide, LICENSE and THIRD-PARTY-NOTICES.md. No node_modules: run npm install once.

Requirements
Node.js 20.19+ and npm 10+ to develop and build. The production build is static HTML, CSS and JavaScript that runs on any static host. No backend, API keys or paid services required.

Perfect for

• Luxury, jewellery and fashion e-commerce accounts
• Private banking and wealth platforms
• Members-only clubs and VIP portals
• Premium SaaS and creative tools

From download to production

1. Download Halo: Glass Auth Card with Docking Chips from your account and unzip it.
2. Run npm install, then npm run dev to open it locally.
3. Swap in your brand colours, copy and data (see the README customisation guide).
4. Run npm run build and deploy the dist/ folder to any static host.

Support and updates
Includes free updates and six months of RVT.ai support. Ask pre-purchase questions in the product Q&A, or open a ticket at https://rvt.ai/support with your order number.

Choose the license for your project

A Regular license covers a single end product that is not sold to end users. Choose Extended for a single end product that is sold to end users, including SaaS products and paid applications. Review the full license terms before checkout.