Michelle — Building Scroll-Animated Websites with AI
“The easy part is making the whole scrolling website. The hard part is thinking of the imagery.”
The guided step by step build
Three sections, one scroll-animated site
Before starting, create a project folder in Claude Code or Codex. Inside it, add an assets subfolder for the visuals you plan to use, such as a profile image and background video.
Section 1
Masthead with scroll-scrubbing video
Start with a full-width background video, convert it with FFmpeg for smooth browser scrubbing, and tie playback frame by frame to the visitor’s scroll. A design.md guides the typography and visual system, while a mix-blend-mode: exclusion text treatment keeps the title responsive to the footage beneath it.
Section 2
About Me
Add a simple two-column introduction: a short bio on the left and a profile photo from the project’s assets folder on the right. If the words are not ready, let the AI draft placeholder copy and refine it later.
Section 3
An interactive component
Choose a carousel, card stack, hover effect, 3D transition, or scroll-driven interaction from Codrops or CodePen. Paste the component URL into the prompt so the coding agent has a precise reference; Michelle used Codrops’ inline menu layout for social links.
Single Prompt
Describe the whole site in one loaded prompt
What to include
State the goal, objective, visual reference, site shape, headline hierarchy, interactive elements, asset-folder path, and the final mobile requirement. Neatly labelled assets make this approach much more reliable.
“Section by section gives you control. One-shotting gives you speed.”
Prompt ingredientWhat to tell the AI
Goal & objectivePortfolio, About Me, travelogue, or blog — and what it should help you achieve.
Visual directionThe design.md reference, headline, subhead, typography, and page structure.
InteractionsSpecific Codrops or CodePen links, plus where each component belongs.
AssetsThe exact folder path and clearly named videos, photos, maps, or other media.
Ready to build?
Use the workshop guide to follow the three-step build or start with the complete single prompt.
Deployment
Two ways to bring your website live on Vercel:
- Ask the AI to deploy it for you and follow its steps, or
- Manually drop your zip/folder at vercel.com/drop.
Best practice is GitHub version control, then deploy to Vercel; you'll need to sign up for both.
Resources
Fonts
Photos & videos
design.md references
- Motion Sites
Copy up to three references before reaching the free limit.
- Refero Styles
Interactions & demos
- Codrops Hub
- CodePen
Sign up to view and save demos.
Visual techniques library
- Eyecandy
Learn camera angles and visual techniques for generating better videos.
Skills
Glossary
Masthead / Hero
The top-most visual section of a web page that introduces the brand or primary message. Use a compelling image or visual treatment to establish the experience immediately.
First Fold
The portion of a web page visible on screen immediately after loading, before the visitor scrolls.
Full Browser Width
A layout where content or visual elements stretch edge to edge across the browser width (100vw), removing side margins to create an immersive, expansive experience.
Full Browser Height
A section styled to occupy 100% of the browser viewport height (100vh). Common in hero sections and interactive stories, it focuses the screen on one idea or panel at a time.
Carousel
An interactive slider that cycles through multiple pieces of content, images, or cards within one screen area. It is useful for showcasing portfolios, product features, or testimonials without taking up extra vertical space.
Video Scrub to Scroll (FFmpeg Conversion)
An interactive effect where video playback is tied directly to the visitor’s scroll position. Converting the source with FFmpeg prepares the video for smooth frame-by-frame scrubbing and helps prevent web performance bottlenecks.
Hover
A micro-interaction or visual change—such as a colour shift, scale increase, cursor trail, or magnetic effect—triggered when a pointer moves over an interactive element like a button, link, or card.
Transition Scroll
An animation technique where scrolling triggers seamless state changes, fades, or slide transitions between sections, turning static page scrolling into a guided interactive narrative.
Parallax
A visual effect where background elements move at a different speed from foreground elements while scrolling, creating an illusion of depth, dimension, and motion on a flat webpage.
Want to share something you've built with AI?
We want to see it! If you or anyone you know has built an app, agent, workflow, or website with AI and would love to share, drop Mell (@gmmell) a message and we'll find you a spot!