Villa
A villa atelier page that sells the becoming, not just the finished render - aerial footage of the cliffside site under construction, ocean behind it, with scroll walking the visitor from bare ground toward the finished home. One floating CTA the whole way: Start a villa.
What is included: the aerial scroll hero with stage-by-stage storytelling (groundworks, structure, finishing, keys), a floating pill CTA that never leaves the corner, copy beats timed to the footage, a process timeline section, portfolio strip of completed builds, and an inquiry band.
Customize it: your site footage, four stage lines and the portfolio. The prompt covers making a construction site feel aspirational instead of industrial.
Build a villa developer page called "Villa" that sells the becoming - the site under construction is the hero, not a finished render.
Nav: brand in two weights ("solara" lowercase + "VILLA ATELIER" small caps dimmed), and one floating pill CTA top-right - "Start a villa" - white ground, ink text, position fixed, present on every scroll position of the page. Nothing else in the nav.
Hero: a 300vh runway, fixed full-viewport aerial footage of the site (cliff, ocean, crane), playing free - muted loop, not scrubbed. "Scroll to explore" centered at the bottom in 10px spaced caps, fading on first scroll. Copy beats pinned to scroll thirds, lower-left, each rising and unblurring: 1) the place ("A headland above the Andaman"), 2) the promise ("Your plans, our ground"), 3) the invitation ("Foundations are being poured. Choose your plot.").
Stages: after the hero, a four-stage story - Groundworks / Structure / Finishing / Keys - each stage a row: large index number, stage name in serif, one 45ch line, and a media slot (site photo or clip). The active stage's number fills warm terracotta #c96f4a; make the stages feel like chapters of anticipation, not a Gantt chart. The language stays aspirational: "the pool finds its edge", never "concrete pour phase 2".
Then: a portfolio strip of completed villas (3-4, wide 16/9 cards, name + completion year), a process-trust band (architect-led, fixed timeline, weekly films sent to owners - three short columns), and an inquiry band with the same Start a villa CTA repeated large.
Palette: sea-light - warm white #f6f3ec ground after the hero, ink #1c1a16, terracotta accent, generous air. Type: a humanist sans for UI + serif display for stage names.
Performance: footage poster-first, fade at readyState 3; mobile gets the hero as three stacked stills with the same copy beats; reduced motion unpins everything. One HTML file, embedded CSS, vanilla JS. Got a result that looks close but not quite? That gap is taste.
The course teaches exactly that - the eye behind these prompts. Here is how we teach it →
How to use it
- Copy the prompt and paste it into Claude, Cursor or any AI coding tool - current models give the best results.
- Replace the marked tokens (colors, copy, media file names) before you run it.
- Run it, open the result in a browser, then iterate in small steps - one change per message.
Customize it
- Palette and type live in the token block at the top of the prompt - change those first, nothing else.
- Keep the motion values as written on the first pass; tune them only after you have seen the default.
- Swap media last, matching the aspect ratios the prompt names.
