Build it, deploy it, pitch it
How to Build a 3D Animated Website and Pitch It to Businesses

- How to write structured JSON prompts for better image output
- How to generate and animate images for hero and section visuals
- How to name files and build the site in Google Antigravity
- How to deploy a static build on Netlify for a demo link
- How to write a short outreach email using the demo
The workflow in one view
The demo in this video is a dark, cinematic site for a defense drone company, built end to end with AI. It has several animated sections, a view specs interaction, and sections for weapon systems, autonomy and engineering. The same workflow works for any industry.
The stack is simple: Google Whisk or Nano Banana Pro for images, Kling 2.5 in Freepik for animation, Google Antigravity for the build, Netlify for deployment, and a work email address for outreach.
I also mention that I found newer ways to make this process easier, and the website prompt pack is designed so you can paste it straight into the agent. What changes from one industry to another is mostly the images and videos, not the process.
Write better image prompts with JSON
A normal prompt might say: give me a sleek dark image of a rotary minigun in a dark hangar with cinematic lighting. In the video I show a better approach: write the prompt as structured JSON.
The JSON defines project title, composition, setting, the camera you want (even an IMAX style camera), the subject and its fine details such as barrels and mounting hardware. I find this gives much stronger output from Nano Banana Pro and Gemini than a paragraph prompt. That is why the prompt document in my pack is long: the site has many images and videos.
The practical tip: start from your plain description, then break it into fields. Name the project, describe the composition, state the setting, list the camera and lighting, and describe the subject in detail. The extra specificity is what the model rewards.
Step 1: Generate the images in Whisk
Open a new project in Whisk and paste the first prompt, for the hero section. Attach a reference image so the output follows its look. Run several generations and pick the best. I then refined mine by asking it to remove extra drones from the background so one drone remained.
Repeat for the other sections you want, in my case an armament image and a footer image. I stopped at three to keep the demo short, though the pack has more prompts.
Work in a clear order: hero first, because the whole site is built around it, then the supporting sections. If an image has extras you do not want, refine it with a short instruction instead of starting over.
Step 2: Animate the images with Kling 2.5
Open Freepik, go to spaces and create a new space. Add your image, paste the video prompt, connect it to a video generator and choose Kling 2.5. I generated 10 videos of 10 seconds each.
In the video I mention that the plan with unlimited Kling 2.5 generations costs about 2,700 rupees, which I found worth it. Check current pricing yourself.
Expect failures. Animating this subject was painful: sometimes everything morphed into a ball or the drone flew somewhere else. It took me a long time to get working prompts, so expect to discard many clips and keep only the best shots.
Review the clips on playback rather than judging from thumbnails. In my batch some were good, one was a jet instead of a drone and had to be disqualified, and a few shots were strong enough that one looked like a movie outro. Download only the ones you would actually use on the page.
Step 3: Organize your files for the AI
Create a folder on your desktop, for example execution drone website, and put your downloaded images and videos in it. Rename each file clearly, such as hero section video drone firing and minigun showcase. Clear names help the AI agent place each asset in the right section.
Open the folder in Google Antigravity, copy the whole website prompt from the pack and paste it into the agent. It creates the project files. You may need small manual tweaks afterward, but most of the work is done.
Step 5: Deploy to Netlify
Ask the agent for a static deployment for Netlify. It will give you a command, usually npm run build, which produces an output folder. In Netlify, add a new project, choose deploy manually, browse to upload and select the output folder. Trust the site if asked, and you receive a temporary URL you can share.
A temporary Netlify URL is enough for outreach. You can also ask the agent for a continuous deployment through GitHub later if the project becomes a real client job.
Step 6: Find a buyer and send the pitch
For outreach, think of who benefits from this kind of site. In my example I looked up top drone manufacturers and suppliers in India, opened one supplier's website to see what it does, and found its business inquiry email on the contact page. I did not expect a big company to reply, and I say so. It was a demonstration.
Use your professional work email, not a free one, so the message looks credible. My email was short: a greeting, who I am, that I have built a 3D website for defense companies, that I would like to see if they are interested, a link to the demo and a polite note that no worries if not.
For smaller targets such as architectural firms or real estate businesses, I suggest saying you built a site and asking if something like it could help their business.
You can also redo the same site for other themed companies, such as fighter jet suppliers, by swapping the images and prompts. The point of the email is only to start a conversation, so keep it brief and let the demo do the talking.
Treat outreach as a numbers game
In the video I say I would send around 100 of these emails a day with portfolio sites and expect a few replies. I describe sales as a numbers game. That is my own approach, not a guaranteed result, so test it in your own market and improve your copy over time.
Watch the full 19 minute video to see the prompts, the generations and the sample outreach email on screen.
Watch the full video See EducateXAIResults vary and depend on your effort. Read the results disclaimer.
Questions people ask
Why use JSON for image prompts?
Structured JSON lets you define composition, setting, camera and subject details separately. In my experience models like Nano Banana Pro give far stronger results from that than from a loose paragraph.
Which tool animates the images?
I use Kling 2.5 inside Freepik spaces, generating several 10 second clips per prompt, then keep only the best shots. Google Veo 3 or other video tools could be used the same way.
How do I get a shareable demo link?
Ask the AI agent for a static deployment, run the build command, then upload the output folder to Netlify using the manual deploy option. Netlify gives you a temporary URL immediately.
Who should I send the website to?
Businesses in the industry your demo is themed for. I note that big firms rarely reply, so I would target smaller companies, and keep the email short with the demo link included.
More from the channel
- How to Build an Immersive Scroll-Based Website With AI Images and Video
- How to Build an Animated Crypto Landing Page With AI
- How to Build a Storytelling E-Commerce Website With AI
- How to Build a Premium Website With AI, Starting From Zero
- How to Build a Luxury Watch Website With AI Prompts
- How to Build a Dental Clinic Website With AI Using One Prompt