Home / Blog

Looping hero animation site

How to Build an Animated Crypto Landing Page With AI

By Shreyas Raj. Written from my YouTube video, about 8 minutes long.

I Built an Animated Crypto Website in 10 Minutes using AI (Google Anti-Gravity)

Video: I Built an Animated Crypto Website in 10 Minutes using AI (Google Anti-Gravity) on the AI with Shreyas Raj YouTube channel.

Short answer: Generate a hero image from a reference screenshot in Whisk, animate it into a seamless loop in Google Flow using the same start and end frame, drop the clip into a project folder and paste the one shot website prompt into Google Antigravity.
What you will learn

What this site is

This is a cryptocurrency platform landing page with an animated hero and components like bank level security, global compliance and simple, transparent pricing. The hero animation was made with Google Veo 3 through Flow.

I saw a site like this on Dribbble a while back and decided to recreate it for myself because I knew it was possible. Years ago a 3D animation like this would have needed a team of Blender artists. Now one person with a prompt pack can do it.

The animation is the part that makes a landing page stand out. Most landing pages use a still image or a stock loop. A custom looping 3D style hero makes the page feel more expensive, and that is the main thing you are practicing in this guide.

In the video I describe this as a tutorial about building an award style crypto site step by step, using Whisk, Veo 3 and Google Antigravity, plus a few other tools.

What you need

As in my other tutorials, you get a prompt guide in a document. It contains the one shot website prompt, the image prompt and the video prompt. The tools are:

Everything is organized the way my other guides are: image prompt first, video prompt second, website prompt last. You work through them in that order, and each output becomes the input of the next step.

Step 1: Generate the hero image in Whisk

Open Whisk. Download the reference screenshot, add it as a subject, and paste the Nano Banana image prompt from the document. Add a line asking it to remove any text, because the text will be added by the website itself.

Keep generating until you get a result you like. I went through many. Some had a coin that was not symmetrical, so I rejected them. Pick one that is clean and looks good, then download it. This is your hero section image.

I keep the composition simple on purpose. The text goes on the left, so the artwork should leave that space free and keep the main object, here a coin, on the right side. A symmetrical, clean subject also loops better.

Step 2: Animate it in Flow as a loop

Open Flow by searching for Flow by Google, click create videos, then choose frames to video. Click the plus icon, upload your image and crop it. I crop so there is space on the left side where the website text will sit.

Here is the trick for this kind of animation: use the same image for the start frame and the end frame. Since the animation is a loop, it runs seamlessly when it repeats. Paste the start prompt and the end prompt from the document, and run multiple generations.

The same start and end image also gives the model a very clear goal, so there is less chance of a strange transition. That is why this kind of generation is easier than a story style sequence with different scenes.

Cropping matters more than it looks. If your subject sits in the middle of the frame, the headline will overlap it. Crop first, then generate, so the video already has the layout you want and you do not need to fix it in code.

Expect several tries

You usually need five or six generations before one looks good. I queued many at once to check the output was crisp. In my case I spent close to 1,000 credits before I got a clip I loved. Getting the clip is the hardest part, but it is not impossible, and the rest is simple.

Download the version you like. A lower resolution download is faster and good enough for building.

It helps to run a batch, then wait for at least one result to finish while you do something else, such as creating your project folder. That is what I did in the video, and it keeps the process from feeling slow.

Step 3: Set up the project folder

While the clips generate, make a folder on your desktop for the project. I named mine crypto landing page. Open Google Antigravity, click open folder and select it. Then drag your hero video into that folder.

Drag the video into the folder before you open the agent chat, so the agent can see it when you paste the prompt. I use a color on the folder only so I can find it easily on my desktop.

Step 4: Paste the one shot website prompt

Copy the one shot website prompt from the document and paste it into the Antigravity agent. It writes the code, and runs the site on localhost. You may need a few manual tweaks, but that is about it.

Check the result: the hero loop should play, with the sections below it. Ask the agent for any adjustments.

For getting it online with Netlify, connect GitHub using the command line so your project has a continuous push to GitHub. You can also turn it into a fuller SaaS by adding a database and APIs, and the sky is the limit as I say in the video.

I also note that I kept the video short to respect your time, so repeat each step with your own design and prompts.

Treat the first build as a draft. The sections that already exist, such as security, compliance and pricing, are a good base. If you want to pitch a version like this to a client, replace the placeholder brand and copy with theirs and review every claim on the page.

If something looks off, describe the problem to the agent in plain language, for example that the text overlaps the coin, and ask it to fix that. Small corrections through chat are faster than editing the code by hand.

Watch the full 8 minute video to see the hero image, the looping animation and the finished platform come together.

Watch the full video See EducateXAI

Results vary and depend on your effort. Read the results disclaimer.

Questions people ask

Why use the same start and end frame?

When both frames are identical, the animation returns to where it began, so it can play on repeat with no visible jump. That is what makes a clean looping hero background.

How many generations will I need?

In my experience five or six at minimum, and sometimes many more. In this video I spent almost 1,000 credits before I got the clip I wanted, so budget for retries.

Why remove text from the hero image?

The site adds its own headline and copy in code. Text baked into the image would clash with it and look wrong, so I ask the image model to leave the artwork clean.

How do I put the site online?

Connect your project to GitHub with the command line and deploy from there with Netlify, as I describe in the video. You can also ask the AI agent to guide you through a static deployment.

More from the channel

Prefer short reads? Start with the EducateXAI guides.