Designing Animated Websites

When the user gives a topic (e.g., "make me a website for a fitness coaching business"), don't build the site yourself — produce a complete, structured build-prompt that an AI coding tool (like Claude Code, Cursor, v0, etc.) can use to generate the entire site. The output has 3 parts:

1. Site Architecture — full page list + sections per page
2. Section-by-Section Animation Spec — what animates, how, trigger, easing
3. Final Master Prompt — one long, copy-paste-ready prompt combining everything, written as if instructing a senior frontend engineer/AI

If the user explicitly asks for a chatbot, include a real-time chatbot spec. Otherwise, omit it entirely — don't mention it as optional.

Progress:

• Step 1: Clarify the topic/niche/business goal (infer if not given clearly)
• Step 2: Determine the page list required for this type of site
• Step 3: Break each page into logical sections
• Step 4: Design the Hero section animation (auto-playing, no click needed)
• Step 5: Design the scroll-driven "assembly/explode" animation sequence (object breaks into pieces on scroll down, reassembles on scroll up)
• Step 6: Define animations for every remaining section (fade/parallax/stagger/pin/etc.)
• Step 7: Decide chatbot inclusion (only if requested)
• Step 8: Pick a premium visual theme (color, typography, spacing, motion style)
• Step 9: Assemble everything into one final detailed master prompt
• Step 10: Output the master prompt in a clearly labeled block, ready to paste into an AI builder

Step 1–3: Site Architecture

Standard page set (adapt per niche):

• Home
• About
• Services/Products
• Portfolio/Case Studies (if relevant)
• Pricing (if relevant)
• Blog (if relevant)
• Contact
• (Chatbot widget — global, not a page — only if requested)

For each page, define 4–8 sections (Hero, Problem/Solution, Features, Social Proof, Process, CTA, Footer, etc.) based on what that page needs to accomplish.

Step 4: Hero Animation (auto-play, left-text/right-visual)

Always specify:

• Layout: text block left (headline, subtext, CTA button), animated visual right
• Animation runs on page load automatically, no click required
• Type: looping 3D model rotation, Lottie/SVG morph, particle field, floating gradient blobs, or WebGL scene — pick one that fits the niche
• Tech recommendation: Framer Motion / GSAP / Three.js / Spline / Lottie depending on complexity

Step 5: Scroll-Driven Assembly Sequence (signature feature)

This is the core differentiator — describe precisely:

• A pinned section (position: sticky or GSAP ScrollTrigger pin: true)
• As user scrolls down, the object's individual pieces (parts, layers, components) fly apart / explode outward with staggered timing, each tied to scroll progress (scrubbed, not autoplay)
• Once fully exploded, it transitions into a video/Lottie sequence of the object opening up further (like a Loom-style teardown), also scroll-scrubbed
• Scrolling back up reverses the entire sequence exactly (scroll-scrubbed video/animation reversal, not just replay)
• Tech recommendation: GSAP ScrollTrigger with scrub: true, or a scroll-scrubbed video (<video> element with currentTime bound to scroll progress) for the Loom-style part

Step 6: Remaining Sections

For every other section assign one animation type:

• Fade-up + stagger for feature grids
• Horizontal scroll-snap for case studies/testimonials
• Counter/number count-up for stats
• Parallax layers for storytelling sections
• Magnetic hover buttons for CTAs
• Sticky-reveal text for process/steps sections

Step 7: Chatbot (conditional)

Only include if the user explicitly asked for it. Spec:

• Persistent floating widget, bottom-right, all pages
• Real-time: reflects live content/state of the site (product changes, pricing updates, new pages) via a shared data source (CMS/JSON/API) so answers stay accurate as the site changes
• Human-like tone: conversational, context-aware, no robotic canned replies
• Tech recommendation: OpenAI/Claude API + streaming responses + a small backend reading the site's live content as context (RAG-lite over site data)

Step 8: Theme

Specify explicitly in the prompt: color palette (e.g., deep charcoal + electric accent), font pairing (display + body), spacing rhythm, motion easing style (e.g., cubic-bezier(0.16, 1, 0.3, 1) for premium "soft snap" feel). This is what makes it read as "$10k" instead of generic.

Step 9–10: Final Master Prompt

Combine all of the above into a single dense, unambiguous prompt, structured with headers per page and per section, written in imperative engineering language ("Build a Next.js site with...", "Section 2 must use GSAP ScrollTrigger to..."). Output it in a fenced code block labeled clearly so the user can copy it directly into another AI tool.