Animated landing page in one evening

Agencies charge tens of thousands for an animated landing page, and about as much again for "the product spins as you scroll, like on Apple's site". You can build both in one evening: MotionSites prompts + Claude Code, and the Apple effect comes from a free FFmpeg → WebP → canvas combo 🔥

What you get: an animated landing page with living hero sections, gradients, micro-animations and Apple-style scroll scrubbing of your product — no designer, no hand-written markup and no agency price tag. The MotionSites library gives you ready-made prompts for every section, Claude Code assembles the page around your product from them, FFmpeg slices your product video into WebP frames for the canvas animation, and Vercel/Netlify publishes it for free.

The default pain point: Claude Code writes logic beautifully, but left to its own devices it produces boring design — flat blocks, stock spacing, zero motion. MotionSites plugs the section gap, and the scroll-scrubbing trick delivers the main "wow" moment — and that too you build yourself in roughly an hour, entirely with free open-source tools.

What you end up with

• A single-page landing with an animated hero and features / pricing / testimonials / CTA sections.
• Living effects: moving gradients, glassmorphism, hover animations, smooth scroll reveals.
• The Apple effect: the product rotates or assembles as you scroll — a frame-by-frame WebP sequence drawn on a canvas (the AirPods Pro page uses the same technique).
• Responsive layout for mobile and desktop.
• A live https URL you won't be embarrassed to send a client the same evening.
• A foundation you can bolt payments onto later (see the landing-payments combo in this library).

What you'll need

• MotionSites — a library of prompts for animated sections (hero, pricing, testimonials and so on). There is a free tier: some templates are open behind a Copy button. Works with Claude, Cursor, Lovable, Bolt.
• Claude Code — assembles the site from the prompts and your product description. Paid (a Claude subscription or an API key); as an engine user you already have it.
• FFmpeg — the free open-source video swiss army knife (ffmpeg.org, current branch 8.1 "Hoare", 2026). One command slices your product video into frames. Install with brew install ffmpeg (macOS) or sudo apt install ffmpeg (Ubuntu/Debian).
• WebP — Google's open image format: lossy frames are 25-34% lighter than JPEG at the same quality, lossless ones 26% lighter than PNG (Google's own figures). FFmpeg encodes it through libwebp, so there is nothing extra to install.
• Canvas API — the browser's native API for drawing frames on scroll (MDN): Baseline status, in every browser since 2015. Nothing to install either.
• Vercel (or Netlify) — free hosting for static front ends. Publishing takes a couple of commands, see the deploy-static guide in this library.

The free path: free Copy templates from MotionSites + FFmpeg/WebP/canvas (open source and a native browser API) + the free Vercel/Netlify tier. Net cost: 0 ₽ on tooling (Claude Code is paid, but you already have it).

The fast path: the paid MotionSites unlimited plan (Go Unlimited — unlocks every premium section) + your own domain. It saves you time picking blocks and gives you a grown-up address instead of *.vercel.app.

How the Apple effect (scroll scrubbing) works

Apple's AirPods Pro page is not a video. It is a sequence of frames (148 images, according to the CSS-Tricks breakdown) that JavaScript paints onto a <canvas> based on scroll position: spin the wheel and the product rotates, scroll back up and it rewinds.

Why not just nudge video.currentTime on scroll — isn't that simpler? Because it stutters: in Abhishek Ghosh's measurements seeking through a video caused hard freezes, and on Android the frame didn't update at all while scrolling. In the same tests, frames pre-cut on the server loaded 3-4.5x faster than having the browser pull frames out of a video; his verdict was that pre-computed frames served from the server are the working approach. That is exactly what this combo does:

1. A 5-8 second product video: rendered out of Blender or another 3D package, or shot on a phone against a plain background.
2. FFmpeg slices it into WebP frames: fps=30 from a 5-second clip gives you 150 frames — the same order of magnitude as Apple.
3. A canvas component preloads the frames and draws the right one for the current scroll progress via drawImage + requestAnimationFrame.

WebP instead of JPEG here isn't cosmetic: the same batch of frames weighs a quarter to a third less, and the format supports an alpha channel (transparent background behind the product).

Step by step

