5 portfolio websites to build with Claude x Higgsfield

All five builds are below, each with the prompts to make it. You need two tools: Higgsfield for every image and video, and Claude Code to build the pages.

If you would rather stay in one window, add Higgsfield to Claude as a connector (an MCP server). It is a one time setup, and after that Claude can generate the images and videos for you inside the same chat.

Start here: how these work

Four of the five sites rely on one simple idea. The visitor's cursor or scroll controls a video or a pair of images, so the page reacts to them in real time. The fifth, the layered site at the end, uses no video at all. It is pure code, and the hero separates into layers like sheets of paper as you scroll.

The one prep step for the video sites. A normal video file only stores a complete frame every couple of seconds and describes the frames in between as changes. When scroll jumps around the timeline, the browser has to rebuild those frames, and the playback stutters. Every build prompt below asks Claude to encode the video again with keyint=1, which makes every single frame a complete frame, so the page can jump to any moment instantly. You never open a terminal. Claude runs it.

Keep every clip short, 5 to 8 seconds. A video with a complete frame at every step is heavy, and short clips keep the site fast.

1. The interactive secret reveal portfolio

A visitor moves their mouse across your face and a chrome version of you ripples into view underneath. It looks 3D. It is really two flat images on top of each other, and the cursor paints a soft hole through the top one.

Generate two portraits. In Higgsfield, create a clean studio portrait of yourself. Then create a chrome or helmeted version with exactly the same framing. The whole effect depends on the two images lining up pixel for pixel, so make the second one from the first by using it as the input image:

Keep the exact framing, pose, head position and lighting of the input
image. Change only the material: the person is now a polished chrome
sculpture, same face, same expression. Same plain background.

Build the reveal. You have two options. Stack the two images in Unicorn Studio, a free drag and drop effects tool where no code is needed. Or have Claude build the liquid reveal from scratch, which is free and has no watermark. Save the images as front.jpg and back.jpg and paste this into Claude Code:

Build a single self contained index.html: a portfolio hero with front.jpg
stacked exactly over back.jpg, both object-fit: cover and perfectly
aligned. Draw front.jpg on a canvas and let the pointer erase a soft,
round hole in it (radial gradient brush, about 180 px) so back.jpg shows
through. Add a subtle liquid ripple distortion around the edge of the
hole. The hole follows the cursor and slowly heals over two seconds, so
the page returns to normal when the visitor stops. Dragging a finger does
the same on touch screens. With prefers-reduced-motion, show front.jpg
with a button that swaps to back.jpg instead. Then run it and show me a
preview.

Wrap it into a page. Once the effect works, one more prompt turns it into the full landing page: "Build a complete portfolio landing page around this hero, with my name, one line about my work, three selected projects and a contact button."

2. The scroll linked animation

As you scroll down, the mouth of a cartoon character opens wider and wider, and a black hole grows out of it until it swallows the whole page. Scroll back up and it closes again. The scroll bar is playing the animation frame by frame. It is the same scrubbing trick as the parallax site further down, with a playful character animation in place of a cinematic clip.

Generate the animation. In Higgsfield, make it as one continuous clip with Seedance. Slow, even motion matters more than anything else, because any jump in speed feels like lag once it is tied to scroll.

The animation prompt:

A flat 2D cartoon face in the center of a plain cream background, seen
from the front, simple line art. The mouth opens slowly and steadily,
wider and wider, and a pure black void spreads out from inside it until
the whole frame is solid black. One continuous shot at a constant speed,
ending on a fully black frame. No cuts, no camera movement, no flashes.
Minimal and playful.

The build prompt. Save the clip as anim.mp4, open Claude Code in that folder and paste this:

Build a single self contained index.html with a scroll linked animation
hero. Make a tall scroll section, around 300vh, with a sticky inner
wrapper pinned to the viewport (position: sticky; top: 0; height: 100svh)
that holds anim.mp4 with object-fit: cover, muted, playsinline,
preload="auto" and a poster image. Keep the video paused and let scroll
drive it: map my progress through the section, from 0 to 1, onto the
video from its first frame to its last, so scrolling down opens the mouth
and scrolling up closes it. Run this in a requestAnimationFrame loop that
eases currentTime toward the target (a lerp) so it feels smooth. Never
set currentTime directly inside the scroll event, and wait for
loadedmetadata before using duration so it is never NaN. Place my name
and a short intro over the video with z-index, and fade the text out as
the black takes over the screen. On touch devices and with
prefers-reduced-motion, loop the clip on autoplay or show the poster
instead. Encode the video again with ffmpeg using
-x264-params keyint=1:min-keyint=1 -pix_fmt yuv420p so every frame is a
keyframe and scrubbing is instant, and export the first frame as
poster.jpg. Then run it and show me a preview.

The mouth and the black hole are only one idea. The same build works for anything that changes smoothly from start to end: a flower opening, a face taking shape, a logo drawing itself. Whatever the clip does, the scroll plays it.

3. The hand tracking paper scrunch portfolio

