Building Animated Websites with Claude Code and Seedance 2.5

The Three-Step Design Cycle

The author proposes a repeatable cycle for web development: finding inspiration, invoking specialized skills to execute the build, and iterating on components. This process moves from high-level aesthetic choices to granular component adjustments, using Claude Code as the primary engine for both code generation and asset management.

Cloning and Remixing Layouts

To bypass manual scaffolding, the author uses a custom skill called siteclone to ingest a URL and generate a pixel-perfect local recreation of the site's structure and animations. Once the base is established, the remix-site skill is invoked to generate multiple design variations. This tool allows the user to define "amplitude" (how much the variation deviates from the original) and "anchors" (aesthetic references from a local "taste vault"). The process concludes with an in-depth tweak panel that enables granular control over page spacing, reveal staggers, and visual effects like grain or gradients.

AI-Driven Asset Integration

For hero sections, the author integrates AI-generated video to avoid static layouts. The workflow involves generating a reference image using tools like Cdream version 5, ensuring proper composition with "dead space" for text overlays. The Higgsfield MCP is then used within Claude Code to generate video from that reference image using Seedance 2.5. The author emphasizes that animations should be subtle, such as pulsing light or faint movement, to avoid distracting from the core content. For mobile optimization, the author suggests a conditional check that serves a static image instead of the video asset to preserve performance.