1. Put together a product brief. Tool: Claude Code (or a notepad). What to do: spend 5 minutes spelling out what the landing page is about, so the section prompts land on real specifics instead of "Lorem ipsum".

   Ready-made prompt:

   Help me put together a brief for a landing page. Ask me one question at a time and record the answers:
   1) the product and a one-sentence offer,
   2) who it's for (target audience),
   3) 3 key benefits,
   4) the plan/price and the main CTA,
   5) tone and palette (for example: dark, neon, techno).
   At the end, pull it all together into a short brief in Markdown.
   

   How you know it worked: you have 5-8 lines of brief with the offer, the benefits and the CTA.

2. Pick sections in MotionSites. Tool: MotionSites. What to do: open the Sections / Templates areas, pick the blocks for your page (hero, features, pricing, testimonials, CTA), hit Copy on the free ones. Paste each section's prompt into a note, in order.

   Ready-made prompt (a checklist template so you don't lose blocks):

   Landing page sections, top to bottom:
   - Hero (MotionSites prompt: <paste>)
   - Logos / social proof
   - Product on scroll (Apple effect — steps 5-6 below)
   - Features (prompt: <paste>)
   - Pricing (prompt: <paste>)
   - Testimonials (prompt: <paste>)
   - CTA + footer (prompt: <paste>)
   

   How you know it worked: you have a prompt for every block of the future page, and the section order is locked in.

3. Create the project and define the design system. Tool: Claude Code. What to do: create an empty folder, launch Claude Code and ask it to build a skeleton around a single palette — before you paste any sections in, so the blocks don't end up in different styles.

   Ready-made prompt:

   Build a single-page landing: React + Vite + Tailwind, a clean static front end with no backend.
   Here is the product brief: <paste the brief from step 1>.
   Start with a design system: dark theme, palette <colors>, 2xl rounded corners, a modern font,
   consistent spacing. For now just make an empty page skeleton with placeholder sections in this order:
   hero, logos, scroll-product, features, pricing, testimonials, cta, footer.
   Run it locally and show me the start command.
   

   How you know it worked: npm run dev opens a page with empty sections in a single palette.

4. Paste the sections in one at a time. Tool: Claude Code. What to do: take a section prompt from MotionSites and ask for it to be built into the project, keeping the shared palette and the data from the brief. One section at a time — it's easier to catch problems that way.

   Ready-made prompt (repeat for each section):

   Implement the HERO section from this prompt, fitting it into the current project and palette.
   Take the copy from the brief, don't invent new facts. Keep the animations.
   Section prompt:
   <paste the prompt from MotionSites>
   

   How you know it worked: the section is on the page, the animations play, the copy comes from your brief, and the palette hasn't drifted.

5. Slice the product video into a WebP sequence. Tool: FFmpeg (optional: this is the Apple effect, +1-1.5 hours for steps 5-6). What to do: drop product.mp4 next to the project and split it into frames with one command:

   mkdir -p public/frames
   ffmpeg -i product.mp4 -vf "fps=30,scale=1120:-2" -c:v libwebp -quality 80 -compression_level 6 public/frames/frame_%04d.webp
   

   What the flags mean: fps=30 — how many frames per second to take (15 is plenty if you want to save weight), scale=1120:-2 — width matched to the real container rather than 4K, -quality 80 — WebP quality on a 0-100 scale (default 75), -compression_level 6 — squeeze harder at the cost of encoding time.

   How you know it worked: public/frames/ contains frame_0001.webp … frame_0150.webp, totalling a few megabytes rather than a few dozen.

6. Wire up canvas scrubbing on scroll. Tools: Claude Code + Canvas API. What to do: ask Claude Code to build the scroll-product section component.

   Ready-made prompt:

   Add an Apple-style scroll-scrubbing section to the landing page (the scroll-product placeholder).
   public/frames contains the frames frame_0001.webp … frame_0150.webp (a WebP sequence).
   Do it like this: a <canvas> sticks to the full screen (position: sticky) inside a section about 400vh tall;
   the section's scroll progress 0..1 maps to a frame number; the frame is drawn with ctx.drawImage
   inside requestAnimationFrame (only redraw when the frame number actually changes).
   Preload the frames as Image objects, show the first frame immediately, don't wait for the whole batch.
   Scale the canvas by devicePixelRatio so it isn't blurry on retina screens.
   The section heading and CTA go on top of the canvas as regular HTML text — don't draw text into the canvas.
   Respect prefers-reduced-motion: if animations are off, show a single static frame with no scrubbing.
   

   How you know it worked: scroll down and the product spins, scroll back and it rewinds, the image is sharp on retina, and the page doesn't freeze.

7. Polish the design and the responsive layout. Tool: Claude Code. What to do: go over the details — mobile, animation performance, hover states, accessibility.

   Ready-made prompt:

   Go over the landing page and bring it to production quality:
   - responsive layout for mobile (check that nothing falls apart),
   - lazy-load heavy video backgrounds and add a poster placeholder,
   - for the scroll-product section, check frame weight and load order,
   - respect prefers-reduced-motion (turn animations off if the user has disabled them),
   - align spacing and typography to a single scale.
   Show me what you changed.
   

   How you know it worked: nothing breaks on a phone, animations don't lag, everything sits on one grid.

8. Deploy for free. Tool: Vercel (or Netlify). What to do: build for production and publish. There is a command-by-command deploy-static guide in this library.

   Ready-made prompt:

   Build for production (npm run build) and prepare the project for deploying to Vercel:
   check that the build passes without errors, that the public/frames folder made it into the build,
   add any config files needed, and give me a step-by-step command to publish via the Vercel CLI.
   

   How you know it worked: you have a live https URL, it opens on phone and desktop, and the animations and scroll scrubbing work.

Optional next step: add payments — this library has a landing-payments combo for that.

Free path vs fast (paid) path

Claude Code is paid on both paths (subscription or API), but you already have it as an engine user.

Common problems and fixes

• Blocks in different styles, a patchwork quilt. Define the design system (palette, corner radii, font, spacing) in ONE prompt at step 3 — before you paste any sections. Then every block lands in the shared style.
• The product section weighs as much as a movie. 150 frames at 50-60 KB each is already 8-9 MB. The fix: fps=15 instead of 30 (75 frames look almost identical), frame width matched to the real container, WebP quality 75-80. WebP itself is already 25-34% lighter than JPEG at the same quality.
• Scrubbing stutters or looks blurry. Only redraw when the frame number changes, inside requestAnimationFrame, and scale the canvas by devicePixelRatio — both are already baked into the step 6 prompt.
• The temptation to "just nudge video.currentTime". Don't: seeking a video on scroll freezes, and on Android the frame doesn't update while scrolling (see the measurements linked above). A frame sequence is the solution to exactly this problem.
• Search engines can't index a canvas. Keep the heading, offer and CTA as regular HTML text on top of or next to the canvas — otherwise SEO misses the main message on your most impressive section.
• Animations lag on mobile. Ask Claude Code to lazy-load heavy video backgrounds, add a poster placeholder and respect prefers-reduced-motion.
• The video background from the prompt won't load. Drop in your own video or image and set a fallback poster — don't rely on external links from a template.
• A premium section is locked. That's fine: use the free Copy templates, premium is optional. A good-looking landing page comes together from the open blocks too.
• Claude Code seems to "forget" the stack and rewrites things its own way. Create a CLAUDE.md file with the stack pinned down (React+Vite+Tailwind) and the palette, and point at it so the build doesn't drift between steps.
• Copy invented by the model. In every section prompt, spell out "take the copy from the brief, don't invent facts", or you'll get a beautiful but fictional offer.

Time and money

• Time: an evening, roughly 2-4 hours. Brief and section picking take 20-30 minutes, assembly and fixes are the bulk of it, deploying takes minutes. The Apple effect (steps 5-6) adds another 1-1.5 hours: video, frame extraction, component.
• Money (free path): 0 ₽ on tooling — free MotionSites templates, FFmpeg/WebP/canvas (open source and a native browser API), the free Vercel/Netlify tier. Claude Code is paid (a Claude subscription or an API key), but you already have it.
• Money (fast path): a one-off MotionSites unlimited plan (Go Unlimited — lifetime access; check the site for the price) + a domain if you want one (check your registrar's price).

The result: an agency-grade animated landing page with an Apple-style scroll effect — in one evening and, effectively, for 0 ₽ in tooling.