Summary
Keith AI demonstrates how to build a scroll-driven cinematic website — where scrolling controls video playback frame by frame — for just $13 using a pipeline of three AI tools: Higgsfield for generating images and video clips, Claude Code for writing the website itself, and an MCP (Model Context Protocol) integration that connects them through a model called Fable 5.
The core workflow breaks down into five stages: generating five keyframe images that represent the most important visual moments, using Higgsfield to produce short video clips that transition between those keyframes, extracting hundreds of individual frames from the resulting footage, and finally having Claude Code build a website that maps scroll position to frame index. The result mimics 3D or interactive video without any actual 3D rendering.
Keith shares several hard-won lessons: keyframe quality is the highest-leverage investment because video generation costs roughly ten times more than image generation, so iterating on images before committing to video saves significant money. He also documents a UI Prompts MCP that can swap in pre-built templates with custom branding, dramatically reducing token costs for users who want to adapt existing designs rather than generate everything from scratch. The tutorial includes discussion of camera consistency challenges and explains why breaking a project into short clips rather than one long video produces more reliable output from Higgsfield.
📺 Source: Keith AI · Published July 29, 2026
🏷️ Format: Hands On Build
