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)

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 494 indexed pages and articles.

  1. Wiki concept Imagen 3 (Nano Banana 2) Google's image generation model (referred to as "Nano Banana 2" in Nate Herk's content). Previously Nate's primary image generation tool for thumbnails and Claude Design hero Related by image
  2. 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
  3. Insight AI Beyond POCs How enterprise AI moves beyond proofs of concept through ownership, governance, measurement, adoption, and production operating models Readers have engaged with this next