Build premium site

Build a Premium, Cinematic, Scroll-Animated Site

Build sites that make someone stop scrolling and think "how did they build this." The bar is $50,000 and up: every section moves, the opener carries one move nobody expects, and the craft holds up when a stranger scrubs the page back and forth. Generic templates fail this bar. Follow the order below, because the order is the method.

Reach for the four references as needed (progressive disclosure). Do not paste their full contents into the build unless the task needs it:

• references/motion-system.md: copy-paste-ready GSAP + ScrollTrigger + SplitText + Lenis code, the fonts gate, reduced-motion guard, static fallback, and every core recipe.
• references/signature-moves.md: the library of opener moves. Pick exactly one.
• references/workflow.md: the repeatable end-to-end process.
• references/setup-and-deploy.md: the beginner playbook for install, preview, and deploy. Point non-technical users here and to the README.

A working starter site lives in assets/starter-template/. It already carries the whole motion system for an example brand. Prefer re-branding it over building from a blank file, unless the user needs something the template cannot express.

1. Understand the brand first

Never open a code file before the brand is clear. Ask for, or confirm, these before building. Keep it to a few sharp questions, not an interrogation:

• The name, and in one sentence what they do.
• Who it is for, and what it refuses to be. Sharp exclusion makes a strong brand.
• The one feeling the site must create in the first five seconds (calm authority, raw energy, precision, warmth, awe). Everything downstream serves this feeling.
• The real assets they already have: logo or wordmark vector, product photos, product video, brand colors, brand fonts. Real footage of the actual product always beats generated footage of it.
• Where it will live and who ships it (them, a developer, a platform like Shopify).

Write this down as a short brand file before coding. assets/starter-template/BRAND-TEMPLATE.md is the structure to fill in: positioning, voice with banned words, the core headline, a three-line manifesto, exact palette, type system, wordmark, items, stats, and the chosen signature move. The headline and the copy matter more than any animation. A weak claim with great motion is still a weak site.

2. Establish the design system

Design decisions carry more weight than any single animation. Lock these before building:

• Type pairing. One display face with real presence (heavy, condensed, or high-contrast) plus one clean grotesk for body, plus a monospace for labels and section numbers. The display type IS the layout. Proven pairs: Clash Display + Satoshi, Anton + Inter, Fraunces + Satoshi. Avoid default system stacks for display.
• Palette. One background, one type color, and ONE accent used sparingly (emphasis words, indices, hover states). A tight palette reads expensive; a rainbow reads cheap. A light site with dark full-bleed media bands often hits harder than all-dark, because the dark sections become title cards.
• Space and rhythm. Generous whitespace. Number every section in mono caps (for example 01 Philosophy with a slash or middot separator). It reads editorial and expensive.

No generic templates, no stock hero layouts, no default component-library look. If it could be any brand, it is not done.

3. Choose exactly ONE signature scroll moment

Pick one move for the opener from references/signature-moves.md that fits this specific brand and feeling. One unexpected move, in the opener, executed flawlessly. Two moves compete for attention; zero moves is a brochure. Match the move to the brand: mask zoom-through for a strong wordmark, scroll-scrubbed video for a product that transforms, logo assembly for something that builds things, clip-path reveal for a mood shift, and so on. Never reuse the same opener move across different sites, so no two builds feel the same.

4. Build on the motion system

Build every section on the system in references/motion-system.md. The non-optional spine:

• GSAP 3.13 + ScrollTrigger + SplitText + Lenis from CDN.
• The fonts gate: keep content hidden until document.fonts.ready (raced against a ~2500ms timeout), then reveal and boot all motion. SplitText measured against fallback fonts breaks.
• The reduced-motion path: prefers-reduced-motion shows everything settled, with zero motion.
• The static fallback: if the libraries fail to load, flag the page static and show everything readable. Nothing is ever permanently hidden.
• fromTo (never to) inside scrubbed timelines, with invalidateOnRefresh: true.
• Staggered reveals with heavy easing (power3/power4 out for entrances, power2.inOut for scrubs). Scrub 0.8 to 1, never instant. Luxury reads as weight.

Then give every section motion drawn from the recipes: staggered SplitText line reveals, section reveal-on-scroll, parallax, count-ups, a pinned scroll-scrubbed section, scroll-scrubbed video, a velocity-reactive marquee. Nothing sits static. Animate transform, opacity, and clip-path, not layout properties, so it holds 60fps.

5. Follow the end-to-end process

Run the full process in references/workflow.md: discover the brand and the one feeling, gather or generate assets (real footage for the product, generated b-roll only for mood, then compress everything for web), pick the signature move, build section by section, QA in the browser, do a dedicated mobile pass, then deploy or hand off. Heavy building can be delegated to a build sub-agent and then reviewed against this bar.

6. Always QA in the browser

A site is not done until it has been watched moving in a real browser. Before calling anything finished, preview it (see references/setup-and-deploy.md) and check, at 1440px and at 390px, scrolling the full page down AND up several times:

• Every animation fires, lands cleanly, and reverses cleanly on up-scroll.
• Reduced-motion mode shows a complete, readable, motionless page.
• Mobile is handled: shorter pins, stacked fallbacks for horizontal galleries, no custom cursor on touch.
• No scroll trap (a pin the user cannot scroll past), and no horizontal overflow.
• No text clips, and no pop or jump at any crossfade or unpin. Type passes contrast against every frame of any video behind it, not just the first.

When something feels average, the fix is never "more animations." It is one sharper signature move executed flawlessly, plus ruthless cleanup of anything that clips, pops, or stutters.

7. Point beginners to the playbook

If the user is not technical, point them to references/setup-and-deploy.md and the plugin README for how to install, what the project folder looks like, how to preview locally (a simple local server), where to put images and video and how to keep them small, and how to deploy free on Netlify or GitHub Pages. Offer to walk them through it. The whole point is that anyone can ship this.

Non-negotiables

• Every section moves. Nothing sits static.
• Smooth heavy easing and staggered reveals everywhere.
• A fonts gate, so nothing ever flashes unstyled.
• Reduced-motion path and static fallback, always. The page must render even when motion is off or a CDN is down.
• Test every animation in a real browser before shipping.
• One signature move, in the opener, executed flawlessly, never repeated across sites.
• Make them say "how did they build this."