Build a Cinematic 3D Storytelling Website With Free AI Tools

By the end of this build you’ll have a scroll-triggered, cinematic, 3D-animated website live on the internet. The kind agencies charge ₹2L for and take three to four weeks to ship. You’ll build it in about an hour with free AI tools, without writing code yourself.

The trick most people miss: you don’t start with the website. You start with the assets. Every image and every video gets generated first, then the website gets assembled around them.

We’ll use three main tools:

• ChatGPT to write every prompt (free)
• Flow by Google Labs to generate the AI videos (free)
• Antigravity, Google’s agentic code editor, to assemble the actual site

▶️ Watch the video above first. The steps below follow it in the same order, so you can pause and copy as you go.

What you’ll need

• A ChatGPT account (free plan works)
• A Google account for Flow
• Antigravity installed (needs a Google AI subscription, see Step 1)
• The resource pack linked above: it has every prompt plus the exact assets from the video

Want us to build one of these for your business instead? Contact us through spxai.in or join the WhatsApp community above.

Step 1: Set up your Antigravity project

Open Antigravity and create a new project. Inside it, create a folder called public, and inside public create two folders:

public/
  images/        ← all your generated images go here later
  hero-frames/   ← the extracted video frames go here later

Leave them empty for now. We’re generating assets before we touch the website.

Getting access to Antigravity

Antigravity needs a Google AI subscription. Three ways in:

• Jio users: open the MyJio app, look for the Google One cloud storage banner, and claim it from there.
• Students: sign up with your student ID card and you get one year free.
• Everyone else: there’s a one month free trial on Google One.

Step 2: Generate your hero images with ChatGPT

All images in the demo site are AI generated, and ChatGPT’s latest image model does the job well. Use the prompts from the resource doc, or change them to match your project. Here’s the villa prompt from the video:

Create a modern villa floating in the air above the clouds.
Refrain from using a lot of glass in the façade.
Keep it a very large villa floating above the clouds.

Why so little glass? Too many glass elements break the animation later, because the camera flies through the front of the building into the interior. Solid walls with doors animate far more cleanly.

Generate the rest of your section images the same way. In the video these are three separate shots:

• The sky villa floating above the clouds
• A modern tower with its upper floors above the clouds
• A side view of the sun setting behind a beach villa

You can generate them one at a time or ask for several in one go.

Step 3: Create the first and last frames in Flow

The hero scene is one smooth camera move from outside the villa to inside it. Flow generates it from two stills: a starting frame and an ending frame.

1. Open Flow and create a new project.
2. Generate your first frame: the villa exterior shot from Step 2 works as-is.
3. Click the generated image, choose describe edits, and ask for the ending frame:

Now change the frame to inside the villa near the doors.
The doors are opened and we can see the whole interior of the villa.
Keep the same modern style.

You now have two frames: outside the villa, and inside near the open doors. Download both.

Step 4: Get the animation prompt from ChatGPT

Don’t write the video prompt yourself. Hand both frames back to ChatGPT and let it describe the transition:

I am using Google Flow with Veo 3.1. I'm going to use these two images
as the starting frame and the ending frame. Please give me the prompt
for the animation: a smooth camera movement between the outside of the
villa to the inside, with the doors opening as the camera passes through.

Copy the prompt it gives you.

Step 5: Generate the hero video in Flow

Back in Flow, start a new generation and set it up like this:

1. Upload both frames: the outside shot is the starting frame, the interior shot is the ending frame.
2. Paste the animation prompt from Step 4.
3. Switch the output type to video.
4. Set the aspect ratio to 16:9.
5. Change outputs from four to two. Four wastes credits when the first result is usually good enough.

Then generate.

If the video comes out morphing or glitchy: remove the motion notes and run the same prompt again. It can take two or three tries. When you get a clean run, download it, upscale it, and move on while it processes.

Step 6: Generate remaining assets while you wait

While the upscale finishes, collect everything else the site needs:

• Images: the section shots from Step 2, downloaded into a folder.
• Cloud overlay: a transparent cloud strip for parallax layers. Ask ChatGPT:

Generate a cloud overlay image. Leave the top 10% of the screen blank
and generate the rest of the cloud overlay below that.

• Optional 3D model: the floating 3D element in the demo came from Meshy AI. Drop in an image and it renders a downloadable 3D model. It’s paid (around $5/month), so it’s your choice. A ready-made model is already in the Drive folder if you’d rather skip it. You don’t need a 3D model for this build to work.

Step 7: Convert the video into scroll frames

Here’s the core trick of the whole build. You don’t embed the video. Instead you split it into individual frames, and JavaScript swaps frame after frame as the reader scrolls. That’s what makes the animation follow the scrollbar instead of playing on its own.

1. Go to videotoimagesequence.online (free, no install).
2. Drop in your upscaled hero video.
3. Keep 30 FPS and click extract frames.
4. Download the ZIP of frames.

Step 8: Load everything into Antigravity

Copy your assets into the folders from Step 1:

• All generated images → public/images/
• The extracted frame ZIP contents → public/hero-frames/
• Your cloud overlay → public/images/
• Your 3D model, if you made one → public/

Step 9: Run the master prompt

This is where the site actually gets built. The full master prompt, roughly 4000 lines covering layout, sections, GSAP scroll animations and styling, is in the Drive folder (prompt.dot). Paste it into Antigravity’s chat and hit enter.

Add one line at the end of your message:

If any image names referenced in the prompt don't match my files,
please refer to the public folder and fix the paths yourself.
If any additional image assets are needed, generate them yourself.

That single line saves you from path errors and missing assets. Antigravity will sometimes generate replacement images with Gemini on its own, which usually looks great.

Two quality-of-life tips while it builds:

• Install the “Antigravity Auto Accept” browser extension so the agent stops asking you to approve every action. Otherwise it pauses constantly.
• If you’d rather not juggle ChatGPT at all, you can tell Antigravity to generate any missing asset itself. It’s slower but fully hands-off.

The full build takes around 10 to 15 minutes. Watch it craft the hero section, then the content sections, one by one.

Step 10: Preview and publish

When the agent finishes, run the dev server from Antigravity’s terminal:

npm run dev

Open the local URL it prints and scroll through your site. Text animates in, the camera glides through the villa as you scroll, clouds drift over the sections. It won’t be pixel-identical to the demo, since your images and 3D model are your own generations, but the feel is the same.

When you’re happy with it, deploy it for free (Netlify, Vercel or Cloudflare Pages all work) and point your own domain at it.

Wrapping up

One hour, zero rupees spent, and you have a scroll-driven cinematic site that businesses pay real money for. Founders use them for launches, designers for portfolios, and freelancers charge ₹50K+ per site once they can ship these reliably.

Stuck on any step? Join the SPX WhatsApp community and drop your question there.

And if you want a high-conversion Shopify store built the same way, that’s exactly what the next video covers.