---
name: website
description: |
  Cinematic website builder. Analyzes any business website, extracts brand intelligence, generates a premium scroll-driven Next.js site with GSAP animations, and deploys live to Vercel — four phases, fully agent-driven.

  Trigger when user says:
  - "build a website for [url or business]"
  - "create a site for [business name]"
  - "analyze this site and rebuild it"
  - "generate a cinematic website"
  - "redesign this business website"
  - "make a landing page for [url]"
  - "clone and improve [url]"
  - "build me a premium site like [url]"
allowed-tools:
  - Bash(firecrawl *)
  - Bash(npx *)
  - Bash(npm *)
  - Bash(vercel *)
  - Write
  - Edit
  - Read
  - Glob
---

# Cinematic Website Builder

A 4-phase agent pipeline: **Extract → Animate → Build → Deploy**

---

## Overview

```
Phase 1: Business Intelligence   → firecrawl scrape + agent extraction → brand.json
Phase 2: Cinematic Hero          → GSAP + ScrollTrigger hero component
Phase 3: Premium Full Site       → Next.js App Router, shadcn/ui, all sections
Phase 4: Deploy                  → vercel --prod → live URL
```

Before starting, ask the user for the target URL if not provided.

---

## Phase 1 — Business Intelligence Extraction

Read [phases/01-extract.md](phases/01-extract.md) for full extraction protocol.

**Quick summary:**
```bash
firecrawl scrape "<url>" -o .firecrawl/homepage.md
firecrawl crawl "<url>" --limit 10 -o .firecrawl/sitemap.json
firecrawl agent "<url>" "Extract: business name, tagline, services list, brand colors as hex codes, brand tone (formal/casual/bold/playful), hero headline, primary CTA text, target audience description" -o .firecrawl/brand.json
```

Output a `brand.json` with this shape before proceeding:
```ts
{
  name: string,
  tagline: string,
  services: string[],
  colors: { primary: string, secondary: string, accent: string, bg: string },
  tone: "formal" | "casual" | "bold" | "playful",
  heroHeadline: string,
  ctaText: string,
  audience: string
}
```

---

## Phase 2 — Cinematic Hero Animation

Read [phases/02-hero.md](phases/02-hero.md) for full animation spec.

**Core pattern:**
- Framework: Next.js 15+ App Router, TypeScript, Tailwind
- Animation: GSAP `useGSAP` hook + ScrollTrigger
- Install: `npm install gsap @gsap/react lenis`
- Template: [templates/hero.tsx](templates/hero.tsx)

**Animation sequence (non-negotiable):**
1. Hero headline → word-by-word stagger reveal (`y: 60→0`, `opacity: 0→1`, `stagger: 0.08`, `ease: "power4.out"`)
2. Subheadline → fade-up `delay: 0.4`
3. CTA button → magnetic hover with spring physics
4. Background image → slow ken-burns (`scale: 1→1.06`, `duration: 8`, `repeat: -1`, `yoyo: true`)
5. ScrollTrigger → pin hero 100vh, scrub `0.5` on exit

---

## Phase 3 — Full Premium Site

Read [phases/03-sections.md](phases/03-sections.md) for all section specs.

**Site structure:**
```
app/
  layout.tsx        ← Geist font, CSS variables from brand.json
  page.tsx          ← assembles all sections
  components/
    HeroSection.tsx       ← Phase 2 output
    ServicesSection.tsx   ← 2-col zig-zag bento
    AboutSection.tsx      ← editorial split with parallax
    TestimonialsSection.tsx ← infinite marquee
    ContactSection.tsx    ← form with validation
    FooterSection.tsx     ← legal links
    Nav.tsx               ← floating glass pill nav
```

**Design constraints (mandatory):**
- Font: `Geist` or `Outfit` — never `Inter`
- Full-height: `min-h-[100dvh]` — never `h-screen`
- Hero layout: asymmetric split — never centered
- Grids: 2-col zig-zag or bento — never 3 equal columns
- Easing: `cubic-bezier(0.32, 0.72, 0, 1)` or spring — never `linear`/`ease-in-out`
- Black: Off-Black `#18181B` (Zinc-950) — never `#000000`
- Animations: `transform` + `opacity` only — never layout properties
- Scroll reveals: `IntersectionObserver` — never `window.addEventListener('scroll')`
- `backdrop-blur`: only on fixed/sticky elements (nav, overlays)

---

## Phase 4 — Deploy

Read [phases/04-deploy.md](phases/04-deploy.md) for full deploy checklist.

```bash
# Deploy preview
vercel

# Promote to production
vercel --prod
```

Output the live URL to the user at the end.

---

## Design Anti-Patterns (Banned)

These patterns fail the quality check — never generate them:

- `Inter` font anywhere
- Pure `#000000` — use `#18181B`
- `h-screen` — use `min-h-[100dvh]`
- Centered hero (`text-center` in hero)
- 3-column equal card grid for features
- `linear` or `ease-in-out` transitions
- Neon/outer glow shadows
- Emojis in any UI text
- Generic names: "John Doe", "Acme Corp"
- Round numbers: `99.99%`, `50%`
- AI copy clichés: "Elevate", "Seamless", "Unleash", "Next-Gen"
- `window.addEventListener('scroll')` for animations
- `top`/`left`/`width`/`height` animated properties
- `backdrop-blur` on scrolling containers