How to write a prompt for a scroll-animation website
Updated July 18, 2026
Be specific about four things and the model does the rest: the stack (Next.js + GSAP ScrollTrigger + Lenis), one clear idea the whole page serves, each section described as a scene with its exact motion, and the technical gotchas (all-intra video for scrubbing, the readyState gate). Then tell it to verify in a browser and iterate.
Vague prompts ('make a cool animated landing page') produce generic fade-ins. Prompts that read like a shot list produce cinema. Below is a real, working template prompt — Aurelia — broken down so you can copy the structure.
1. Name the stack and the constraints
Open by pinning the technology and the non-negotiables: 'Build a cinematic site with Next.js App Router + TypeScript + Tailwind v4 + GSAP (ScrollTrigger + SplitText) + Lenis smooth scroll. Put all brand, copy and media paths in one config file. Respect prefers-reduced-motion.' This removes a dozen decisions the model would otherwise guess at, and guarantees a config-driven result you can re-skin.
2. Commit to one idea, then list the scenes
State the single throughline in a sentence — for Aurelia: 'a luxury cruise where scroll IS the ship, a journey from above the clouds down to a dinner at sea.' Then describe each section as a numbered scene with its own job: hero, philosophy, destinations, suites, dining, close. The model builds far better when it can see the whole arc, not one section at a time.
3. Spell out the hard motion precisely
The parts that separate premium from generic need exact instructions. For a scroll-scrubbed hero: 'A pinned full-bleed video whose currentTime is driven by scroll — ScrollTrigger onUpdate sets a target time from progress, a gsap.ticker lerps video.currentTime toward it. Gate it with if (!duration || video.readyState < 2) return. Encode the video all-intra (ffmpeg -g 1) so seeking lands on any frame.' Naming the gotcha in the prompt is what prevents the juddering, stalling first draft.
4. A real prompt, dissected — Aurelia
The Aurelia template's free prompt follows exactly this shape: it opens with the stack and a config-driven rule, states the one idea, then walks nine scenes — a preloader that reads real video-buffer progress, the scroll-scrubbed descent, an oversized-type philosophy split, a horizontal destinations reel, stacked suite reveals, a golden-hour dining scrub, a masonry gallery, quiet testimonials, and a parallax close. It ends with a 'gotchas' list (the readyState gate, -g 1, Turbopack font caching) so the first build is the good build.
You can read and copy that entire prompt for free on the Aurelia template page, then run it with Claude Code and swap in your own footage. Every template here ships its prompt the same way — the prompt is the recipe; the paid download is the finished, tested dish.
Frequently asked
How detailed should a website prompt be?
As detailed as a shot list for the parts that matter. Name the stack, the one idea, each section's motion, and the technical gotchas (all-intra video, the readyState gate). Leave styling latitude, but never leave the hard motion vague.
Can I see a real example prompt?
Yes — every template in this studio publishes its full Claude Code build prompt for free on its page. The Aurelia and Ocean Epicure prompts are good models for scroll-scrubbed, section-by-section sites.
Why does my animated site look generic?
The prompt was probably too vague, so the model defaulted to fade-in-on-scroll. Commit to one idea and describe scroll-linked motion — pinned sections, scrubbed timelines, scrubbed video — explicitly, and the result stops looking like a template.