Scroll storytelling websites

How to Build a Storytelling E-Commerce Website With AI

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

Video: I Built a $5,000 Storytelling Website for Puma Using AI in 30 Minutes on the AI with Shreyas Raj YouTube channel.

Short answer: Generate a hero image and a short video in Google Flow, speed the clip up in an editor, convert it into scroll frames, then hand all assets and a build prompt to a coding agent. Give it GitHub and Netlify tokens so it can create the repo and deploy.

What you will learn

Generate the hero image first, then animate it into a short video
Speed the clip up in an editor so the motion feels dynamic
Convert the video into frames so the page loads fast and scrolls smoothly
Give the agent file paths and reference images, not just file names
Use GitHub and Netlify tokens so the agent can deploy for you

What a storytelling e-commerce site is

The site in this video is a scroll-driven brand story: an animated hero, short video moments, strong calls to action, add to bag and a checkout flow. This used to be the work of graphic designers and 3D artists. With AI video you can build the front end yourself, and in the video I note you could add Shopify as a backend for real checkout.

I built this as a demo for a well-known sportswear brand, so the example is about the process, not a finished client site.

The finished site has a hero, short video moments and short punchy lines with calls to action, such as step into what feels good and run together, win alone. The goal is a story, not a catalog, and the add to bag and checkout buttons work on the front end.

Generate the hero image

I take the image prompt from the prompt document in the description and paste it into Google Flow. Flow is free with a Google AI Pro subscription, which has a one-month free trial in my experience. I start a new project, check that the image is 16 by 9 and generate a few variations.

Then I pick the one that looks best, and add it as an ingredient for video generation.

If you cannot use Flow, the video's alternative is any other image generator. The reason I use Flow is that image generation is cheap there and I get about a thousand credits with the trial, although I had around five hundred left.

Turn it into a video

I switch to video generation, set it to one generation to save credits, and paste the second prompt from the document. These prompts are crafted to work without a reference image. I also tried adding my own direction, an intense chase between the animal and its prey, and generated a couple of alternatives.

The clips can look too slow. I downloaded them, opened CapCut and sped the best clip up. I tried 1.4x, then 2x, and settled around 1.6x. The goal is that the animal looks like it is sprinting, then the page content takes over.

I added a prompt about a high-adrenaline chase to get a more dramatic variation. I generated twice and compared. Some takes were slow, which is why the editing step matters.

Convert the video into frames

Putting a full video directly on a website slows it down badly. So I use ezgif to split the video into frames. I upload the video, choose around 20 to 25 frames, tell it not to display the images and download the frames as a zip of about 12 MB.

The website then moves through those frames as the visitor scrolls. This improves performance and keeps the page from loading slowly.

I could not use direct video because it would drastically reduce speed and quality of the website. So the frame sequence is the core trick of this build, and I would use it again.

Create supporting images

A website should not look plain. I asked Perplexity for more image prompts that match the brand's feel, grabbed a few such as a dark moody animal in tall grass and one in the jungle, and downloaded the images at 2K. I was not using JSON prompts this time, so I was less sure of the output, and a few looked average. Choose the ones that fit.

I quickly noticed that without JSON prompts I was less confident of the quality. Some outputs looked mid. That is fine, since you shortlist the best and discard the rest.

Prompt quality matters here. The hero prompts in the document were thoughtfully crafted, and viewers have asked me how I generate prompts like that. In my experience it takes a lot of time and effort to write a prompt that works without a reference image, which is why I give them away in the description.

Set up the coding agent

For the coding agent I use GitHub Copilot inside VS Code, which has a free 30 day trial. In my experience it gives generous limits on Claude Opus 4.6. Activate Copilot, open a new VS Code window, create a project folder and select the model. Set approvals to autopilot, otherwise you must approve each command.

Then I paste the website prompt, give it the image folder paths, attach the images as references so it sees how they look, and give it the folder of frames for the hero. Queue new instructions rather than interrupting the current run.

Watching the usage in the bottom right corner of VS Code lets you see rate limits. If you run out, you can sign out and switch accounts from the bottom left, which is what I do.

Let the agent create the repo and deploy

To save time later, I generate a GitHub personal access token with the repo scope from developer settings, and a Netlify personal access token with a short duration. I paste each into the agent with a clear instruction: create a repository, and deploy to Netlify and give me a live URL.

The first result looked good but grainy, so I asked the agent to retain the original image and video quality. Product images were not generated in this demo, but you can add them. Treat tokens as secrets and delete them when you are done.

The result also had a watermark from the video model, which I mention in the video. For client work you would use a plan that removes it and replace the placeholder product imagery with the real product shots.

The quality issue I noticed was graininess in the video, so I asked the agent to retain the original image and video quality. It is normal to do one or two correction rounds like this, and the page then looks cleaner.

Watch the full video to see the generation, the frame conversion and the live deployment.

Watch the full video See EducateXAI

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

Questions people ask

Why convert the video into frames?

A full video on a page can slow loading a lot. Frames that advance with scrolling keep the page fast and let the animation follow the visitor's scroll, which is what gives the storytelling feel.

How do I get the AI tools for free?

In the video I use Google Flow through a one-month Google AI Pro trial and GitHub Copilot through its 30 day trial. Free trial terms can change, so check each current offer.

Why use autopilot mode?

Otherwise the agent asks for approval on every command and file change. Autopilot lets it work through the whole build. Only use it in a project folder where you are comfortable with that.

Why give the agent reference images as well as paths?

Paths tell it where the files are. Attaching the images as references shows it what they actually look like, so it can place them in sections where they fit instead of relying on file names.

More from the channel

Prefer short reads? Start with the EducateXAI guides.