Free prompt pack

3D scroll websites in four prompts

The four prompts behind the OPAL demo, copied out in full and unedited: one still, one 15 second clip, one page, one scroll binding. Run on an image model, on Seedance 2.5 through the Higgsfield AI MCP, and on Claude Design.

Watch the video

Image model -> Seedance 2.5 (Higgsfield AI MCP) -> Claude Design -> scroll binding · Four prompts, about 8,000 characters · Last updated 2026-08-12

Watch the prompts run

Claude Design + Seedance 2.5 = 3D Scroll Websites (Higgsfield AI MCP)

Nothing is requested from YouTube until you press play. Pressing it loads the player from YouTube, which may set cookies.

Open the video on YouTube instead

How the four chain together

  1. 01 The look: one still of the model, the reference frame every later step is built on.
  2. 02 The shot: a 15 second clip in three beats of 5 seconds, animated from that still.
  3. 03 The site: the whole page in four blocks, exact copy, a pinned hero and two tunable properties.
  4. 04 The binding: the clip bound to scroll position, five seconds per screen.

The four prompts

Verbatim, typos and all: these are the prompts as they were actually run. Take them, change them, ship what they make. No attribution required.

01

The look

Paste into: Image model Produces: One still of the model. This becomes the reference frame every later step is built on.

The whole pipeline is anchored to a single image, so the flavour brief, the framing and the empty left half of the frame are all decided here. The empty half is deliberate: it is where the headline lands later.

Ultra-fashionable studio fashion shoot in a hyperpop editorial and Pinterest trend style, 16:9 horizontal, a bright creative waist-up portrait of a girl, playful fashion aesthetic. The girl is the visual embodiment of a popsicle with the flavor "Fresh Blueberry & Lavender Field Aroma." The look is built from elements inspired by the flavor: a creative trendy hairstyle with loose curls and thin blue braids, hair color inspired by the popsicle filling. Long glossy nails with deep sapphire cat eye chrome and lavender decorations. Accessories and jewelry include small blueberries and diamonds. The girl holds her hands near her face in a trendy playful pose, showing off the jewelry and nails. Her facial expression is playful, with slightly parted lips, looking to the left side . Solid-color background in light grey monotone shade. Glossy studio lighting, saturated colors, hyperpop fashion aesthetic, editorial beauty campaign, high detail, ultra detailed, 8K. She is positioned in the RIGHT half of the frame. The LEFT half of the frame is quiet and empty: wall and bare table, nothing in it. Exactly five fingers on each hand, correct anatomy. Hairstyle: loose curls with thin braids, expensive looking hair. Hair color: blue. Basic natural clothing. Nails inspired by lavender flowers. Diamond jewelry. Glossy lavender aesthetic. Create 3 different options

02

The shot

Paste into: Seedance 2.5, through the Higgsfield AI MCP Produces: A 15 second clip in three beats of 5 seconds, from the still above.

Three beats, because the hero has three caption screens. The camera crosses the frame twice, so the model swaps sides and the empty half is always on the opposite side from her. That is what leaves room for the type at every point in the scroll.

this should be a professional studio shoot based on the reference photo. make camera movement really smooth and always in movement. Add some slight detail on the model like light movement, etc.
Step1: (5 seconds) model on the right side of the frame, camera shooting from the left. Model is softly smiling, taking look into the camera and then pressing her hands to her face showing.
Step2: (5 seconds) camera moving from the left side of the model to her right side and the model become positined on the left side of the frame. She showing her nails closer to the camera, nails are in the focus. Her face is ion the background, softly out of focus. She is glad and proud to show her manicure upclose
Step3: (5 seconds) camera moves again, from the right side to the left side and model changes position in the frame because of camera movement and become positiones on the right side of the frame. She is happily smiling and pressing her hands on her face fully showing her manicure

03

The site

Paste into: Claude Design Produces: The whole OPAL page: four blocks, exact copy, the pinned hero and the two tunable properties.

The longest of the four, and the one that does the real work. It fixes the structure block by block, hands over the copy word for word, and bans the defaults a builder reaches for on its own. Note that the media slot is left as a labeled placeholder on purpose, so the clip can be dropped in afterwards without touching the layout.

ROLE
You are a principal product designer and an award winning creative developer.
Build a single page website. Follow the structure below exactly. Do not add sections, do not reorder, do not improvise the layout.

GOAL
OPAL is a custom nail studio in Austin, Texas.
The site has to prove one thing: this studio designs nails, it does not just paint them.
Desktop first. Dark, editorial, expensive. Closer to a fashion house than to a booking page.

