Descriptions:
Nate Herk of AI Automation Society provides a full walkthrough for building scroll-driven 3D websites using Claude Design, Anthropic’s visual web builder. The video opens with two completed transformations — Herk’s AI Automation Society site and his personal site — both converted from static pages to parallax, scroll-animated experiences in roughly 20 minutes each.
The workflow is specific and multi-tool: starting in Claude.ai chat to develop brand identity and copy, then generating a background image prompt, rendering it in Kling.ai (Nano Banana 2 model at 16:9 ratio), and animating it to a looping video that is uploaded as the hero background in Claude Design. The tutorial covers two entry paths — importing an existing GitHub repository and building from scratch — and walks through palette selection, font controls, and writing scroll animation logic that maps video frames to page scroll position.
Herk also addresses practical constraints that most tutorials ignore: he spent over $200 in excess usage experimenting with Claude Design and shares specific strategies for managing quota consumption. Deployment is covered step by step. A downloadable zip of the completed website — including scroll animation code — is available through his free School community. This tutorial is particularly useful for non-engineers who want production-quality animated sites without writing raw CSS or JavaScript.
📺 Source: Nate Herk | AI Automation · Published April 21, 2026
🏷️ Format: Tutorial Demo
