Build cinematic animated frontends using the STAGE framework (5-phase). React + Vite + Tailwind + GSAP. Use when asked to build a website, landing page, frontend, or interactive experience. For full-stack apps with databases use build-app.
Build cinematic animated frontends that feel like digital instruments — every scroll intentional, every animation weighted and choreographed, every interaction purposeful. Not templates. Not static pages. Experiences.
Stack: React + Vite + Tailwind CSS + GSAP. Always. No exceptions.
When to Use
Cinematic landing pages and marketing sites
Product launch pages that need to make an impression
Animated showcases and interactive experiences
Portfolio sites where motion IS the product
Campaign micro-sites and product drops
Any frontend that should feel alive
NOT for: Full-stack apps with databases, user auth, or backend logic — use build-app (ATLAS). Also not for simple static content pages that don't need animation — this skill builds premium animated experiences, not brochure sites.
Companion use:build-app (ATLAS) can reference this skill's Gesture and Tokens phases when its frontend layer needs premium treatment.
관련 스킬
The STAGE Framework
Phase
Name
Purpose
Output
S
Scope
Brand, audience, CTA, aesthetic direction
Creative brief (user-confirmed)
T
Tokens
Design system from preset
Tailwind config + CSS custom properties
A
Architect
Section structure, component patterns, copy
Section spec with copy (user-confirmed)
G
Gesture
Motion design, animation choreography
Animation plan
E
Execute + Elevate
Build + QA
Working site passing quality gates
Every phase has a clear output. Do not skip phases. Do not start the next phase until the current one is complete.
S — Scope
Establish creative direction and constraints before touching code.
Ask the user (single AskUserQuestion call)
What is this page for? Product launch, SaaS landing, portfolio, event, campaign, other.
Who is the audience? Developers, executives, consumers, creatives — affects language density and interaction complexity.
What is the single primary CTA? Sign up, book a call, download, buy, explore.
What mood should it convey? Pick a preset or describe custom:
Organic Tech — warm, natural, human-meets-machine
Midnight Luxe — premium, dark, exclusive
Brutalist Signal — raw, bold, high-contrast
Vapor Clinic — soft, ethereal, clinical
Custom — describe the feeling
Reference sites or pages you admire? URLs, screenshots, or descriptions.
What content exists? Copy, images, logos, brand guidelines — or creating everything from scratch?
Any technical constraints? Existing site integration, hosting requirements, specific library needs.
Context loading
Read context/my-business.md and context/my-voice.md for brand context before writing any copy.
Define the complete design system before writing component code.
Load the preset
Read references/presets.md for the selected aesthetic preset. Each preset provides palette, typography, surfaces, motion character, and copy voice. If the user chose "Custom," use the closest preset as a starting point and adapt per their description.
Customize for this project
Colors — Adapt preset palette to brand colors if provided. Define semantic tokens:
Noise overlay if preset uses it (max 6% opacity, CSS pseudo-element)
Responsive tokens — How values adapt:
Typography scale reduces one step below 768px
Section padding halves below 768px
Grid columns collapse: 3 → 2 → 1
Output
Design token system as Tailwind config + CSS custom properties.
A — Architect
Define page structure, component hierarchy, and copy.
Section architecture
Required (always present):
Navigation — Sticky or fixed. Logo + minimal links + CTA button. Hamburger or minimal below 768px.
Hero — The hook. Full-viewport or near-viewport. Headline, subheadline, CTA, visual element.
Footer — Brand mark, essential links, copyright. Optional: social links.
Optional (choose what serves the page goal):
Features / Capabilities
Social proof (testimonials, logos, metrics)
Philosophy / Story
Process / How it works
Pricing
FAQ
CTA section (full-width closing CTA)
Visual showcase
Recommend 5–7 total sections. Push back on more than 7 content sections — that usually means scope creep. Combine or suggest multiple pages instead.
For each section define
Purpose — Why this section exists in the user journey
Content — Headlines, body copy, CTA text. Write real copy, never placeholder.
Component pattern — How it will be built. Reference references/component-patterns.md for creative micro-interaction options.
Visual element — What imagery or graphic supports it
Interaction intent — What motion or interaction this section will have (detailed in Gesture phase)
Image strategy
If user provides images: use them
If no images exist: describe the image needed for each placement with specific mood, subject, and composition notes. Use placeholder <div> with aspect ratio and description text. Never use random external image URLs that may break.
Cross-browser: Chrome, Firefox, Safari minimum. Test GSAP ScrollTrigger in Safari specifically (momentum scrolling quirks).
Deployment
Deployment is NOT part of this workflow. It is a separate, user-initiated action. When ready to deploy, ask the user explicitly. This keeps deployment decisions in user control.
Rules
Never use stock placeholder copy — write real copy or ask for it
Every section must earn its place in the user journey — if it doesn't convert, inform, or build trust, cut it
Mobile-first responsive design
Component-per-section architecture — no single-file 600+ line apps
GSAP context cleanup in every component (prevent memory leaks)
Never use paid GSAP plugins. Free alternatives:
Text animation: CSS clip-path reveal, manual span wrapping
Path animation: CSS stroke-dashoffset
Shape morphing: CSS clip-path transitions
Performance is non-negotiable — no heavy libraries for simple effects
Prefer CSS for simple hover/focus states. GSAP for scroll-driven and sequenced animations.
Image strategy: user-provided assets first, described placeholders second. Never random external URLs.
Copy tone must match the aesthetic preset
Noise overlay: optional, max 6% opacity, CSS pseudo-element with inline SVG filter — not an image request
Edge Cases
User has no content
Write all copy during Architect phase. Match tone to selected preset. Mark as draft for user review.
Custom preset that doesn't match any existing
Use the closest preset as base. Override specific tokens in the Tokens phase. Document what changed and why.
Page needs to integrate with an existing site
Ask for existing font stack, color palette, and CSS framework. Adapt Tokens phase to match. May need to output as a component rather than full page.
GSAP ScrollTrigger conflicts with existing scroll libraries
Check for Locomotive Scroll, Lenis, or smooth-scroll libraries. ScrollTrigger has specific proxy patterns for these — document in the build.
User requests more than 7 sections
Push back. More than 7 content sections (excluding nav/footer) means scope creep. Combine sections or suggest splitting into multiple pages.
Safari iOS scroll issues
ScrollTrigger behaves differently with iOS momentum scrolling. Use anticipatePin: 1 for pinned sections. Avoid scrub values below 0.5 on iOS.
Related Skills and Context
Full-stack applications: Use build-app for apps with databases and backend (ATLAS framework)
Brand context:context/my-business.md and context/my-voice.md for brand and tone
Design references:context/ui_patterns/ for design inspiration (if populated)