Build a scroll-animated website for any businessany business

See the live demo

The site built in the video: a burger that opens into its layers as you scroll. Open it on your phone.

What you need

• Google FlowGoogle's AI studio for the two photos and the short video. A clean video usually takes several tries, so a paid plan helps.
• An AI coding assistantClaude Code (paid Claude plan) is what the video uses. Codex, Cursor or Antigravity also work.
• NetlifyFree hosting, so anyone can open your site from a link.

Set up your computer

Copy this file or download it, paste it into your AI assistant and say set this up for me. It installs FFmpeg and Anthropic's free frontend-design skill, skips anything you already have, and stops to explain if something fails.

# Goal

Set up this computer so an AI coding assistant can build a scroll-animated website: a short video is cut into still frames, and the website shows those frames one by one as the visitor scrolls. When you finish, the human has FFmpeg working, the free frontend-design skill from Anthropic available, and an empty project folder ready for their video.

# Rules for you (the AI)

- Detect the operating system first (macOS, Windows or Linux) and use only the commands for that system.
- Check whether each tool is already installed before installing it. If it is, say so and skip that step.
- Never overwrite existing files, folders or settings without asking the human first.
- Everything in this setup is free. If anything you are about to do would cost money, stop and ask.
- Ask the human only for things only they can do (for example, approving an install prompt or typing their computer password).
- If a step fails, stop and explain the error in plain words. Do not guess or try random fixes.

# Steps

## 1. FFmpeg (free tool that cuts video into pictures)

Check:

```
ffmpeg -version
```

If it is missing, install it:

