Build a Cinematic 3D E-commerce Website With AI for Free (No Code, No Webflow)

In under 60 minutes you’ll ship a cinematic, scroll-driven 3D e-commerce website — the puffy store from the video — for free. No coding. No Webflow. No Blender. No weeks of agency work.

The workflow is simple: ChatGPT plans and builds, Hyper3D Rodin makes the 3D products, Google Flow makes the cinematic scenes, then you deploy the whole thing free.

▶️ 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 Hyper3D account for Rodin (free credits to start)
• A Google account for Flow
• An AI coder to assemble the site (ChatGPT Canvas, Cursor, Antigravity, or any vibe-coding tool you already use)
• The resource links in the box above — those are the only three tools the build needs

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

Step 1 — Plan the puffy store with ChatGPT

Don’t start with code. Start with the plan. Ask ChatGPT for the store structure, sections, and product copy in one go:

I want to build a cinematic 3D e-commerce website for a puffy products store
(soft, cozy, premium feel). Plan the full site for me: homepage sections in
order, product collection structure, what each section should show, the copy
tone, and what 3D assets and AI videos I need for each section. Keep it to a
one-page store that feels expensive and converts.

Save its answer. That section list becomes your build checklist, and the asset list tells Rodin and Flow exactly what to generate.

Lock the look

Follow up with one message so every later asset matches:

Give me a single visual style guide for this store: 3 colors, 2 fonts,
button style, product-card style, and the 3D render style (soft studio
lighting, puffy/inflated look, clean background). I will reuse this for
every image, video and 3D model prompt.

Step 2 — Generate the 3D product assets with Hyper3D Rodin

Open Hyper3D Rodin. This is where the “shouldn’t be free” part comes from — production-ready 3D models from a text prompt or a single image.

1. Create a new Rodin generation.
2. Describe your hero product (example: a puffy jacket, a puffy chair, a soft inflated sneaker — swap in your actual product):

A premium puffy product shot, soft inflated shapes, cozy quilted texture,
studio lighting, clean seamless background, ultra-detailed, e-commerce hero
quality, centered composition

3. Generate, preview the 3D model, and download the GLB file. GLB is the web-ready format your site will load directly.
4. Repeat for 2–4 supporting products or angles. You only need a handful — one hero model plus category shots carry the whole store.

Tip: Image-to-3D beats text-to-3D when you already have a product photo. Upload the photo into Rodin first, then let it reconstruct the model. Cleaner geometry, truer colors.

Keep every .glb in one folder. You’ll hand these to the site builder in Step 5.

Step 3 — Generate the cinematic scenes with Google Flow

The site feels cinematic because the backgrounds move. Generate those in Google Flow.

1. Open Flow and start a new text-to-video generation.
2. Paste a scene prompt built on your style guide from Step 1:

Slow cinematic dolly shot through a soft, dreamy studio space filled with
giant puffy shapes. Pastel lighting, shallow depth of field, floating fabric
details drifting in the air, premium e-commerce mood film, smooth loopable
motion, 16:9.

3. Generate 1 hero background plus 1–2 section backgrounds. Two outputs per prompt is enough — four wastes credits when the first clean run is usually good.
4. Download the winners. Short, loopable clips are ideal: they sit behind the content and never distract from the Buy button.

If a clip comes out morphing or glitchy: simplify the prompt (one camera move, one subject) and run it again. It can take two or three tries.

Step 4 — Get the master website prompt from ChatGPT

Don’t write the website prompt yourself. Hand ChatGPT everything from Steps 1–3 and let it write the build spec:

I am building my puffy 3D e-commerce site now. Here is my plan:
[paste the section plan from Step 1]
Here is my style guide: [paste the style guide from Step 1]
I have: 3D product models in GLB format, and cinematic background videos
from Google Flow.

Write me one complete master prompt I can paste into my AI website builder
to generate the full site: hero with 3D viewer + video background, product
grid, product detail view, cart drawer, testimonials, FAQ, footer. Mobile
responsive, fast loading, scroll animations. Tell the builder my exact asset
file names will be in a public folder and it should fix paths itself.

Copy the master prompt it gives you. That’s what builds the site in the next step.

Step 5 — Build the site with AI

Open your AI coder (ChatGPT Canvas, Cursor, Antigravity, v0 — any of them work) and create a new project. Grab the exact build prompt from the video — it’s linked in the downloads box above: Master website prompt (prompt.md). (Step 4 shows how to write your own variation; use the linked file to match the video exactly.)

1. Upload your assets into the project: all .glb files plus the Flow background videos into a public/ folder.
2. Paste the master prompt from the linked prompt.md file (or your Step 4 version).
3. Add this one line at the end of your message:

If any asset file names referenced in the prompt don't match my files,
check the public folder and fix the paths yourself. If any small supporting
image is missing, generate it yourself in the same style.

That single line kills 90% of path errors. The build takes roughly 10–15 minutes — watch it assemble the hero, then the product sections, one by one.

Step 6 — Add products, cart and polish

When the first build finishes, review it like a customer, not a developer. Send fixes back as plain sentences:

1. The hero 3D model loads slowly — lazy-load it and show the poster image first.
2. Add a working cart drawer: add-to-cart, quantity controls, and a WhatsApp checkout button with the order text prefilled.
3. Make the product cards all the same height on mobile.
4. Add a sticky announcement bar for free shipping.

Repeat once or twice until buying feels effortless: hero → product → add to cart → checkout takes under 30 seconds.

Quick conversion checklist

• One clear Buy / Add to Cart above the fold on mobile
• Prices, sizes and delivery info on the card — no click needed
• Real product photos or Rodin renders, never grey placeholder boxes
• Page loads in under 3 seconds on a phone

Step 7 — Deploy free and publish

Ship it. Any of these are free and take minutes:

# Example: deploy a Vite/Next static export with Netlify
npm run build
npx netlify deploy --prod --dir=dist

Or use your coder’s one-click deploy (Vercel, Netlify, Cloudflare Pages all work). Then:

1. Open the live URL on your phone and scroll the whole page.
2. Test add-to-cart and checkout end to end.
3. Point your own domain at it when you’re happy.

Wrapping up

One video, three free tools, under an hour — and you have a scroll-driven cinematic 3D store that looks like an agency charged lakhs for it. Founders use builds like this for launches, designers for portfolios, and freelancers charge ₹50K+ per site once they can ship them reliably.

Stuck on any step? Drop your question plus a screenshot in the SPX WhatsApp community.

And if you’d rather we build your store for you, that’s exactly what we do at spxai.in — come say hi.