Lumen: Pull-Cord Lamp Login

Most login screens are forgotten in a second. Lumen gives yours a tiny story: a desk lamp sits in a dark room, the user grabs its pull cord, gives it a tug and the light floods on to reveal the sign-in form. The cord is a real draggable string with elastic bounce, and the whole thing is pure React, Framer Motion and CSS, with no images to load.

A pull cord that feels physical

The cord is drawn as a live SVG line that stretches and swings as the handle is dragged. Pull it down far enough and the lamp toggles; let go and it springs back with a satisfying bounce.

Two moods in one package

Classic keeps the lamp and card centred with a light beam and email, password and confirm-password fields. Fireflies starts in darkness, then lights the room, sets glowing fireflies drifting across the screen and slides in a glass card with Google and GitHub buttons.

Variants included

• Classic: Centred desk lamp whose warm light beam reveals a compact sign-in card with Google sign-in.
• Fireflies: Split layout: the room starts dark; pull the cord to light it, release glowing fireflies and slide in a glass login card.

Features

• ✓Draggable lamp pull cord with elastic spring-back (Framer Motion drag)
• ✓Live SVG cord that follows the handle
• ✓Light on/off toggle with glow, beam and room-lighting transitions
• ✓Login form fades and un-blurs in when the light switches on
• ✓Classic: email, password and confirm-password fields with show/hide toggles
• ✓Classic: "Continue with Google" button and forgot-password link
• ✓Fireflies: 18 randomly wandering, flickering fireflies
• ✓Fireflies: glass card with username, email and password fields plus Google and GitHub buttons
• ✓Lamp built entirely from CSS shapes: no images or 3D
• ✓Two complete variants with a built-in switcher on the demo page
• ✓Fully responsive phone and tablet layouts

What's included
Full JavaScript source code for 2 variants, 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

• Creative agency and portfolio log-ins
• Smart-home and lighting product sites
• Night-mode or "focus" apps with a playful touch
• Award-site and CodePen-style showcases

From download to production

1. Download Lumen: Pull-Cord Lamp 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.