A papercraft portrait of you crumples into a ball of paper as the visitor closes their fist in front of the webcam, live. It is the same trick as the other video sites. The hand is the slider in place of the cursor or the scroll.

Make the flat portrait. In Higgsfield, use Seedream with a few photos of yourself to create a papercraft sculpture portrait on a black background.

Crush it into a video. Give that portrait to Seedance as the start frame and prompt the whole sculpture to slowly scrunch into a ball of paper, in one continuous take:

The paper sculpture portrait slowly crumples inward from every side until
it becomes a tight ball of paper in the center. One continuous take,
static camera, black background, even speed, no cuts.

Wire it up in Claude. Save the clip as scrunch.mp4 and paste one build prompt. It adds webcam hand tracking, so opening and closing the hand plays the video forward and back, with the keyframe fix included:

Build a single self contained index.html where my hand controls
scrunch.mp4 through the webcam. Use MediaPipe Hand Landmarker
(@mediapipe/tasks-vision from jsDelivr, one pinned version) in VIDEO mode
for one hand. Measure how open the hand is from 0 (fist) to 1 (open) by
averaging the distance from the four fingertips to the wrist and dividing
by palm size, then smooth it. Open hand shows the first frame (flat
portrait), a fist shows the last frame (crumpled ball). Keep the video
paused and ease currentTime toward the target in a
requestAnimationFrame loop. Before the camera starts, show poster.jpg and
a Start button explaining that the camera stays on this device. Without
a camera, the mouse wheel controls it. Encode the video again with ffmpeg
using -x264-params keyint=1:min-keyint=1 -pix_fmt yuv420p and export the
first frame as poster.jpg. Serve it locally, since the camera only works
on https or localhost, and show me a preview.

4. The parallax scroll portfolio

A cinematic scene plays as the visitor scrolls down the page: a portrait dissolving into particles, a slow push in, a product turning. It looks like a 3D scene rendering live. It is one video with its timeline tied to the scroll bar.

Generate the hero video. In Higgsfield, make one slow cinematic clip with Seedance. One continuous take, subtle motion and a single camera move. Upload a start frame so you control the composition.

Wire it up in Claude. Save the clip as hero.mp4 and paste one build prompt. It pins the video and ties its timeline to the scroll, with the keyframe fix, so scrolling plays the scene:

Build a single self contained index.html: a cinematic parallax scroll
hero. A section about 400vh tall holds a sticky wrapper (position:
sticky; top: 0; height: 100svh) with hero.mp4 filling it, object-fit:
cover, muted, playsinline, preload="auto" and a poster. Keep the video
paused and map scroll progress through the section, 0 to 1, onto its
timeline, easing currentTime toward the target in a
requestAnimationFrame loop and waiting for loadedmetadata before using
duration. Fade in my name at the start, my role at about 30 percent and
a link to my work at about 70 percent. On touch devices and with
prefers-reduced-motion, show the poster with the text instead. Encode
the video again with ffmpeg using -x264-params keyint=1:min-keyint=1
-pix_fmt yuv420p and export the first frame as poster.jpg. Then run it
and show me a preview.

5. The layered animated portfolio

This is the one that feels like magic. As you scroll, the hero separates into layers, like sheets of paper lifting apart. Your photo is one layer, your headline another, the background another, your button another, and each drifts at its own speed, so the page gains real depth. No video here. It is pure code, and it works beautifully with your own cut out photo and text.

Prepare your layers. All you need are the pieces as separate images or text: a cut out photo of yourself with the background removed, your headline, a background and a button. Any free background remover works for the photo.

The build prompt. Open Claude Code in a folder with your photo, saved as photo.png, and paste this:

Build a single self contained index.html: a layered parallax hero that
feels like sheets of paper. Stack these as separate layers, from back to
front: a full bleed background, a large headline, a cut out photo of me
(photo.png, transparent), a short subline and a call to action button.
On scroll, move each layer up the page at a DIFFERENT speed with
transform: translate3d (background slowest, then headline, then photo,
then subline, button fastest) so they separate like lifting sheets of
paper and the page gains depth. Put a soft shadow under the photo layer
so it looks like it floats above the others. Drive it from a
requestAnimationFrame loop that reads scrollY, not a scroll listener that
sets styles directly, add will-change: transform to the moving layers,
and clamp the movement so nothing drifts off screen. With
prefers-reduced-motion, turn the parallax off and show a clean, still,
stacked hero. Make it fully responsive and order everything with z-index
so the photo sits above the text where they overlap. Then run it and
show me a preview.

The paper feeling comes from the different speeds plus the soft shadow on the photo. If it still looks flat, ask Claude to make the speed gap between the layers bigger, or to add a little blur to the background so it reads as further away.

The links

• Higgsfield for every video and portrait
• Claude Code to build every page
• Unicorn Studio for the no code effect in site one

To put any of these online, drag the folder onto Netlify Drop and you get a live link to share in seconds.

New to Claude Code? It is the version of Claude that can actually create and save the website files for you, where the chat only talks about them. The regular Claude chat works too: ask for the page as one HTML file and download it.