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” ^[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)