Scroll-Driven Animation

Web design technique where a video's playback position is tied to the user's scroll position — scrolling down advances frames, scrolling up reverses them — creating an immersive 3D journey effect in hero sections.

Key points

  • Implemented in Claude Design by instructing it to "associate each frame with a scroll position" [src-009]
  • Nate Herk used this to transform the AI Automation Society website hero from a static layout into a scroll-driven 3D experience [src-009]
  • Asset pipeline: image prompt → Krea.ai (Nano Banana 2 model) → still image → Kling AI v2.0 → looping MP4 → upload to Claude Design → scroll animation prompt [src-009]
  • Motions.ai is recommended for finding scroll-journey animation templates; their prompts can be copied directly into Claude Design [src-009]
  • File upload limits in Claude Design: approximately 30–40 MB per asset; videos up to ~20 seconds confirmed to work [src-009]

Related entities

  • Claude Design — implements scroll-driven animation via natural language prompt
  • Kling AI — animates the still image used as the video source
  • Krea AI — generates the still image from a text prompt

Related concepts

  • Visual Prototyping — scroll animation is one advanced pattern within visual prototyping

Source references

  • [src-009] Nate Herk — Claude Design cluster (2026-04-17 to 2026-04-21)

Robin Cartier perspective

This page is part of Robin Cartier's working AI knowledge graph: a practical research layer for production AI, recommendation systems, experimentation, GEO, and agentic web readiness.

The useful next step is to connect this concept back to applied product leadership and operating models.

Recommended next

Keep reading from this thread

From 500 indexed pages and articles.

  1. Wiki concept Visual Prototyping with AI Workflow pattern where AI generates interactive HTML/CSS prototypes through a visual, iterative canvas rather than pure code generation. Related by 009
  2. Wiki concept Claude Design → Claude Code Hand-off The mechanism for transferring a Claude Design prototype into Claude Code for deployment and deeper development. Related by 009
  3. Wiki concept Claude Design System A brand configuration manifest generated inside Claude Design by providing a company name, description, GitHub repo URL, brand assets (logos, fonts), and design Related by 009