The Workflow: From Asset Generation to Scroll-Triggered UI

To build a high-end, interactive web experience, the author employs a multi-stage AI workflow that bridges visual generation with frontend implementation. The process begins by using Higgsfield AI to generate specific visual assets—in this case, an iPhone and its internal components—using a reference image. Once the base images are created, Kling AI is used to generate a video sequence where the phone breaks apart into its constituent parts.

Bridging Design and Code

The core technical challenge is transforming a static video file into a scroll-controlled interaction. The author uses Claude Design to generate the initial landing page layout, then transitions to Claude Code to handle the implementation. Because standard video files do not allow for precise synchronization between scrolling and specific visual states, the author uses FFmpeg to decompose the MP4 into individual frames. This allows the code to map specific scroll positions to specific frames, enabling the user to scrub through the animation by scrolling up or down.

Iterative Refinement and Deployment

The final phase involves refining the UI through iterative prompting. The author addresses visual issues—such as harsh shadows and element sizing—by providing screenshots back to the AI agent to guide visual adjustments. The process concludes by adding an 'onload' animation for polish and a reverse-scroll logic that snaps the phone back to its center state once the animation sequence completes. Finally, the project is deployed via Vercel to create a live, shareable URL.