Five Portfolio Sites That React to Visitors, Built with Claude and Higgsfield

The portfolio sites that get shared look like they took a studio and a 3D artist. A portrait that changes under your cursor. A scene that plays as you scroll. A face that crumples when you close your hand on camera. In practice most of them are a short video or two still images, plus one number that says how far along the visitor is. Higgsfield makes the visuals, Claude Code writes the page, and you never open a 3D tool.

This guide covers five of these builds, from the easiest to the one with the most wow. They all share the same foundation, so build that once and the rest go quickly.

The one idea behind all five

Every build below turns something the visitor does into a value between 0 and 1. Cursor position, scroll progress through a section, how open a hand is. That value then picks a moment: a frame of a video, how much of a second image shows through, how far a layer has moved. Once you think of it that way, you stop asking Claude for "a cool effect" and start asking for "map scroll progress in this section to the video's timeline", which it gets right far more often.

What you need

• Claude Code, and an empty folder for each site.
• A Higgsfield account. You can generate in their web app and download the files, or add Higgsfield as a connector in Claude so it can generate for you inside the same chat.
• Three or four clear photos of yourself if you want the visuals to look like you.

Prepare video the right way first

Four of the five builds scrub a video by scroll, cursor or hand. A normal MP4 only stores a full picture every second or two, and everything in between is described as changes from that picture. Jumping to an arbitrary moment means decoding forward from the last full picture, which is why a scrubbed video stutters. The fix is to re-encode so every frame is a full picture. The file gets much larger, so keep clips short.

• Length: 5 to 8 seconds.
• Motion: one slow, even move in one continuous take. No cuts, no speed ramps, no shaky camera. Uneven motion feels like lag once it is tied to scroll.
• Size: 1280 pixels on the long side is plenty for a background.
• A poster image: the first frame as a JPEG, shown while the video loads and on phones that save data.

You do not have to run the command yourself. Put the clip in your project folder as clip.mp4 and tell Claude Code:

Prepare clip.mp4 for scrubbing. With ffmpeg, scale it to 1280 px on the
long side, strip the audio, and encode H.264 with every frame as a keyframe
(-g 1), yuv420p and +faststart, into clip-scrub.mp4. Export the first frame
as poster.jpg. Tell me the file size before and after. If it is over 8 MB,
lower the quality until it is under and tell me what you changed.

1. The cursor reveal

Two portraits sit on top of each other: you as you are, and an alternate you in chrome, porcelain or ink. As the cursor moves over the page it wipes a soft hole through the top image and the other version shows underneath. It is two flat images and a mask, and it is the easiest of the five.

Everything depends on alignment. If the eyes and jaw sit in different places in each image, the reveal looks broken. The reliable way is to generate the second portrait from the first instead of from scratch. In Higgsfield, make a clean studio portrait with your reference photos, then use that image as the input for the second one:

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. Plain dark gray background,
identical to the input.

Save them as front.jpg and back.jpg, then ask Claude Code:

Build a single index.html portfolio hero with front.jpg over back.jpg,
same size, object-fit cover, perfectly aligned. Draw front.jpg on a canvas
and use the pointer to erase a soft circular hole in it (radial gradient
brush, about 180 px) so back.jpg shows through. The hole trails the cursor
and slowly heals over two seconds, so the page returns to normal when the
visitor stops. On touch, dragging a finger does the same. With
prefers-reduced-motion, skip the effect and show front.jpg with a button
that swaps to back.jpg. Put my name and one line about my work over the
image. Serve it locally and give me the URL.

2. A scroll scrubbed transformation

One clip, one transformation, played by the scroll bar. Scroll down and it moves forward, scroll up and it rewinds. The clip can be anything that changes smoothly from start to end: a pencil sketch of your desk that fills in with color, a plant that grows, a logo that draws itself line by line.

Generate it in Higgsfield with Seedance. Describe the start state, the end state and the pace in plain words:

A loose pencil sketch of a designer's desk on white paper: laptop, lamp,
coffee cup, a notebook. Watercolor slowly spreads across the drawing
until every object is fully painted in soft, warm colors. Static camera,
one continuous take, even pace from start to finish, no cuts.

Prepare it for scrubbing as above, then:

