Build a premium site with AI.

# Build a Premium Scroll-Animated Website With AI
# From jameshester.ai - free to use and share. This is the working file behind my own site.
# HOW TO USE THIS FILE: give it to Claude (Claude Code works best) and say
# "build me a site using this system", plus who the site is for.

You are building a premium single-brand website with scroll animation. Follow this
system. It came from many real iterations; the rules below are what survived.

## First 5 minutes (do this before anything else)
Ask the owner these, one at a time, then build version 1 straight away:
1. What do you sell, and where?
2. Who is it for?
3. The ONE thing a visitor should do (call, book, buy, sign up)?
4. Your real phone number, booking link or email for that action.
5. Do you have photos? (If not, build without them: strong type and a layered
   background, and say where a real photo would go.)
Never invent a fact. Anything missing goes on the page as a visible [PLACEHOLDER: ...]
and gets listed for the owner before they publish.
For a small local business, keep the motion light: one entrance effect, no pinning.

## Preview loop
Open the page in a browser at 1440 and 390 pixels wide. Check there is no sideways
scroll and nothing is cut off, then show the owner and ask which ONE part to change.

## Process rules (these matter more than the design rules)
1. The owner specs by REACTING, not describing. Build fast, show a real page in the
   browser, iterate. Never ask them to imagine a design from words.
2. Offer 2 to 4 options at a time, never ten.
3. Delete rejected versions immediately. Keep one notes file of learnings instead.
4. Words first, design second. Lock the copy voice before polishing pixels.
5. Ship at "professional, premium, somewhat basic". Restraint reads expensive;
   over-decoration reads cheap.

## Design system
- One display font with real character plus one clean body font (Google Fonts).
- One accent colour used consistently. Background is never one flat colour: layer a
  faint grid or texture, subtle particles, or one strong hero image that fades into
  the page colour.
- A floating pill navigation bar, translucent with backdrop blur, centred.
- Hero: fully visible in the first viewport, big type, settles in fast on load.
- Slim custom scrollbar (6px, rounded, translucent).

## Scroll animation (the part everyone gets wrong)
- The page must scroll NORMALLY. Never trap the user in a fixed-viewport slideshow.
- Vary each section's entrance: emerge from centre, sweep from alternating sides,
  fold in like a page, zoom out from large, rise like a billboard. Never let every
  section slide up from the bottom.
- Keep any pinned moment short: 60 to 70 percent of one viewport of scroll, maximum.
- Stack: Lenis (lerp 0.1) plus GSAP ScrollTrigger from CDN with defer.
- Wire them: lenis.on('scroll', ScrollTrigger.update); gsap.ticker.add(t => lenis.raf(t*1000));
  gsap.ticker.lagSmoothing(0).

## Engineering rules (each one is a bug that actually happened)
- Gate ALL animation init on the window load event with a readyState check; deferred
  CDN scripts are not available when inline scripts first run.
- The page must scroll and read fully with JavaScript disabled. Never put
  overflow:hidden or a fixed height on html or body. Wrap init in try/catch and
  reveal everything on error. If sections start hidden for a scroll reveal, add a
  noscript style block that forces them visible.
- Pin CDN scripts by content, not just version: add an SRI integrity hash and
  crossorigin="anonymous" to every third-party script tag. Compute the hash from the
  real downloaded file, never from memory:
  openssl dgst -sha384 -binary file.js | openssl base64 -A   (prefix the result with "sha384-")
- Scrubbed fromTo tweens need immediateRender set deliberately: true when the hidden
  start-state must apply on load, and never let two tweens fight over one element's
  same property (a fade-out tween capturing mid-fade-in start values makes elements
  vanish when the user scrolls back up).
- Transforms and opacity only. Respect prefers-reduced-motion with a static fallback.

## Copy rules
- Plain speech in the owner's real voice. No hype words, no manufactured life
  lessons, and never write "no hype" or "the honest version" on the page itself:
  announcing honesty reads as its opposite.
- First person for a personal brand.