How to create cinematic websites with AI.
Every prompt from the video, in the order it was used. You start with an empty folder and finish with a live website for a luxury villa on Lake Como: a layout, one opening image, a video that walks you inside the villa as you scroll, smooth animations all the way down the page, and a gallery and enquiry form at the bottom.
Get the full system for building with AI, including the workflows, the prompt library, and everything that would not fit inside one video.
AI Builders Lab →- Work in one folder per website. Every image, video and line of code the AI creates lands in that folder, so never mix two projects in the same one.
- Build the structure first. Step 2 creates the layout with an empty space for the opening image. Images and video come after.
- Tell the AI what the image is for. The opening image becomes the first frame of the video, so it has to face an open entrance the camera can walk through. Step 3 shows the difference.
- Check the video before it goes on the website. The Step 4 prompt asks to see the clip first, so a bad render never reaches the page.
The video uses ChatGPT, but every prompt runs the same way in Codex, Claude Code or Gemini.
Set Up ChatGPT And Connect Higgsfield
One folder for the project, and one plugin so ChatGPT can create images and video without you leaving the chat. You only do this once.
- Open the ChatGPT desktop app and switch to Work at the top.
- Pick a folder for the project. Mine is a new, empty folder called
villa lucevera. Every file ChatGPT creates, from the images to the code, lands in there.
- In the model picker, choose GPT-6 and set the thinking level to medium or high.
- Click plugins in the sidebar, search for Higgsfield and click connect.
- A browser window opens. Sign in to your Higgsfield account and approve access.
- You need some credits on your Higgsfield account. Steps 3, 4, 6 and 7 use them.
Higgsfield listed as connected in ChatGPT, and an empty project folder open. Nothing has been generated yet.
Describe Your Website
No images or video yet. This step is only about the structure of the website and the sections on it. Don't just give the AI the name of the business. Describe the setting, who the website is for, what you want visitors to do, and any special instructions.
- Swap Villa Lucevera for your own business, or use it as it is to follow along.
- Keep the line that tells it to leave a placeholder for the opening visual. The image comes in Step 3.
Create a landing page for Villa Lucevera, a luxury holiday villa on the western shore of Lake Como, Italy. About the villa: a restored early-1900s lakeside house with six bedrooms, a lemon-tree terrace, an infinity pool looking over the lake, and a private stone boat dock. It's rented as a whole villa, minimum stay five nights. Who it's for: couples and small groups of friends planning a special trip, like an anniversary, a milestone birthday or a small wedding weekend. The goal: visitors send an enquiry about their dates. Style: calm, elegant and expensive, like an old Italian villa. Colours: deep lake blue, warm ochre and soft cream. Elegant serif font for headlines. Sections: 1. A large opening visual with the villa name and a short headline 2. About the villa 3. What's included (pool, terrace, boat dock, bedrooms) 4. An enquiry form: name, email, dates, message Leave a placeholder for the opening visual. Don't generate any images, video or animations yet. No prices, no availability and no reviews on the page. Build the page and open the preview.
The villa name at the top in an elegant serif, and underneath it a large deep-blue panel waiting for the opening image, with the headline in the middle. Further down, a section about the house and an enquiry form at the bottom. A good start, but nothing moves yet.
Generate The Opening Image
The most important image on the website, because it has to look beautiful and also work as the first frame of a video. To get it right, tell the AI what the image is for, not only what it should look like.
- Prompt 1 is shown so you can see the difference. It makes a beautiful image that doesn't work for scroll video. You can skip straight to prompt 2.
- The image must face an open entrance, so the camera in Step 4 has somewhere to walk.
- Check two things before moving on: the doors are open, and there's open sky and mountains behind the roof.
Use Higgsfield to generate a wide, photorealistic image of Villa Lucevera for the opening section of the website. The view is from a low position out on Lake Como, looking at the villa across the water. The villa sits right on the shore with a stone boat dock and steps leading down into the lake, and a terrace with lemon trees. Steep mountains rise behind it. Golden hour light, calm water with warm reflections, a few windows glowing from inside. No people, no boats on the water, no text, no logos.
Golden light on the water and an ochre villa with green shutters. It's beautiful, but it's shot from out on the lake, so there's nowhere for the camera to walk, and the hillside behind the house blocks the view.
Beautiful, but I need a different shot. On scroll, the camera is going to walk up to the villa and step inside, so we need to be much closer, standing in front of the entrance. Use Higgsfield to generate a new wide, photorealistic 16:9 image of the same villa: warm ochre walls, dark green shutters, terracotta roof, stone details, potted lemon trees. Camera: standing at eye level in the villa's garden forecourt, about 15 metres from the front entrance, looking straight at the house. The villa fills the lower two-thirds of the frame, roughly centred. Entrance: tall arched glass doors in the middle of the ground floor, wide open. Through them we can see inside a warmly lit grand salon with a terrazzo floor, a glass chandelier and a painted ceiling. More ground-floor windows glow warmly with the rooms visible inside. Foreground: a pale gravel forecourt, low clipped box hedges, a pair of tall cypress trees, and large terracotta pots with lemon trees on either side of the doors. A clear, open path leads from the camera to the open doors. Behind the villa: the villa stands on a point jutting into the lake, so nothing blocks the view behind the roof. Lake Como opens up on both sides, and across the water rises a dramatic range of high mountain peaks, their tops catching pink and orange sunset light. Soft sunset sky above. Light: just after sunset, the sky still glowing, warm light spilling out of every window and the open doors. Keep the left third of the image a little calmer, with no bright details, so a headline can sit there. Size it for a full-screen website background, high resolution. No people, no cars, no text, no logos. Then put it in the opening section of the website.
A symmetrical shot straight down a gravel path between clipped hedges and tall cypress trees, to wide-open arched doors with a lemon tree on either side and a chandelier glowing inside. Behind the house, the lake opens up on both sides and the mountain tops catch the sunset.
Turn The Image Into A Video
Instead of a still image, a ten-second video that shows visitors what it feels like to walk into the villa. The opening image is the first frame, so everything in the video stays consistent with the look you already approved.
- Keep it to one continuous camera move. No cuts, no shake, no zoom, no turning. In Step 5 the visitor's scrolling drives this camera.
- The prompt describes this villa's details: the gravel path, lemon trees, doorway and chandelier. If you use your own image, change those details to match it.
- Building for a client? You can start from a real photo instead of an AI image. The process stays exactly the same.
Use Higgsfield to create a short cinematic video, using the opening image as the first frame. Camera move: start exactly on the first frame, centred on the gravel path. The camera moves straight forward at a slow, steady walking pace, eye level, keeping the villa perfectly centred and symmetrical. It passes between the clipped hedges and the tall cypress trees, between the two large terracotta pots with lemon trees, and under the arched doorway through the open double doors. Inside, it passes beneath the crystal chandelier and comes to a gentle stop in the middle of the salon, facing the fireplace and the landscape painting above it, with the sofas and warm table lamps on either side. One continuous shot. No cuts, no shake, no zoom, no turning. Keep everything consistent with the image: the ochre facade, green shutters, balcony, doorway, chandelier, painting, fireplace and furniture. The double doors stay fully open and don't move. The architecture doesn't bend or change shape as the camera passes through. Light: sunset sky outside, warm golden light inside. As the camera steps through the doorway, the exposure adjusts gently to the warm interior. Small movements only: lemon leaves moving in a light breeze, the wall lanterns and chandelier glowing softly, the sheer curtains drifting slightly. No people. About 10 seconds long, 16:9. Show me the video here first. Don't add it to the website yet.
Close, but as the camera goes through the doorway, [DESCRIBE WHAT WENT WRONG, e.g. "the doors start to close" / "the arch bends"]. Generate it again with Higgsfield, with the camera moving more slowly and the doors, arch and walls completely still and solid. Keep everything else the same.
One ten-second move with no cuts. The camera walks up the gravel path between the hedges and the villa slowly fills the frame. The lemon trees slide past, the doors stay wide open, and you step inside. Then the room opens up, with a painted ceiling, a crystal chandelier, and a fireplace with a painting above it.
Add Scroll Scrubbing
Scroll scrubbing makes the video move with the visitor's scrolling. Scroll down and it plays forward. Scroll up and it plays backward. Stop, and it holds on that frame. You don't need to know how it works. Tell ChatGPT what you want and it handles the technical details.
- Approve the video from Step 4 first. This prompt puts it on the website.
- Test it on your phone as well as your computer.
This looks great. Now use this video for the opening section of the website, with scroll scrubbing: - The opening section fills the screen and stays in place while the visitor scrolls. - Scrolling down plays the video forward, scrolling up plays it backward. - When the visitor stops scrolling, the video holds on that frame. - The headline fades out gently as the video starts moving. - When the video reaches its last frame, the page carries on to the next section. - No autoplay, no looping, no sound. Open the preview.
The video looks good, but I want it sharper. Use Higgsfield to upscale the opening video to 4K, keeping the footage exactly the same. Then replace the video in the opening section with the 4K version, keep the scroll scrubbing working exactly as it does now, and open the preview again.
A 4K file is several times bigger than HD. After upscaling, check the page still loads quickly on your phone.
The page opens at the front of the villa. As you scroll, the camera walks towards the open doors, and once it settles inside the salon, the rest of the website comes up underneath. It works on phones too.
Match The Colours And Add Animations
The hardest part is done. Now the rest of the website gets a premium look: colours taken from the video, smooth animations as you scroll, and custom icons instead of plain ones.
- If your business isn't a villa, change the colour descriptions to whatever is in your own video.
- Change the four icon subjects to match your own "What's included" section.
A few changes to the rest of the website: 1. Colours: take the colour palette for the whole site from the opening video. The deep blue of the lake, the ochre walls of the villa, the green of the lemon trees and the warm light in the windows. Replace the current colours everywhere and keep the text easy to read. 2. Scroll animations: as each section comes into view, have its headings, text and images fade and rise gently into place. Keep them slow and subtle. 3. Rounded corners: soften the buttons, images and form fields with rounded corners, and add a soft shadow to the buttons. 4. Icons: use Higgsfield to create custom icons for the pool, the terrace, the boat dock and the bedrooms in the "What's included" section, in the same colour palette, simple and elegant, on transparent backgrounds. Replace the current icons with them. Open the preview.
A few minutes later, the colours match the video, so the whole page feels like one design. As you scroll down, each heading and paragraph fades up into place, and the villa section has new custom icons.
Add The Final Sections
One prompt that turns a nice-looking page into one that helps someone book: a gallery, things to do nearby, a better enquiry form, and a sunset video near the bottom of the page.
- The gallery images are made to match the opening image, so run this after Step 3 is approved.
- Swap the gallery subjects, the nearby list and the closing video scene for your own business.
Last round of changes: 1. Gallery: after the "About the villa" section, add a gallery of four images. Use Higgsfield to create them, and keep them consistent with the opening image, so it's clearly the same villa, the same style and the same colours. Each one shows something different: - a bedroom with sheer linen curtains and the lake through the window - the infinity pool looking out over the lake - the lemon-tree terrace with a table set for dinner - the stone boat dock with a classic wooden boat moored No people. When a visitor clicks an image, open it large with rounded corners. 2. Things to do nearby: next to the enquiry form, add a column with five things to do near the villa on Lake Como, like taking a boat to Bellagio, with one short line for each. 3. Enquiry form: update it to include arrival date, departure date, number of guests, name, email and a message, with a button that says "Check availability". 4. Sunset video: near the bottom of the page, use Higgsfield to create a short video of a couple on the villa's terrace at sunset, holding glasses of wine and looking out over the lake. Calm and simple, the camera barely moves. Add it as a silent video that autoplays and loops, and blend its edges softly into the section around it. Open the preview.
Four gallery images of the same villa (a bedroom, the pool, the terrace and the boat dock), a short list of things to do nearby beside the enquiry form, a form with dates, guests and a "Check availability" button, and a quiet sunset video looping near the bottom.
Deploy The Website Live
Deploying just means putting the website online so anyone can visit it. There are no prompts in this step. Pick the option that fits you.
- Add the project folder to a new GitHub repository.
- Sign up for Vercel with your GitHub account, import the repository and deploy it.
- Add your own domain in the project settings in Vercel.
- The full step-by-step walkthrough is inside AI Builders Lab.
- Log in to your hosting account and open the file manager for your WordPress site.
- Create a new folder inside your WordPress site's main folder, for example
villa. - Copy everything from the project folder into it.
- The page is now live at your website address followed by the folder name, for example
yoursite.com/villa. Pick a folder name that isn't already used by a WordPress page.
The finished website at its live address. Open it on your phone and scroll all the way down, then send yourself a test enquiry to make sure the form reaches you.
Getting Better Results
Five things that make a real difference to what comes back.
- Say what the image is for. "A beautiful villa" gets you a postcard. "The camera is going to walk inside" gets you an image you can turn into a video.
- Frame the first image at an open entrance. A door, a gate or a path gives the camera somewhere to go. A distant view doesn't.
- One camera move, no cuts. Scroll scrubbing works best on a single slow move from start to finish.
- Check the video before it goes on the page. Watch the doorway closely, because that's where videos warp or doors close.
- Test on a phone. Most visitors will scroll with their thumb, and big video files load slowly on mobile.
Make It Your Own
The same steps work for almost any business: a restaurant where the camera walks past the tables into the kitchen, a car showroom, a boutique hotel. Swap the details in this template, use it in place of the Step 2 prompt, then follow the rest of the steps.
Create a landing page for [BUSINESS NAME], a [WHAT IT IS] in [LOCATION]. About it: [3 specific facts about what makes it different]. Who it's for: [who visits and why]. The goal: visitors [book / enquire / buy / sign up]. Style: [the feeling]. Colours: [2 or 3 colours]. [Font style] for headlines. Sections: 1. A large opening visual with the name and a short headline 2. [Section] 3. [Section] 4. [Where they take the action] Leave a placeholder for the opening visual. Don't generate any images, video or animations yet. Build the page and open the preview.
- Step 3: describe your own building, product or place, framed close to an open entrance.
- Step 4: one camera move that walks inside, through a front door, a restaurant entrance or a showroom.
- Step 6: the colours in your own video, and your own icon subjects.
- Step 7: the gallery subjects, the nearby list, and the scene for the closing video.
Get the full system for building with AI, including the workflows, the prompt library, and everything that would not fit inside one video.
AI Builders Lab →