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” [009]
- Nate Herk used this to transform the AI Automation Society website hero from a static layout into a scroll-driven 3D experience [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 [009]
- Motions.ai is recommended for finding scroll-journey animation templates; their prompts can be copied directly into Claude Design [009]
- File upload limits in Claude Design: approximately 30–40 MB per asset; videos up to ~20 seconds confirmed to work [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
- [009] Nate Herk — Claude Design cluster (2026-04-17 to 2026-04-21)