Cobalt: Robot Squad Login

Cobalt pairs a clean, minimalist white form with a lively illustrated scene: a blue robot, a headphone-wearing groover, a golden star, a teal cube, an orange cyclops and a purple triangle. They watch the cursor, glance at each other and trade speech bubbles while the user types, and turn bashful when the password field is focused.

Six characters, one hand-built SVG scene

Every character blinks, sways and reacts on its own schedule. Their gaze is calculated from the cursor, and while credentials are being typed they turn towards one another as if chatting.

A form that is production-minded

Sign In / Sign Up tabs, labelled inputs with icons, password visibility toggle, "keep me signed in", loading and success states, toast notifications and Google, GitHub and Facebook buttons with callbacks.

Features

• ✓Six animated SVG characters with cursor-tracking eyes
• ✓Characters react to typing, password focus and clicks
• ✓Speech bubbles with character chatter
• ✓Sign In / Sign Up tab switcher
• ✓Username, email and password fields with show/hide toggle
• ✓Keep-me-signed-in checkbox and forgot-password action
• ✓Loading and success states with toast notifications
• ✓Google, GitHub and Facebook social buttons
• ✓Accessible labels and ARIA attributes
• ✓Zero UI dependencies: React + plain CSS

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

• Design-tool and creative SaaS log-ins
• Developer platforms and communities
• EdTech and kids' products
• Product launches that need a memorable first screen

From download to production

1. Download Cobalt: Robot Squad Login 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.