Gadget landing page
A smart alarm lamp “Ray” landing at the level of Apple product pages — almost black that brightens to morning on scroll: a hero with a CSS lamp where temperature and brightness sliders really change the light, “dawn in 30 minutes” on a sticky scene where the room brightens from night to morning, features in a bento, an exploded view with parts drifting apart, specs as a dashboard with arcs and rolling numbers, a comparison with the previous version, a preorder with colour choice and a shipping countdown, press as a marquee, an FAQ and a footer with an outlined “RAY”. Unbounded, Inter Tight and JetBrains Mono.
A device product page in the style of big brands: the lamp's light changes with sliders right in the hero, a usage story unfolds on scroll, then come specs, a comparison with the previous version and pre-order. The device in the demo is fictional.
What it is made of
11 catalog blocks in page order. Each one is installed with its own command; nothing is recreated.
1. Header
Transparent gadget navbar: glass on scroll and a preorder buttonnavbar-043
Transparent → glass on scroll, “Preorder”, burger.
2. First screen
Gadget hero: a CSS lamp whose light is driven by slidershero-043
A CSS lamp, 2700–6500 K and brightness sliders change the light, the headline appears with it.
3. Dawn
Sunrise in 30 minutes: a sticky scene where the room brightens on scrollgadget-001
A sticky scene: the room brightens from night to morning, the clock 05:30 → 06:00, the lamp glows up.
4. Features
Gadget features bento: an equalizer, sensor rings, a CSS phonebento-012
An equaliser, sensor rings, a CSS phone with a toggle, a spectrum.
5. Inside
Gadget exploded view: parts spread apart by a slider and in the viewportgadget-002
An exploded view: five parts drift apart by the slider and on appear.
6. Specs
Instrument panel: SVG arcs and figures that count up in the viewportstats-012
SVG arcs, rolling numbers, a delta to the previous version.
7. Comparison
Comparison with the previous version: ratio bars and “new” badgescomparison-016
Ray 2 vs Ray 1: ratio bars, “new” chips.
8. Preorder
Gadget preorder: swatches recolour the lamp, a shipping countdown, a magnetic buttongadget-003
Swatches recolour the lamp, bundles, a shipping countdown, “N left in the batch”.
9. Press
Press and reviews: three pull quotes and a tilted marqueetestimonials-035
Three pull-quotes and a slanted marquee.
10. FAQ
FAQ accordion with a plus-to-cross togglefaq-023
An accordion: shipping and warranty.
11. Footer
Gadget footer with a giant outlined wordmark and a batch statusfooter-042
A giant outlined “RAY”, batch status, columns.
Pro
The exact composition, page source and agent link are in PRO
The demo and the block list are open to everyone. Subscribers see every block's props as in the demo, the theme rules, the image prompts and one link an AI agent uses to build the same page.
Get PROFAQ
- What is the “Gadget landing page” page made of?
- 11 catalog sections in order: Transparent gadget navbar, Gadget hero, Sunrise in 30 minutes, Gadget features bento, Gadget exploded view, Instrument panel, Comparison with the previous version, Gadget preorder, Press and reviews, FAQ accordion with a plus-to-cross toggle, Gadget footer with a giant outlined wordmark and a batch status. Each one is a separate VibeUI item.
- How do I build this page with an AI agent?
- Press “Copy the scenario for AI” and paste it into Cursor or Claude Code: the agent gets the page source, shared theme rules and image prompts, and installs every section from the registry with the shadcn CLI.
- Is the scenario free?
- The live demo and the list of sections are open to everyone. The page source and the instruction for the agent come with PRO.