Lucerna
A glass hero where you brush lamps to switch them on
A one-screen hero section for a lighting shop, with seven glass pendant lamps hanging from a glass rail inside a frosted glass panel. Good for: the top of a lighting, interiors or homeware store, or any product range you want people to play with. How it works: move your mouse or swipe along the rail and each lamp you pass turns on with a warm glow, a cone of light and its name and price underneath, while the cords swing like real pendulums. You can also drag a lamp along the rail to push the others aside, or click one to open a frosted detail view with a dimmer, its specs, previous and next, and a reserve button. Includes: the hero, the detail view, a light and a dark theme, keyboard controls, phone and tablet layouts, and the lamp photos. How to use: swap in your own products and photos in one data file and connect the button to your shop. Built with React and TypeScript.
$14.00 — one-time price, free updates
- A React app template
- React and Vite · npm install and it runs
- Build unlimited client sites with it
Built with React, CSS.
What is in the zip
- index.html
- src/App.tsx
- src/app.css
- src/clock.ts
- src/data.ts
- src/env.d.ts
- src/main.tsx
- src/rail.ts
- tsconfig.json
Version history
- v1.0.1, 2026-11-08 — Previous works in the detail view. The Previous button in the lamp's detail view did nothing: the lamp's glow spread over it and took the click. The glow and its pool of light now let clicks through, and the details sit above the picture.
- v1.0.0, 2026-11-08 — First release. Lucerna shipped, with the reel recorded from the real page.