Sitewright

Lamp login

A login form under a hanging lamp: pull the cord button to switch the light on and reveal a light cone; the form with validation and submit state works either way.

What it is for

sign-in page, connect page

Add it to a site

1 · site.json
"effects": { "templates": ["lamp-login"] }
or on the command line
node ~/.claude/skills/sitewright/scripts/scaffold.mjs --config site.json --out ./my-site --templates lamp-login
2 · import it
import LampLogin from '@/components/fx/tpl/LampLogin';

Files

  • components/fx/tpl/LampLogin.tsx
  • components/fx/tpl/_shared.tsx
  • ui-lamp-login.css styles

About it

Idea from code.xr; the code is written for this kit. Demo data is fictional and deterministic. Every control on the page works, so try it before you take it.

It answers its own width rather than the screen's, so the tablet and phone buttons show the real responsive behaviour. Templates are not components: they are chosen with templates, not components.