STRUCTURE
Four blocks in this order.
NAV, fixed, hidden on load. It slides down from the top once the visitor has scrolled past the first viewport. Left: wordmark OPAL. Center: one link, Studio. Right: one button, Book. Keep the hidden nav out of the tab order, not just transparent.
HERO, one pinned stage. The stage sticks to the viewport and holds a single full bleed media slot behind everything. Three caption screens live inside this one stage and crossfade over the media as the visitor scrolls. The stage never leaves the viewport until all three have played.
Screen 1 caption block aligned LEFT
Screen 2 caption block aligned RIGHT
Screen 3 caption block aligned LEFT
Over the media, in this order from the back: a radial vignette, then a bottom up scrim so the captions stay readable. Top left of the stage, a two line label. Top right, a two line label in the accent color. Bottom right, a screen counter reading 01 / 03.
For now the media slot is a labeled placeholder. Do not generate images or video.
STUDIO, a normal scrolling section. A small eyebrow, then a very large right aligned title. Below it two columns: left is a short paragraph and two buttons, right is a definition list of two facts, each with a hairline rule above it. Behind the title, two large soft blurred color shapes drifting slowly on different loops, and two thin vertical light streaks that flicker rarely, like a bad fluorescent tube.
FOOTER. An enormous wordmark that spans the full width of the viewport, with a soft glow behind it. Under it a hairline rule, then two social links on the left and a location and year on the right.

MOTION
The hero is scroll driven, not scroll triggered. Scroll position maps directly onto the media timeline, so scrolling forward and backward moves through the shot. The whole stage stays pinned for three screen lengths of scroll and each caption fades in and out inside that range.
Give each of the three screens its own scroll distance so the pacing can be tuned in one place.
The media scales down very slightly as the visitor scrolls through the stage.
Everything below the hero scrolls normally and fades up as it enters the viewport.
The reveal animation must be applied by script only to blocks that are still below the fold, so that if the script fails the copy stays visible instead of blank.
Narrow viewports and anyone who has asked for reduced motion get a different hero: the pin is dropped entirely and the three caption screens become three normal stacked blocks over a single held frame of the media.

COPY
Use this copy exactly.
NAV: OPAL | Studio | Book
Hero label, top left: OPAL / Custom Nail Studio
Hero label, top right: Austin, Texas / Est. 2019
Screen 1 eyebrow: Nail design, drawn before it is worn
Screen 1 lede: Anyone can paint a nail.
Screen 1 headline: Want more?
Screen 1 buttons: Book a set | See the studio
Screen 2 lede: Every set leaves as a one-off.
Screen 2 headline: Unique design
Screen 3 lede: Two hours. One chair. Ten small paintings.
Screen 3 headline: Unique you
Studio eyebrow: The studio
Studio title: Get your unique experience
Studio paragraph: Send a reference and we redraw it, or sit down with nothing and we design it in front of you. Shape, length and finish are agreed before a brush is opened.
Studio buttons: Start a design | Call the studio
Fact 1: Address / 1104 East Sixth Street, Austin, Texas 78702
Fact 2: Hours / Tuesday to Saturday, 10 till 7
Footer: OPAL | Instagram | Pinterest | Austin, Texas 2026

BRAND
Background near black. Text white. One accent, a pale desaturated blue.
Headlines and the wordmark in a high contrast editorial serif with a very light weight at large sizes. Interface, labels and body in a clean geometric sans.
All small labels are uppercase, 10 to 12px, with wide letter spacing.
Display type is enormous and tightly leaded, under one line height.
The studio title carries a slow sheen that sweeps across the letterforms in the accent color and then rests.
Primary buttons are solid white with dark text and a light sweep that crosses them on hover. Secondary buttons are hairline outlined and transparent.
A very faint horizontal scanline texture sits over the entire page, fixed, non interactive.

PROPS
Expose exactly two editable properties on the document so they can be tuned without touching anything else:
accent color, with four options: a pale blue, a mid blue, a deep slate blue and a warm sand
hero pin distance, the scroll length each of the three screens gets, adjustable between roughly 80 and 260 viewport heights

RULES
No cards with drop shadows. No corner radius above 4px. No gradient that was not asked for. No stock icons. No emoji. No glassmorphism.
No section may be built as three equal columns.
Text never sits over a face. The scrim behind the captions is one directional, from the bottom, not a flat overlay.
Do not invent testimonials, reviews, awards, client logos, press mentions, statistics or team bios.
Do not add a newsletter signup, a chat widget, a cookie banner or a back to top button.
Keep exactly one media element in the hero so it can later be swapped without changing the layout.

04

The binding

Paste into: Claude Design, on the built page Produces: The clip bound to scroll position, five seconds per screen.

Short on purpose. Prompt 03 already built the pinned stage and left the media slot empty, so this one only has to say what the footage is for. Three screens times five seconds is exactly the clip from prompt 02.

I need you to make this video a per-scroll animation for the first three screens (5 second per screen).

What came out

One page: a pinned hero with the clip scrubbing under three caption screens, then a studio block and an oversized footer. It is live, so you can scroll the thing the prompts describe. What is online is that output with a production shell around it, consent and privacy and self-hosted fonts, so run the same four prompts and you will get something in the same shape, not the same file.

OPAL is a fictional nail studio. The page is a design demo, not a real salon.