Heidelberg AICurriculum

Build Animated Websites with Claude Code + Higgsfield

Leon van Zyl ·2026-06-02 ·2 min read

Summary written by us from the video's transcript. The video, and everything in it, is Leon van Zyl's work.

Learn how to use Claude Code together with Higgsfield AI to generate, animate, and embed a custom avatar on a landing page.

Takeaways

  • Installing the Higgsfield generate skill lets Claude Code call image and video generation tools directly.
  • A white background and extra space around the avatar simplify later animation and compositing.
  • Use explicit aspect‑ratio and background prompts to get a clean looping video; specify start/end frames for perfect loops.
  • Remove unwanted audio by having Claude produce an FFmpeg command before embedding the video.
  • Check mobile responsiveness with browser dev tools to ensure the animated avatar integrates well across devices.

Setup the starter project

Download the starter repo from the video description and run `npm install` in the project folder to install dependencies. Then start the development server with `npm run dev` to see the basic website locally.

Install Higgsfield generate skill

Open a new terminal in the project directory, copy the `add skill` command shown in Claude Code, and run it. Select the **Higgsfield generate** skill from the list, choose Claude Code as the target, and install it at the project level. The skill adds all necessary installation steps for the Higgsfield CLI.

Authenticate with Higgsfield

Ask Claude Code “How do I authenticate using the CLI?” to receive a one‑line authentication command. Paste that command into a terminal, follow the link to Higgsfield, log in, and grant access. After this Claude can invoke Higgsfield tools on your behalf.

Generate avatar images

Prompt Claude with a request such as: “Use Higgsfield to generate four variations of a friendly robot avatar that matches this landing page. Use GPT‑image2, 1:1 ratio, high resolution, clean white background. Save the options in the public folder.” Higgsfield returns several PNGs; pick one that has ample white space above and below for later animation.

Add the avatar to the page

Tell Claude to place the chosen avatar image on the yellow section of the landing page, splitting text left and image right, and wrap it in a Claude Code CLI‑type frame with a white background. You can also request a simple typing animation at the bottom of that frame.

Create and refine the animation

Use a video generation model (e.g., C‑Tons 2) via Xfield: prompt Claude to animate the avatar with a five‑second idle loop featuring gentle breathing, slight head movement, and occasional blink, saving the result as a video in the public folder. If the aspect ratio or background is wrong, ask Claude to regenerate with a 1:1 ratio and pure white background. To ensure a seamless loop, tell Claude to use the same start‑and‑end frame image. If audio is present, request Claude to generate an FFmpeg script that strips it out.

Integrate and test responsiveness

Insert the final video file into the website where the avatar placeholder was. Open developer tools (F12) and switch to mobile view to verify that the animated avatar looks good on smaller screens. Adjust prompts for subtle page motion, hover states, or background accents if the avatar feels detached from the layout.