Build a 3D property website that moves as you scroll.

Do the steps in order. Each one builds on the last.

Open a terminal and run these two lines. They make an empty project folder and start Claude Code inside it.

mkdir velmora && cd velmora
claude

This prompt builds the first version of the whole page. Change the name, the floor count and the colours to suit your project. Keep the list of sections, because Claude builds them in that order.

Build me a premium scroll-driven website for a new luxury apartment tower. It's made up: call it Velmora, a 34-floor glass tower on a waterfront. Use Vite with three.js and Lenis for smooth scroll. Both are MIT; don't use GSAP, I want open-source libraries only.

As you scroll:
1. Hero: the tower at dusk, built in three.js, with warm lit windows and water in front. Hovering a floor highlights it and shows a label card (floor, residence name, beds/baths, size, available). No prices.
2. Scrolling zooms the camera into the facade.
3. Then one residence becomes a 3D floor plan that lifts apart floor by floor / wall by wall, with room labels.
4. Then the rooms: living, kitchen, bedroom, bath as full-screen photos with soft transitions between them and a room name caption. Use free Pexels or Unsplash photos, download them into the project and list every photo URL and its licence in LICENSES.md.
5. A contact section with a form, and a footer that says Velmora is a fictional demo. The viewing form is a demo: on submit, send nothing and tell the visitor nothing was sent.

It should feel like a high-end real estate site: dark navy, warm gold, a serif display font. Take screenshots with Playwright at 1680x1050 while you work and fix whatever looks off.

In our run, Claude installed the libraries, added free fonts, wrote each part as its own file in src/ and took screenshots of its own work to fix problems. The floor data (collections, beds, baths, sizes) ends up in src/data.js.

The first tower is drawn in code, and ours looked like a game. This prompt swaps that code-built tower for a rendering of a real building, which looks far better. Put your image in the project folder and send this, with your file name in place of tower.png:

Replace the tower image with tower.png. Look closely: for each floor in the top half of the tower, draw the glass (the window layer) as an outline that leaves out the white balcony slabs and trim. Each face of glass is a near-rectangle in the image's perspective, so one floor can need several four-corner quads. Measure on the original pixels and store the quads per floor in hero.config.js. On hover, fill only those quads in gold with a thin bright edge, never the trim or the sky. Then draw every outline in alternating colours on 1:1 crops of the top, middle and lowest interactive floor, look at them, and fix any quad that spills onto trim or sky by more than one pixel. If the image is small, upscale it with a free local model for display, but keep measuring on the original pixels.

Claude measures the glass by colour, traces the floor lines and checks its own outlines on close-up crops. On our tower it upscaled the image with the free Real-ESRGAN model, which took about 17 minutes on a server with no GPU, and ended up with 106 outline pieces for floors 16 to 34.

The same check on the top floors and the lowest interactive floors.

Tip: use an image you have the right to use, and say next to it that the homes are invented. We used Riviera by Ledingham McAllister with the builder's permission, and a small line beside the tower says so: "Demo site. Velmora, its homes and its rooms are invented. Tower image: Riviera by Ledingham McAllister, used with permission."

Without this step the page cuts between stages. This prompt turns the tower, the 3D apartment and the rooms into one smooth move.

The stages should be one continuous camera move, not cuts. Scroll zooms in and stops with the featured floor centred. Then split the image along that floor's slab lines: the floors above slide up and the floors below slide down, with a little blur and fade. As they move apart, fade out the floor's own strip of the image (its balcony tips are not part of the 3D floor), and fade out the 3D model's ceiling where it is, without lifting it, so the floor is open before the camera moves. Meanwhile morph the floor's gold outline into one rectangle that sits exactly on the 3D model's glass wall (project the wall's corners to the screen every frame, so it follows the camera), then fade the outline out as the 3D model takes over at the same place on screen. The model then tilts to an isometric view. Keep the model on screen while the residence card shows, then fly the camera down to eye level in the living room. Once the camera is below the ceiling, fade the ceiling and its downlights back in quickly, finishing before the living-room image starts to cross-fade in from that exact camera pose. Between rooms, dip to black for about a quarter of a second. Room images full-frame and bright, with only a small gradient under the room label. No navy fades and no cut to another building.

In our build, all the stages share one tall section driven by a single scroll value. The timing sits in a small table in src/main.js, with a start and an end for each stage.

Tip: to change the pacing, ask Claude to change the numbers in that table.

Stock photos from different homes won't match your floor plan. Instead, Claude furnishes the 3D apartment and takes a picture of each room from it.