Build a single index.html. A section 400vh tall contains a sticky wrapper
(position: sticky, top 0, height 100svh) with clip-scrub.mp4 filling it,
muted, playsinline, preload auto, poster.jpg. Keep the video paused. Map
scroll progress through the section, 0 to 1, onto the video's duration.
In one requestAnimationFrame loop, ease currentTime toward that target
instead of setting it inside the scroll event, and wait for
loadedmetadata before doing any math with duration. My name fades in over
the last 20 percent. With prefers-reduced-motion, show the last frame as
a still image instead. Serve it locally and give me the URL.

If the scrub feels sluggish, ask Claude to reduce the easing. If it feels jittery, the clip probably still has sparse keyframes or uneven motion.

3. The hand controlled portrait

The visitor turns on their webcam, closes a fist, and your portrait crumples like paper. They open their hand and it flattens out again. The video is the same kind of scrubbed clip. Only the input changes: instead of scroll, how open a hand is drives the timeline.

Make a still first: a papercraft or folded paper portrait of you on a black background, using your reference photos. Then give that still to Seedance as the first frame and prompt the change: the whole paper sculpture slowly crushes inward into a tight ball, one continuous take, static camera.

The tracking is the part to get right, and I wrote a full guide on it: build hand controlled visuals in the browser. Build the signal layer from that guide first, then add:

Use the openness signal (0 closed, 1 open) to drive clip-scrub.mp4:
openness 1 shows the first frame (flat portrait), 0 shows the last frame
(crumpled ball). Ease currentTime toward the target in the render loop.
Before the camera starts, show poster.jpg with a Start button that says
the camera stays on this device. Without a camera, the mouse wheel
controls openness.

4. The cinematic scroll hero

The same mechanism as build two, with a different kind of clip. Instead of a transformation you want camera movement: a slow push toward your portrait, an orbit around a product you made, a scene that dissolves into particles. Because the camera moves through space, the page feels three dimensional even though it is a flat video.

For Seedance, upload a start frame so you control the composition, and ask for exactly one camera move: "slow dolly in toward the subject, one continuous take, soft studio light, no cuts". Keep the subject near the center so the video still works when a phone crops the sides.

Use the build prompt from section two, and add text blocks that appear at set points of the scroll, for example your role at 30 percent and your selected work at 70 percent. If you want more than a single video, like pinned chapters or real 3D, the scroll effects guide covers GSAP, Lenis and three.js.

5. The layered depth hero

No video at all. Your hero splits into layers as you scroll: background, headline, a cut out photo of you, a subline and a button. Each moves at a different speed, so they drift apart like sheets of paper lifting off a table. It loads fast, works well on phones, and uses your real photo.

Remove the background from a good photo of yourself (Higgsfield has a background remover, and there are many free ones) and save it as me.png. Then:

Build a single index.html hero made of five stacked layers, back to front:
a full bleed background, a large headline, me.png (transparent cut out),
a short subline and a button. As the page scrolls through the hero, move
each layer up with transform: translate3d at a different rate: background
slowest, button fastest. Give me.png a soft, wide shadow so it seems to
float above the headline. Drive it from one requestAnimationFrame loop that
reads scrollY, add will-change: transform to the moving layers, and clamp
the movement so nothing leaves the screen. With prefers-reduced-motion,
show the layers stacked and still. Make it responsive, then serve it
locally and give me the URL.

If the depth feels weak, ask for a bigger speed gap between the slowest and fastest layer, or a slight blur on the background so it reads as further away.

Before you put it online

The difference between a site that impresses and one that annoys is almost all in the details, so ask Claude Code for a final pass:

Review this page before I publish it. Check: the first screen shows real
content within 2.5 seconds on a throttled mobile connection, with the
poster standing in for the video; total video weight; that
prefers-reduced-motion gives a calm, complete page; that all text is real
HTML a search engine and a screen reader can read; that it works on a
phone in portrait. Fix what fails and list what you changed.

Then open it on your own phone. Scroll it with your thumb, slowly and fast. A site that reacts to people has to feel good in a real hand, and that is the one test Claude cannot run for you.

To publish, any static host works. Cloudflare Pages and Netlify both let you upload the folder and give you a link in a minute.

Start with one build, ideally the cursor reveal, and get it right. After that, the other four are variations on the same number.