Build a Scroll Animation Website with AI

Usage & License

Use the prompts and downloadable templates on this page in your own personal and commercial projects. What's not allowed: reselling, repackaging, redistributing, or republishing this material — on YouTube, Gumroad, paid courses, newsletters, or anywhere else. Send people to komputermechanic.com instead. Violations get reported and taken down.

We are about to build a complete cinematic website together, and I will guide you through
it in numbered prompts, one at a time. Here is the arc so you know where we are going:
first you will verify the Higgsfield MCP connection with one cheap smoke test; then I will
place an image of the website I want inside the project's reference folder and you will
treat it as our single source of truth; then you will rebuild it exactly as a static page,
generating every visual with Higgsfield; then you will bring the hero to life with a
scroll-driven film, first as a cheap 480p draft and only after my approval in full
quality; and finally you will extend the page with the remaining sections in the same art
direction.

Standing rules for the whole project: work step by step and never run ahead of the prompt
we are on; once the website exists, take a backup BEFORE every change: create a dedicated
backups folder in the project and copy the current site files into a time-stamped
subfolder there before you modify anything, so we can always go back if something screws
up; spend credits carefully and tell me the cost before any generation; verify your own
work by looking at real screenshots before telling me anything is done; and when you
finish a step, tell me clearly what you did and what you are waiting for.

Repeat this mission back to me in your own words, list the standing rules as you
understand them, and then wait for my first numbered prompt. Do not build or generate
anything yet.

Check that the Higgsfield MCP is connected by listing the image and video models you can
use, with their parameters. Tool outputs may include account information; never repeat any
of it back in your replies. Then prove the connection with ONE smoke test: generate a
single small test image as cheaply as possible. The catalog shows no prices, so find the
cheapest model by preflighting the cost of two or three budget-looking models with
get_cost and picking the lowest, telling me the credits before you spend them. Show me the
result; if it rendered, the connection works and we move on. From then on, before any
generation, always check the exact model schema first with the model explorer and
preflight its cost. When a prompt names a specific model for a task, use exactly that
model, never a substitute. One exception: if a named image model keeps a generation stuck
in queue for more than about 10 minutes, switch to Seedream 5.0 Pro (seedream_v5_pro) and
use it for the rest of this session's image generations, telling me once that you switched
and why. The named models stay the default next session.

I have put the design of the website I want you to build inside this project, at
reference/<your-image-name>. Open that file and study it now. It is our single source of
truth from now on: whenever you build or change anything, take a screenshot of the page
with a headless browser at 1920x1080, place it side by side with the reference image, look
at both, and fix the differences before you report back to me. Never tell me something
matches without having compared the two images yourself. One rule for the whole project:
1920x1080 is ONLY the screenshot size for comparing, never the page's size. Build every
page with relative units so it fills any browser window, with no fixed pixel page width or
height and no horizontal scrolling.

Subscribe to unlock the full prompt set

You've just walked through the first 3 prompts. Drop your email below to get the rest. Orchestration, edge cases, polish, plus the dashboard template. 100% free for subscribers.