Furnish the three.js apartment so each room has clear, real-looking furniture: a sofa, a dining table, a kitchen island, a bed, a bath. Use physically based materials, an environment light, soft shadows and warm lamps. Add a script that renders the living room, kitchen, bedroom and bath at 1920x1080 and saves the camera pose of each to poses.json. Use those renders as the room images, loaded from a config file, and make sure the living-room pose is the one the scroll dives to.

Ours came with a linen sofa, a walnut dining table, an oak kitchen with a marble island, a bed, a tub and a double vanity. Each render took 20 to 40 seconds. They were clean, but they still looked like 3D renders, which is what Step 6 fixes.

Send each render through Google's Nano Banana Pro on Replicate with this prompt. You can upload the render on the model's page, or ask Claude Code to write a short script that calls Replicate's API with your REPLICATE_API_TOKEN. We used the render as the input image, aspect_ratio 16:9, resolution 2K and PNG output.

Turn this 3D render into a real architectural interior photograph of a high-floor apartment in a new Vancouver-area tower. Keep the exact same camera position, lens, framing and perspective. Keep every wall, window mullion, ceiling edge and piece of furniture in exactly the same place, size and shape, so the photo lines up with the render pixel for pixel. Do not add, remove or move anything. Make the materials real: the back wall behind the sofa and floor lamp is a solid painted white wall with no windows, exactly as in the render; the only glass is the wall of windows on the right. Materials: wide-plank natural oak floor with fine grain, a cream boucle sofa and two boucle armchairs, a solid walnut dining table with upholstered walnut chairs, a brushed-brass linear pendant, white marble sideboard top, a real fiddle-leaf fig in a ceramic pot, a wool rug. Through the floor-to-ceiling glass, a clear daytime view over green parkland to the distant city and North Shore mountains. Soft natural daylight, gentle shadows, true-to-life colour, shot on a full-frame camera with a 24 mm lens, like a developer's show-suite photo. No people, no text, no watermark.

That's the living-room version. For each other room, keep the opening (keep everything in place) and replace every detail that belongs to the living room: which walls are solid and where the glass is, the furniture and materials, and the view. Describe what that room's render actually shows, or the model may add windows or move things to match the words. Each image took about 26 seconds and cost 0.15 USD.

Resize the photos to 1920x1080 without cropping. The living room has to line up with the 3D view it fades in from, and a crop would make it jump.

Save each returned photo into your project. Tell Claude where you saved the living-room, kitchen, bedroom and bathroom files. Ask it to update the room-image configuration to use those files while keeping the saved camera poses. Rebuild, open the preview and check that all four new images appear. At the living-room transition, check the 3D view and the photo at the same camera position before accepting the fade.

I saved the four room photos as [living-room file], [kitchen file], [bedroom file] and [bathroom file]. Find the file that sets the room images, point it at these photos, and keep the camera poses in poses.json as they are.

Here is our page halfway through that fade:

Tip: the model still adds things. Our kitchen gained windows the apartment doesn't have, and the living room gained a second fig tree. If a room changes too much, run it again with a sentence that names the part to keep.

Open a second terminal in the velmora folder (or exit Claude Code first). Run these two lines, open the address it prints and scroll the whole page once.

npm run build
npx vite preview

Ours opened at http://127.0.0.1:5184/, because Claude had set that port in vite.config.js. The finished dist/ folder was 5.8 MB, most of it the tower image.

Then check it as a phone visitor would. Open the preview on a phone, or first use a phone-sized browser preview. Try selecting a floor by tapping it, read the residence card, scroll through every room and submit the demo form. If tapping a floor does nothing, ask Claude to add tap selection and a clear way to dismiss the card. The form must still say nothing was sent.

On a phone there is no hover. Let visitors tap a floor to select it and show its residence card, and add a clear way to close the card. Keep the form's message that nothing was sent.

Tip: to open the preview on a phone on the same Wi-Fi, run npx vite preview --host and open the network address it prints.

The dist/ folder is plain files, so any free static host works. If your site will live in a subfolder (a GitHub Pages project site, for example), build it this way, or the page stays blank:

npx vite build --base=./

Image paths written in your JavaScript also need to drop the leading slash (photos/riviera-hero.jpg, not /photos/...), because Vite doesn't rewrite them. Ask Claude to check both before you upload.

Tip: ask Claude to put base: './' in vite.config.js so a plain npm run build does the same.

Then pick a host:

• Netlify Drop: drag the dist folder onto the page.
• Cloudflare Pages: connect a Git repo, or upload dist directly.
• GitHub Pages: put the contents of dist (not the folder itself) at the root of a branch such as gh-pages, then open the repo's Settings > Pages and choose that branch as the source.

We didn't upload ours, but we did test the subfolder setting. More on why in Vite's docs.