Blink: Googly-Eyes Monster Sign-Up
A cheerful React sign-up card topped by a fuzzy monster whose googly eyes follow the cursor, eyebrows jump while you type and frown on errors, with loading and success states.
Try it live
The real demo, running in a sandbox. Switch the screen size to see how it adapts.
About this item
Registration forms are where many visitors give up. Blink keeps them smiling: a lime-green monster peeks over the card, its big eyes follow every move of the cursor, its eyebrows bounce while the user types and turn cross if they try to submit an empty form. Submit successfully and the eyes spin while the account is created, then pop with joy.
Eyes that never stop watching
The pupils are calculated from the cursor position relative to each eye, so they look exactly where the pointer is, with natural blinking in between.
Feedback built into the character
Typing lifts the eyebrows, a failed submit shakes the card and angles the brows, submitting spins the pupils with a "Creating Account" loader, and success shows a badge with a "Go to Home" button.
Features
- ✓SVG monster with cursor-tracking googly eyes and blinking
- ✓Eyebrows react to typing and to validation errors
- ✓Shake animation when required fields are missing
- ✓Loading state with spinning pupils and animated dots
- ✓Success badge and home button
- ✓Name, email and password fields
- ✓Facebook and Google sign-up buttons
- ✓Zero dependencies beyond React: plain CSS
What's included
Full JavaScript source code,package.jsonwith locked dependencies, Vite config, RVT.ai README with setup and customisation guide,LICENSEandTHIRD-PARTY-NOTICES.md. Nonode_modules: runnpm installonce.
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
- Language, learning and habit apps
- Newsletter and waitlist sign-ups
- Kids and family products
- Playful SaaS onboarding
From download to production
- Download Blink: Googly-Eyes Monster Sign-Up from your account and unzip it.
- Run
npm install, thennpm run devto open it locally. - Swap in your brand colours, copy and data (see the README customisation guide).
- Run
npm run buildand deploy thedist/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.
Features
- SVG monster with cursor-tracking googly eyes and blinking
- Eyebrows react to typing and to validation errors
- Shake animation when required fields are missing
- Loading state with spinning pupils and animated dots
- Success badge and home button
- Name, email and password fields
- Facebook and Google sign-up buttons
- Zero dependencies beyond React: plain CSS
Files included
- Full source code (React + Vite)
- README.md
- LICENSE (RVT.ai)
- THIRD-PARTY-NOTICES.md
- package.json + package-lock.json
Version 1.0.0 and changelog
Version 1.0.0
Initial RVT.ai release.