- macOS (needs Homebrew; if `brew` is missing, ask the human before installing Homebrew from https://brew.sh):
  ```
  brew install ffmpeg
  ```
- Windows:
  ```
  winget install --id Gyan.FFmpeg -e
  ```
  Then tell the human to close and reopen the terminal so `ffmpeg` is found.
- Linux (Debian or Ubuntu):
  ```
  sudo apt-get update && sudo apt-get install -y ffmpeg
  ```

Verify: `ffmpeg -version` prints a version number.

## 2. The frontend-design skill (free, from Anthropic)

This skill gives design guidance so the website does not look like a basic template.

- If you are Claude Code: download the skill file into your skills folder. If `SKILL.md` already exists there, ask before replacing it. This command also creates the folder:
  - macOS or Linux:
    ```
    curl -fsSL --create-dirs https://raw.githubusercontent.com/anthropics/skills/main/skills/frontend-design/SKILL.md -o ~/.claude/skills/frontend-design/SKILL.md
    ```
  - Windows (PowerShell; type `curl.exe`, not `curl`):
    ```
    curl.exe -fsSL --create-dirs https://raw.githubusercontent.com/anthropics/skills/main/skills/frontend-design/SKILL.md -o "$HOME\.claude\skills\frontend-design\SKILL.md"
    ```
  Then tell the human to restart Claude Code once, so it picks up the new skill.
- If you are a different AI assistant: download the same file into the project folder (step 3) as `design-guidelines.md`, and read it before building any web page there.

Verify: the file exists and its first lines include `name: frontend-design`.

## 3. Project folder

Ask the human where to create the project. If they have no preference, create a folder called `my-animated-site` on their Desktop. Tell them to put their video inside it, named exactly `video.mp4` (or tell you the real file name).

# Final check

Make a 5-second test video, cut it into frames, and confirm the frames exist, then delete the test files. First create an empty folder called `test-frames` (use the right command for this system), then run:

```
ffmpeg -y -f lavfi -i testsrc=duration=5:size=1280x720:rate=24 test.mp4
ffmpeg -y -i test.mp4 -vf "fps=24" -q:v 5 test-frames/frame_%03d.jpg
```

Count the files in `test-frames` (there should be about 120). If they are there, say "Setup is complete", delete `test.mp4` and `test-frames`, and tell the human: put your video in the project folder, open your AI assistant inside that folder, and paste the build prompt from the resource page.

# Cost

- FFmpeg: free.
- frontend-design skill: free.
- Google Flow (for the product photos and video): a clean video usually takes several tries, so a paid plan helps.
- Netlify (to put the site online): free for small sites like this.
- The AI assistant itself: Claude Code needs a paid Claude plan. Free alternatives exist, with usage limits.

Build it in 6 steps

1. Make the closed product photo

   In Google Flow, choose image, select Nano Banana and set the shape to wide (16:9). Replace every part in [CAPITALS] before you paste.

   Open Google Flow
   Photo 1 prompt Copy

   Studio product photo of [YOUR PRODUCT: what it is, its layers or parts, its colours], wide 16:9 frame. It sits on [WHAT IT STANDS ON, for example a thin round gold board]. The product is narrow in the frame: it fills only the middle third of the width, perfectly centred left to right. It sits low, near the bottom of the frame, and the whole top half of the frame above it is empty. Plain, flat [BACKGROUND COLOUR] background in one even colour, with no texture, no gradient, no table edge and no props. Soft, even front light with only a faint soft shadow under it. Straight-on eye-level camera. Nothing else in the frame, no text, no logo.

   Keeping the product narrow, low and centred leaves room for its parts to rise, and lets phones show it large.

2. Make the opened product photo

   Add Photo 1 as the reference image, then paste this. List the pieces from bottom to top, and say what stays attached to each one.

   Photo 2 prompt Copy

   Use the reference image. Keep the exact same product, colours, lighting, background, camera angle and framing. Change only one thing: the product is lifted apart into exactly [NUMBER] pieces, floating straight up in a vertical stack with even empty gaps between them. From bottom to top: [LIST EACH PIECE AND WHAT STAYS ON IT]. Every part stays attached to the piece it belongs to: nothing floats on its own and nothing is hollow. The bottom piece stays exactly where it was. Every piece stays level, centred, the same size as before, and inside the middle third of the width. No extra objects, no text.

   Check both photos side by side: same background, same product, same size and position, and the right number of pieces. If not, generate Photo 2 again before you spend credits on video.

3. Make the video

   Choose Frames to Video, select Veo 3.1 Quality, put Photo 1 as the first frame and Photo 2 as the last frame, then paste this.

   Video prompt Copy

   A slow, smooth exploded view of [YOUR PRODUCT]. Starting from the closed product, it lifts apart into [NUMBER] pieces, the top piece first, until they match the final frame. Every part stays attached to its piece and no new parts appear. Each piece moves straight up only, staying level, with no spinning, tilting or wobbling. The camera is completely still: no zoom, no pan, no shake. The [BACKGROUND COLOUR] background, the lighting and the soft shadow stay exactly the same for the whole video. No hands, no new objects, no text. Hold still on the final position for the last second.

   Download it at the highest quality, rename it to video.mp4 and put it in your project folder.

4. Build the website

   Open your AI assistant inside the project folder and paste this. Fill in the business, the sections you want and your colours.

   Build prompt Copy

   Build a one-page website for [BUSINESS NAME], a [TYPE OF BUSINESS], in this folder. The video video.mp4 is in this folder.
   
   1. Use FFmpeg to cut video.mp4 into about 120 frames, 1600 pixels wide, saved as compressed JPG images in a folder called frames. If the video has thin black bars at any edge, crop them off first.
   2. Hero: a full-screen canvas that shows those frames as the visitor scrolls. Scrolling down opens the [PRODUCT] into its parts, scrolling up closes it. Match the page background to the video's background colour and fade the video's edges into it, so there is no visible edge. Put the business name and one short line over the hero, in the empty space above the [PRODUCT].
   3. After the hero, add these sections: [YOUR SECTIONS, for example: three products with a name, one line and a price each; how ordering works in three steps; a short note from the owner; an order form with name, email, date and size]. The form only shows a thank-you message, it does not send anything.
   4. Style: [THE FEEL, for example premium and calm]. [HEADING STYLE, for example serif headings], [YOUR COLOURS] colours, lots of space, soft fade-ins as sections appear.
   5. It must work well on phones: keep the whole [PRODUCT] visible and as large as the phone's width allows. Load the first frames first, so the hero appears quickly.
   6. Footer: "[FOOTER LINE]"
   
   Use the frontend-design skill (or design-guidelines.md, if it is in this folder). When you finish, start a local preview and give me the link.

5. Polish it

   Polish prompt Copy

   Open the site at phone width and at laptop width and check it yourself. Fix anything that looks broken, cramped or cut off, make the scroll animation smooth, and keep the whole site under 15 MB. Then tell me what you changed.

   Still something wrong? Tell your AI in one plain sentence what you see.

6. Go live, free

   Open Netlify Drop and drag your whole project folder onto the page. The live link appears in a few seconds.

   Open Netlify Drop

   Sign up to Netlify for free and claim the site, or the link can be deleted.