2 cases built from this template
Same prompt, different [VARIABLES]. Click one to preview it above.About this template
This is a warm, soft-light landing page for a smart home starter brand, built with React, Tailwind CSS and Motion, and drawn entirely in code — there is not one photograph in it. The first screen sells with an interactive cutaway house: a hand-built SVG of a two-story home with an attached garage. Click or tab a room — living, kitchen, bedroom or garage — and it highlights in calm teal while the card beside it lists the devices inside and the one automation that room runs. The lineup section pairs six device cards with a second, simplified house map: hover a card and its dots pulse where that device lives. Two CSS phone mockups show the app, and the second phone plays the signature scene — Leaving Home — checking off four devices in sequence, with a replay chip. A facts strip, three sample-priced bundles, an FAQ and a reserve-your-kit email band finish the page.
It suits hardware founders and indie makers launching a device kit, a sensor set or any calm consumer product that needs demonstrating rather than describing. The look is warm white with rounded, friendly cards, generous radii and exactly one teal accent reserved for interaction, highlights and primary buttons. Motion stays gentle: room crossfades, softly popping device pins and calm scroll reveals, all still and complete under reduced-motion.
To adapt it, change the brand, the product, the audience and the name of the signature scene; the prompt asks the builder to rewrite every headline, device, automation and FAQ to fit, while the house, phones and layout stay put. Room contents are data-driven from one content file, so swapping what lives in each room takes minutes, not a redesign.
The template prompt
The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].
# Smart Home Product Landing Page
Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.
## Brief
A one-page, warm-white landing page for [BRAND], [PRODUCT]. The hero is anchored by a large interactive cutaway SVG house: clicking a room (living, kitchen, bedroom, garage) highlights it in the single teal accent and shows that room's devices and its one automation in an info card. Below: a four-fact strip, a six-device lineup paired with a simplified house mini-map that pulses where each device lives, two CSS phone mockups (app dashboard and the [SIGNATURE_SCENE] scene playing device by device), three bundles with sample pricing and a quiet starter note, an FAQ, and a reserve-your-kit email band. Every visual is drawn in code — SVG house, device glyphs, phones, logo, favicon. No photographs anywhere.
- Audience: [AUDIENCE] shopping for their first smart home kit, and hardware founders or indie makers launching a device or sensor product who need a landing page that demonstrates rather than describe.
- Goal: Let visitors feel how the system behaves in two clicks — explore rooms in the cutaway house, watch the [SIGNATURE_SCENE] scene run in the phone — then move them to a bundle and the reserve-email band.
- Tone: Warm, calm and specific. Short sentences, plain verbs, real numbers (lumens, battery months, sample prices). Gently playful but never cute-obsessive; no hype words, no exclamation stacking.
## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), motion (motion.dev, import from motion/react) (MIT), lucide-react (ISC), tailwindcss (MIT), postcss (MIT), autoprefixer (MIT), vite (MIT), @vitejs/plugin-react (MIT), typescript (Apache-2.0), @fontsource-variable/nunito (OFL-1.1), @fontsource-variable/figtree (OFL-1.1), @fontsource/ibm-plex-mono (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
- Scaffold with npm create vite@latest using the react-ts template. One page: index.html at the project root with entry src/main.tsx. package.json scripts: dev 'vite', build 'tsc -b && vite build', preview 'vite preview'.
- vite.config.ts: base './', plugins [react()], build { outDir 'dist', sourcemap false, assetsInlineLimit 0 }. No images ship in this template, so dist/ is JS, CSS, woff2 and favicon only; keep it under 3 MB.
- Tailwind 3.4 through PostCSS (tailwindcss + postcss + autoprefixer), content ['./index.html', './src/**/*.{ts,tsx}']. In tailwind.config.ts extend colors with kebab-case keys (cream, shell, panel, sand, line, line-strong, ink, muted, faint, teal, teal-deep, teal-tint), fontFamily display ['Nunito Variable', 'system-ui', 'sans-serif'], sans ['Figtree Variable', 'system-ui', 'sans-serif'], mono ['IBM Plex Mono', 'ui-monospace', 'monospace'], borderRadius { card: '24px', inner: '16px', chip: '10px', house: '28px' }, maxWidth { container: '1160px' }, boxShadow { soft: '0 24px 60px -30px rgba(44,38,32,0.28)', lift: '0 16px 36px -20px rgba(44,38,32,0.22)' }.
- src/fonts.ts imports @fontsource-variable/nunito (weights 600,700,800), @fontsource-variable/figtree (400,500,600,700) and @fontsource/ibm-plex-mono (400,500,600, weight files 400.css/500.css/600.css); src/main.tsx imports src/fonts.ts and src/index.css. index.css holds the Tailwind layers, body background #FAF6EF and color #2C2620, and a @media (prefers-reduced-motion: reduce) block that shortens CSS animations and transitions to 0.01ms.
- File layout: src/content.ts (all copy, room data, device data, bundles, FAQ — typed, no copy in components), src/lib/brand.ts (brandSlug, emailDomain, companyName), src/components/houseGeometry.ts (SVG coordinates for the cutaway house and mini map), src/components/ (Header.tsx, MobileMenu.tsx, Hero.tsx, CutawayHouse.tsx, RoomInfo.tsx, FactsStrip.tsx, DeviceLineup.tsx, MiniMap.tsx, AppPreview.tsx, PhoneDashboard.tsx, PhoneScene.tsx, Bundles.tsx, Faq.tsx, CtaBand.tsx, Footer.tsx, Button.tsx, Reveal.tsx), src/App.tsx composing them in page order.
- src/components/CutawayHouse.tsx renders the geometry described in the Hero section from the ROOMS array in content.ts; it never hard-codes copy. Room selection lives in Hero state (default 'living'); selecting a room (click, Enter or Space) updates the highlight, pins and RoomInfo together.
- Reveal.tsx wraps sections in Motion whileInView fade-up (opacity 0 -> 1, y 20 -> 0, duration 0.6, ease [0.22, 1, 0.36, 1], viewport once with amount 0.2) and renders children unanimated when reduced motion is on. Wrap the app in MotionConfig reducedMotion='user'.
- index.html: lang en, <meta name='theme-color' content='#FAF6EF'>, <link rel='icon' href='./favicon.svg' type='image/svg+xml'>, <title>[BRAND] — A home that handles itself, gently</title>. public/favicon.svg is the logo mark (teal rounded square with the white cutaway-house glyph).
- Write ASSETS.md at the project root: state that every visual (house, mini map, device glyphs, phone mockups, logo, favicon) is drawn in code for this project, and list the Fontsource packages (OFL-1.1, https://fontsource.org) and lucide-react (Lucide contributors, ISC, https://lucide.dev). There are no image files.
## Variables
- [BRAND] — Brand name (default: "Hearthlane"). Invented product name. Used in the wordmark, page title, hero subhead, app UI, FAQ, CTA and the email domain. Never a real smart home brand, ecosystem or voice assistant.
- [PRODUCT] — What the product is (default: "a starter smart home system of six small, calm devices"). One lowercase phrase that completes '[BRAND] is ...'. Drives the hero subhead, lineup intro, app copy and FAQ. Any small-device kit fits: sensors, cameras-free security, lighting.
- [AUDIENCE] — Who it is for (default: "first-time homeowners and young families"). Plural noun phrase. Used in the hero subhead, bundles note and footer line; FAQ answers adapt to it.
- [SIGNATURE_SCENE] — Flagship automation name (default: "Leaving Home"). Title case scene name shown in the second phone, the hero ghost button and the app copy. Pick a short named routine (Away Mode, Night Watch) that fits the new brand.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/smart-home-product-landing-page in the footer (default: yes; delete this line to remove it)
The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.Pro template. The design, sections, motion and assets parts of this prompt are for Pro members. The live demo and DESIGN.md stay free.
DESIGN.md
The design system on its own — colors, type, spacing and motion. Apply this look to a project you already have.
---
name: "Smart Home Product Landing Page"
colors:
cream: "#FAF6EF"
shell: "#F4EDE2"
panel: "#FFFFFF"
sand: "#EFE7DA"
line: "#E5DACB"
line_strong: "#D6C7B0"
ink: "#2C2620"
muted: "#6E655A"
faint: "#9C9184"
teal: "#0F8A85"
teal_deep: "#0B6B67"
teal_tint: "#DCEFEC"
typography:
display_h1_clamp_38px_4_6vw_62px_line_height_1_08_letter_spacing_0_02em_weight_800_h2_clamp_30px_3_4vw_44px_weight_800_card_titles_20_22px_weight_700: { family: "Nunito Variable", weights: [600, 700, 800] }
text_body_16px_1_65_subheads_17_18px_nav_14px_buttons_15px_weight_600: { family: "Figtree Variable", weights: [400, 500, 600, 700] }
mono_device_chips_spec_chips_section_labels_11_12px_letter_spacing_0_12em_uppercase_prices_house_caption: { family: "IBM Plex Mono", weights: [400, 500, 600] }
spacing: "8px base. Container max-width 1160px with 24px side padding (20px below 640px). Sections 104px vertical padding on desktop, 72px on mobile. Section headers have 48px below them. Cards pad 24-28px; the house card pads 20px."
radius: "House card 28px; cards and bundle cards 24px; inner panels and phone app cards 16px; chips 10px; inputs 12px; every button and toggle is a full pill (999px); phone mockup 44px with 34px screen corners."
---
# Smart Home Product Landing Page — Design System
Apply this design system to an existing project. It describes the look and feel only; for the full site, use prompt.md.
## Colors
- **cream** `#FAF6EF` — Page background, warm white
- **shell** `#F4EDE2` — Alternate section background, phone screen base
- **panel** `#FFFFFF` — Cards, house card, bundle cards
- **sand** `#EFE7DA` — Chips, inset panels, furniture fills in the house SVG
- **line** `#E5DACB` — Hairline borders and dividers
- **line-strong** `#D6C7B0` — House SVG walls, ground line, stronger borders
- **ink** `#2C2620` — Primary text, phone body
- **muted** `#6E655A` — Body copy, nav links
- **faint** `#9C9184` — Captions, mono labels, footnotes
- **teal** `#0F8A85` — The single accent: room highlights, pins, primary buttons, active toggles, check icons
- **teal-deep** `#0B6B67` — Hover and pressed states of teal elements
- **teal-tint** `#DCEFEC` — Selected-room fill, soft highlight backgrounds
## Typography
- **Display: H1 clamp(38px, 4.6vw, 62px) line-height 1.08 letter-spacing -0.02em weight 800; H2 clamp(30px, 3.4vw, 44px) weight 800; card titles 20-22px weight 700** — Nunito Variable (OFL), weights 600/700/800. Self-host the font files.
- **Text: body 16px/1.65, subheads 17-18px, nav 14px, buttons 15px weight 600** — Figtree Variable (OFL), weights 400/500/600/700. Self-host the font files.
- **Mono: device chips, spec chips, section labels (11-12px, letter-spacing 0.12em, uppercase), prices, house caption** — IBM Plex Mono (OFL), weights 400/500/600. Self-host the font files.
## Spacing & shape
- Spacing: 8px base. Container max-width 1160px with 24px side padding (20px below 640px). Sections 104px vertical padding on desktop, 72px on mobile. Section headers have 48px below them. Cards pad 24-28px; the house card pads 20px.
- Radius: House card 28px; cards and bundle cards 24px; inner panels and phone app cards 16px; chips 10px; inputs 12px; every button and toggle is a full pill (999px); phone mockup 44px with 34px screen corners.
## Motion
- Room selection: the selected room's fill crossfades to teal-tint over 300ms; the newly selected room's pins pop in (scale 0.8 -> 1, spring stiffness 320 damping 22, staggered 60ms); other rooms' pins settle to 45% opacity.
- Device lineup: hovering or focusing a card pulses its dots in the mini map (scale 1 -> 1.35, 900ms ease-in-out loop) and fades other dots to 35%.
- Phone scene: four steps check off in sequence (500ms apart) when 60% in view, progress bar fills to match, header status swaps from RUNNING to ALL SET; a Run again chip replays it.
- Scroll reveals: fade up 20px, 0.6s, ease [0.22, 1, 0.36, 1], once, stagger 0.06-0.1s.
- Hover lifts: cards rise 3px with the lift shadow over 220ms; toggles slide their knob 180ms.
- prefers-reduced-motion: no pops, pulses, sequences or reveals; the scene phone shows all steps checked, states static, full contrast everywhere.
## Imagery
Everything drawn in code: the cutaway house, mini map, device glyphs, phone mockups, logo mark and favicon are SVG/CSS built from the coordinates in this spec; no photographs, no people, no external image files of any kind. Warm whites and sand tones carry the house; teal appears only as the interactive accent (pins, highlights, primary buttons).
## Tone
Warm, calm and specific. Short sentences, plain verbs, real numbers (lumens, battery months, sample prices). Gently playful but never cute-obsessive; no hype words, no exclamation stacking.
---
— Prompt by VibeFather · https://vibefather.ai/t/smart-home-product-landing-page · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown
Make it yours
- A sensor startup: set BRAND and PRODUCT to your sensor kit, rename SIGNATURE_SCENE to your flagship routine, and rewrite each room's device list to your sensors and the automation they trigger.
- A lighting maker: keep the cutaway house but swap the six lineup cards for your bulbs and strips, and set the room automations to dimming and wake-up scenes that fit your app.
- A home security brand: point SIGNATURE_SCENE at your away or night routine, replace the garage room contents with entry sensors, and rewrite the bundles to your starter kits.
- An indie hardware founder: set AUDIENCE to your backers, use the reserve-your-kit email band as a waitlist, and rewrite the three bundles to your pre-order tiers with sample prices.
Smart Home Product Landing Page: questions and answers
What is the interactive cutaway house on the Smart Home Product Landing Page and how does it work?
The Smart Home Product Landing Page hero centers on a hand-built SVG of a two-story home with an attached garage. Visitors click or tab a room — living, kitchen, bedroom or garage — and that room highlights in teal while a card beside it lists the devices inside and the one automation that room runs. Room contents come from one content file, so swapping what lives where is a data edit, not a redesign.
How do I change the rooms, devices and automations in the cutaway house to match my own product?
The Smart Home Product Landing Page keeps every room, device and automation in a single typed content file, and the house component reads from that array rather than hard-coding copy. Edit the room entries to change which devices appear and which automation each room runs, then update the device lineup cards to match. The house geometry and layout stay put while the contents follow your product.
Can I use the Smart Home Product Landing Page template for a client project or a commercial product launch?
Commercial and client use of the Smart Home Product Landing Page requires Pro. The template is a Pro template: its brief, stack and variables are public, the full prompt is available to Pro members, and source code of the demos comes with Pro. Free prompts and every DESIGN.md are licensed for personal, non-commercial use only.
What should I change first when adapting the Smart Home Product Landing Page to my brand?
Start with the four variables: set BRAND to your product name, PRODUCT to what the kit is, AUDIENCE to who it is for, and SIGNATURE_SCENE to the name of your flagship routine. Then rewrite every headline, device, automation and FAQ answer to fit, since the copy ships written for the default brand. The house, phone mockups and layout stay as described.
Does the Smart Home Product Landing Page use any photographs or image files?
The Smart Home Product Landing Page contains no photographs. Every visual is drawn in code: the cutaway house, the simplified mini-map, the device glyphs, the two CSS phone mockups, the logo and the favicon. The build ships only JavaScript, CSS, font files and the favicon, so there are no image assets to source, license or compress before launch.
How do I build a smart home product landing page with AI?
Copy the full prompt (Pro) from this page or run npx vibefather add smart-home-product-landing-page, replace [BRAND], [PRODUCT], [AUDIENCE] and [SIGNATURE_SCENE] with your own content, and paste it into Claude Code, Codex, Cursor or another AI coding agent. The live demos were built from exactly that text.
Which AI model built the Smart Home Product Landing Page demo?
The Smart home starter kit case was built by GLM-5.3 in ZCode; the Renters security kit case was built by DeepSeek V4.1 Flash in DeepSeek Harness. Each build used the published prompt with nothing added, so you can compare the models side by side.
What tech stack and pages does the Smart Home Product Landing Page template use?
Smart Home Product Landing Page is a single-page site built with Tailwind CSS, Motion and React, with scroll animation and micro-interactions. The prompt fixes the stack so every AI tool builds the same kind of project, and the result runs as a static site you can host anywhere.
Is the Smart Home Product Landing Page template free to use?
Smart Home Product Landing Page is a Pro template: the brief, stack and variables are public, and the full prompt, the source code of the live demo and a commercial license come with VibeFather Pro. Its DESIGN.md is free for personal projects.
Does the Smart Home Product Landing Page template work on mobile?
Yes. Every Smart Home Product Landing Page build was tested on a phone-sized screen as well as desktop before it went live, checking layout, text size and touch targets. Open the live demo on your phone, or switch the preview on this page to mobile view, to check it yourself.