Claude Code Guide

Build a $10K parallax website
with one prompt

By Dan Donovan, @askdandonovan

Take any video, give Claude Code one prompt, and get a premium parallax scroll animation that agencies charge five figures for.

3 Steps
3 min Build time
1 Prompt
Free tools Subscription req'd

What is a parallax scroll animation?

A parallax scroll animation is when scrolling the page animates through video frames. It creates that premium, studio-level feel you see on high-end agency sites. The kind of thing that makes people pause and ask how it was built.

Claude Code can build one from any video with a single prompt.

What you'll have after this
Parallax Scroll Landing Page
A full page that animates on scroll
Video-to-Frames Conversion
Automatic frame extraction from your video
Smooth Scroll Animation
Frame-by-frame playback tied to scroll
Portfolio-Ready Site
Use it for your own work or a client project
Before you start: You'll need Claude Code installed and a source video. Shoot one with your phone, find one online, or generate one with an AI tool like Kling. Claude Code requires an Anthropic subscription.
Need Node.js? You'll need Node.js installed. Download free at nodejs.org (LTS version).
1

Get a video

Shoot one with your phone, grab a stock video, or generate one with AI. Shorter videos work better. A 5-second video produces about 150 frames. Keep it under 10 seconds for fast page loading.

Save the video file somewhere easy to find on your computer. MP4 and MOV work best. Most phone videos are already in one of these formats.

Free stock videos: Pexels and Pixabay both have free stock videos you can use commercially. Search for drone footage, product shots, or timelapses.
2

Open Claude Code

Where's Terminal? On Mac, press Cmd + Space, type Terminal, and hit Enter. On Windows, press the Start button, type cmd, and hit Enter.

First, create a folder for your project:

Terminal 
mkdir ~/Desktop/parallax-site

Move your video file into that folder, then navigate there:

Terminal 
cd ~/Desktop/parallax-site
What's cd? cd means "change directory". It tells Terminal where to look for your files.

Then start Claude Code:

Terminal 
claude
First time? It'll ask you to log in. Sign in with your Anthropic account and you're set.
3

Use this exact prompt

Paste the following prompt into Claude Code. That's it. Claude will handle the rest -- extracting frames, building the HTML, wiring up the scroll animation.

Important: Replace my-video.mp4 with your actual video filename (e.g., drone-shot.mov).
Prompt 
Take the video file my-video.mp4, chop it into different frames, and make it into a parallax scroll animation where scrolling down animates from the first to the last frame. Make it a premium, studio-level landing page.
Approving commands: When Claude Code asks permission to run a command, type y and press Enter.
About ffmpeg: Claude Code may need a tool called ffmpeg to extract video frames. If it asks to install it, type y and press Enter to approve.

When it's done, you'll have a complete HTML page with all the extracted frames and a smooth scroll animation.

How to view the finished site: When Claude Code finishes, it creates an HTML file (usually index.html) in your project folder. To see it: double-click index.html in Finder, or type open index.html in Terminal.
A note on quality: The result is about 95% as refined as a hand-built studio site. For a landing page or portfolio, it's more than enough.
Something go wrong? Copy the error message and paste it back into Claude Code. It can usually fix the problem itself.

What to try first

The prompt works with any video. Here are a few ideas to get you started:

Use a product demo video for a SaaS landing page
Use a drone shot of a city for a real estate hero section
Use a timelapse for a creative portfolio header
"This is the kind of site that gets clients asking 'who designed this?' The answer is one prompt."