launchframe 0.2.2 → 0.2.4

package/template/.clinerules

@@ -27,16 +27,35 @@ When you see that with no other instructions, **start the full clone-website pip
 ## Tech Stack
 - **Framework:** Next.js 16 (App Router, React 19, TypeScript strict)
 - **UI:** shadcn/ui (Radix primitives, Tailwind CSS v4, `cn()` utility)
+- **Motion:** **Framer Motion** (`framer-motion`) — **default for non-trivial animation** (scroll reveals, staggers, layout, gestures). Use CSS `transition` / `@keyframes` only when they reproduce the target exactly without JS.
 - **Icons:** Lucide React (default — will be replaced/supplemented by extracted SVGs)
 - **Styling:** Tailwind CSS v4 with oklch design tokens
+- **Media:** Real **images & videos** from the target URL, saved under `public/images/` and `public/videos/` (see `.claude/skills/clone-website/SKILL.md` and `docs/research/INSPECTION_GUIDE.md`). Do not ship a “pretty shell” with missing raster/video unless extraction is **blocked** and documented in `docs/research/EXTRACTION_LIMITATIONS.md`.
 - **Deployment:** Vercel
 
+## Priority: images, videos & motion
+Treat these as **first-class deliverables**, not polish at the end.
+
+1. **Raster & video** — Early in recon, inventory every `<img>`, `<picture>` / `<source>`, `<video>`, poster image, and meaningful `background-image` URL. Download into `public/` and reference **local paths** in specs and components. Hero bands and marketing sections often fail visually when a single layer is skipped.
+2. **Motion** — Match the target’s feel: easing, duration, stagger, scroll triggers. Prefer **`motion` from `framer-motion`** for entrance sequences, viewport-driven animations, shared-layout-style transitions, and anything beyond a one-off CSS transition. Note in each component spec whether behavior is **CSS-only** vs **Framer Motion**.
+
 ## Commands
 - `npm run dev` — Start dev server
 - `npm run build` — Production build
 - `npm run lint` — ESLint check
 - `npm run typecheck` — TypeScript check
 - `npm run check` — Run lint + typecheck + build
+- **`npm run recon`** — **Playwright** capture: full-page screenshots, `computed-snapshot.json`, `MEDIA_MANIFEST.md` (use when Browser MCP / Chrome DevTools MCP is broken or missing)
+- **`npm run recon:headed`** — Same as `recon` but **headed** Chromium (often better for WAF / “Just a moment…” pages)
+
+**Playwright browser binaries (once per machine):** `npx playwright install chromium`
+
+## When Browser MCP is down
+Prefer **Playwright** for repeatable extraction in-repo — do **not** rely on Chrome DevTools MCP alone.
+
+1. Run **`npm run recon`** (or **`npm run recon:headed`** if headless hits a challenge page).
+2. Read **`docs/research/computed-snapshot.json`**, **`docs/research/MEDIA_MANIFEST.md`**, and **`docs/research/EXTRACTION_LIMITATIONS.md`** before writing specs.
+3. Fill **`scripts/download-assets.mjs`** from `MEDIA_MANIFEST.md` and run it to populate `public/images/` and `public/videos/`.
 
 ## Code Style
 - TypeScript strict mode, no `any`
@@ -46,6 +65,8 @@ When you see that with no other instructions, **start the full clone-website pip
 - Responsive: mobile-first
 
 ## Design Principles
+- **Images & video fidelity** — prefer real downloaded assets; preserve aspect ratio, `object-fit`, layering, and poster frames. Rebrand pass may **swap** URLs for IP-safe alternates but must keep layout identical.
+- **Motion fidelity** — timing and easing matter as much as color; use Framer Motion when CSS alone cannot match staggered or scroll-driven behavior.
 - **Pixel-perfect emulation** — match the target's spacing, colors, typography exactly
 - **No personal aesthetic changes during emulation phase** — match 1:1 first, rebrand later
 - **Real content during extraction** — use actual text and assets from the target site so the clone scaffolds against real shapes
@@ -79,83 +100,112 @@ scripts/            # Asset download scripts
 - After editing `AGENTS.md`, run `bash scripts/sync-agent-rules.sh` to regenerate platform-specific instruction files.
 - After editing `.claude/skills/clone-website/SKILL.md`, run `node scripts/sync-skills.mjs` to regenerate the skill for all platforms.
 
-# Website Inspection Guide
-
-## How to Reverse-Engineer Any Website
-
-This guide outlines what to capture when inspecting a target website via Chrome MCP or browser DevTools.
-
-## Phase 1: Visual Audit
-
-### Screenshots to Capture
-- [ ] Every distinct page — desktop, tablet, mobile
-- [ ] Dark mode variants (if applicable)
-- [ ] Light mode variants (if applicable)
-- [ ] Key interaction states (hover, active, open menus, modals)
-- [ ] Loading/skeleton states
-- [ ] Empty states
-- [ ] Error states
-
-### Design Tokens to Extract
-- [ ] **Colors** — background, text (primary/secondary/muted), accent, border, hover, error, success, warning
-- [ ] **Typography** — font family, sizes (h1-h6, body, caption, label), weights, line heights, letter spacing
-- [ ] **Spacing** — padding/margin patterns (look for a scale: 4px, 8px, 12px, 16px, 24px, 32px, etc.)
-- [ ] **Border radius** — buttons, cards, avatars, inputs
-- [ ] **Shadows/elevation** — card shadows, dropdown shadows, modal overlay
-- [ ] **Breakpoints** — when does the layout shift? (inspect with DevTools responsive mode)
-- [ ] **Icons** — which icon library? custom SVGs? sizes?
-- [ ] **Avatars** — sizes, shapes, fallback behavior
-- [ ] **Buttons** — all variants (primary, secondary, ghost, icon-only, danger)
-- [ ] **Inputs** — text fields, textareas, selects, checkboxes, toggles
-
-## Phase 2: Component Inventory
-
-For each distinct UI component, document:
-1. **Name** — what would you call this component?
-2. **Structure** — what HTML elements / child components does it contain?
-3. **Variants** — does it have different sizes, colors, or states?
-4. **States** — default, hover, active, disabled, loading, error, empty
-5. **Responsive behavior** — how does it change at different breakpoints?
-6. **Interactions** — click, hover, focus, keyboard navigation
-7. **Animations** — transitions, entrance/exit animations, micro-interactions
-
-### Common Components to Look For
-- Navigation (top bar, sidebar, bottom bar)
-- Cards / list items
-- Buttons and links
-- Forms and inputs
-- Modals and dialogs
-- Dropdowns and menus
-- Tabs and segmented controls
-- Avatars and user badges
-- Loading skeletons
-- Toast notifications
-- Tooltips and popovers
-
-## Phase 3: Layout Architecture
-
-- [ ] **Grid system** — CSS Grid? Flexbox? Fixed widths?
-- [ ] **Column layout** — how many columns at each breakpoint?
-- [ ] **Max-width** — main content area max-width
-- [ ] **Sticky elements** — header, sidebar, floating buttons
-- [ ] **Z-index layers** — navigation, modals, tooltips, overlays
-- [ ] **Scroll behavior** — infinite scroll, pagination, virtual scrolling
-
-## Phase 4: Technical Stack Analysis
-
-- [ ] **Framework** — React? Vue? Angular? Check `__NEXT_DATA__`, `__NUXT__`, `ng-version`
-- [ ] **CSS approach** — Tailwind (utility classes), CSS Modules, Styled Components, Emotion, vanilla CSS
-- [ ] **State management** — Redux (check DevTools), React Query, Zustand, Pinia
-- [ ] **API patterns** — REST, GraphQL (check network tab for `/graphql` requests)
-- [ ] **Font loading** — Google Fonts, self-hosted, system fonts
-- [ ] **Image strategy** — CDN, lazy loading, srcset, WebP/AVIF
-- [ ] **Animation library** — Framer Motion, GSAP, CSS transitions only
-
-## Phase 5: Documentation Output
-
-After inspection, create these files in `docs/research/`:
-1. `DESIGN_TOKENS.md` — All extracted colors, typography, spacing
-2. `COMPONENT_INVENTORY.md` — Every component with structure notes
-3. `LAYOUT_ARCHITECTURE.md` — Page layouts, grid system, responsive behavior
-4. `INTERACTION_PATTERNS.md` — Animations, transitions, hover states
-5. `TECH_STACK_ANALYSIS.md` — What the site uses and our chosen equivalents
+# Website Inspection Guide
+
+## Priority (read first): media & motion
+
+Launchframe clones live pages for a **visual** result. Two things most often separate a convincing build from a hollow one:
+
+### 1. Images & video (do this before obsessing over utility classes)
+
+- [ ] **Every `<img>`** — `src` / `srcset` / `currentSrc`, `sizes`, `loading`, `decoding`, `alt`, intrinsic dimensions
+- [ ] **`<picture>` / `<source>`** — resolution switches, art direction, `type` (WebP/AVIF)
+- [ ] **Every `<video>`** — `src` + nested `<source>`, **poster**, `autoplay`, `loop`, `muted`, `playsinline`, `controls`
+- [ ] **Background images** — `background-image` on ancestors (hero stacks are often **layers** of img + gradient + PNG mockup)
+- [ ] **Lazy / below-fold** — scroll the page once before asset discovery so `data-src` / lazy-loaded URLs resolve if the site uses them
+- [ ] **Download** — mirror into `public/images/` and `public/videos/` with stable paths; list failures in `docs/research/EXTRACTION_LIMITATIONS.md`
+
+If automation hits a bot wall, **do not pretend extraction succeeded** — capture what you can from successful fetches and document gaps.
+
+### 2. Motion (prefer Framer Motion in this repo)
+
+- [ ] **Entrance** — fade/slide/scale on mount or on **scroll into view** (note threshold / `margin`)
+- [ ] **Stagger** — children animating in sequence (hero bullets, card grids)
+- [ ] **Scroll-linked** — progress, parallax, pinned sections (may combine with CSS `animation-timeline` or libs)
+- [ ] **Gestures** — drag, pan, hover follow (often Framer Motion)
+- [ ] **Implementation rule** — use **`framer-motion`** for anything beyond trivial single-property CSS `transition`. Record **duration, easing, delay, stagger**, and **trigger** (scroll, hover, tap) in specs.
+
+---
+
+## How to Reverse-Engineer Any Website
+
+This guide outlines what to capture when inspecting a target website via Chrome MCP or browser DevTools.
+
+## Phase 1: Visual Audit
+
+### Screenshots to Capture
+- [ ] Every distinct page — desktop, tablet, mobile
+- [ ] Dark mode variants (if applicable)
+- [ ] Light mode variants (if applicable)
+- [ ] Key interaction states (hover, active, open menus, modals)
+- [ ] Loading/skeleton states
+- [ ] Empty states
+- [ ] Error states
+- [ ] **Video frames** — capture a frame mid-play for reference if motion is subtle
+- [ ] **Hero / full-bleed** — wide crops where raster layers are easy to miss
+
+### Design Tokens to Extract
+- [ ] **Colors** — background, text (primary/secondary/muted), accent, border, hover, error, success, warning
+- [ ] **Typography** — font family, sizes (h1-h6, body, caption, label), weights, line heights, letter spacing
+- [ ] **Spacing** — padding/margin patterns (look for a scale: 4px, 8px, 12px, 16px, 24px, 32px, etc.)
+- [ ] **Border radius** — buttons, cards, avatars, inputs
+- [ ] **Shadows/elevation** — card shadows, dropdown shadows, modal overlay
+- [ ] **Breakpoints** — when does the layout shift? (inspect with DevTools responsive mode)
+- [ ] **Icons** — which icon library? custom SVGs? sizes?
+- [ ] **Avatars** — sizes, shapes, fallback behavior
+- [ ] **Buttons** — all variants (primary, secondary, ghost, icon-only, danger)
+- [ ] **Inputs** — text fields, textareas, selects, checkboxes, toggles
+
+## Phase 2: Component Inventory
+
+For each distinct UI component, document:
+1. **Name** — what would you call this component?
+2. **Structure** — what HTML elements / child components does it contain?
+3. **Variants** — does it have different sizes, colors, or states?
+4. **States** — default, hover, active, disabled, loading, error, empty
+5. **Responsive behavior** — how does it change at different breakpoints?
+6. **Interactions** — click, hover, focus, keyboard navigation
+7. **Animations** — transitions, entrance/exit, micro-interactions — **`framer-motion` vs CSS** and exact timing
+
+### Common Components to Look For
+- Navigation (top bar, sidebar, bottom bar)
+- Cards / list items
+- Buttons and links
+- Forms and inputs
+- Modals and dialogs
+- Dropdowns and menus
+- Tabs and segmented controls
+- Avatars and user badges
+- Loading skeletons
+- Toast notifications
+- Tooltips and popovers
+- **Video / Lottie / canvas** blocks (do not substitute with static mockups without documenting why)
+
+## Phase 3: Layout Architecture
+
+- [ ] **Grid system** — CSS Grid? Flexbox? Fixed widths?
+- [ ] **Column layout** — how many columns at each breakpoint?
+- [ ] **Max-width** — main content area max-width
+- [ ] **Sticky elements** — header, sidebar, floating buttons
+- [ ] **Z-index layers** — navigation, modals, tooltips, overlays
+- [ ] **Scroll behavior** — infinite scroll, pagination, virtual scrolling
+
+## Phase 4: Technical Stack Analysis
+
+- [ ] **Framework** — React? Vue? Angular? Check `__NEXT_DATA__`, `__NUXT__`, `ng-version`
+- [ ] **CSS approach** — Tailwind (utility classes), CSS Modules, Styled Components, Emotion, vanilla CSS
+- [ ] **State management** — Redux (check DevTools), React Query, Zustand, Pinia
+- [ ] **API patterns** — REST, GraphQL (check network tab for `/graphql` requests)
+- [ ] **Font loading** — Google Fonts, self-hosted, system fonts
+- [ ] **Image strategy** — CDN, lazy loading, srcset, WebP/AVIF — **mirror URLs you are allowed to fetch**
+- [ ] **Animation library** — site may use GSAP, Lottie, Rive, or CSS only — **in the Next.js clone, default to Framer Motion** unless a different lib is required for parity
+
+## Phase 5: Documentation Output
+
+After inspection, create these files in `docs/research/`:
+1. `DESIGN_TOKENS.md` — All extracted colors, typography, spacing
+2. `COMPONENT_INVENTORY.md` — Every component with structure notes
+3. **`MEDIA_MANIFEST.md`** — (recommended) Table of every image/video/poster URL → local `public/` path or “blocked”
+4. `LAYOUT_ARCHITECTURE.md` — Page layouts, grid system, responsive behavior
+5. `INTERACTION_PATTERNS.md` — Animations: **CSS vs Framer Motion**, transitions, hover states
+6. `TECH_STACK_ANALYSIS.md` — What the site uses and our chosen equivalents (Framer Motion for React animation)

package/template/.codex/skills/clone-website/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: clone-website
-description: Reverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", "pixel-perfect clone", "launch a SaaS based on", "build me a clone of", and Launchframe shorthands **Build it**, **Go**, **Ship it**, **Clone the site** (read `launchframe.config.json` only — no URL in chat). This project was scaffolded by Launchframe — read `launchframe.config.json` for the target URL and the user's SaaS-idea rebranding directive before running. URLs can also be passed inline.
+description: Reverse-engineer and clone one or more websites in one shot — **prioritizes real images/videos** (download to public/) and **motion via Framer Motion** for non-trivial animation. Extracts assets, CSS, and content section-by-section and dispatches parallel builder agents in worktrees. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", "pixel-perfect clone", "launch a SaaS based on", "build me a clone of", and Launchframe shorthands **Build it**, **Go**, **Ship it**, **Clone the site** (read `launchframe.config.json` only — no URL in chat). This project was scaffolded by Launchframe — read `launchframe.config.json` for the target URL and the user's SaaS-idea rebranding directive before running. URLs can also be passed inline.
 argument-hint: "[<url1> <url2> ...]  (optional — defaults to launchframe.config.json)"
 user-invocable: true
 ---
@@ -39,16 +39,22 @@ If the user provides additional instructions (specific fidelity level, deeper cu
 ## Pre-Flight
 
 1. **Read `launchframe.config.json`** (see Step 0 above). After a fresh `npx launchframe` scaffold, proceed immediately — only echo `url`/`idea` for confirmation if the config looks wrong or the user asked to verify.
-2. **Browser automation is required.** Check for available browser MCP tools (Chrome MCP, Playwright MCP, Browserbase MCP, Puppeteer MCP, etc.). Use whichever is available — if multiple exist, prefer Chrome MCP. If none are detected, ask the user which browser tool they have and how to connect it. This skill cannot work without browser automation.
+2. **Browser automation.** Prefer an MCP (Chrome DevTools MCP, Playwright MCP, Browserbase MCP, etc.) when it is healthy. **If MCP is missing or in an error state, run `npm run recon` (Playwright)** — see `scripts/recon-playwright.mjs`. It writes `docs/research/computed-snapshot.json`, `docs/research/MEDIA_MANIFEST.md`, and full-page screenshots under `docs/design-references/`. Use `npm run recon:headed` if headless hits a WAF/challenge page. One-time install: `npx playwright install chromium`. Do not skip extraction — adapt the pipeline to the tools that work.
 3. Validate the resolved URL(s). Normalize and verify each is accessible via your browser MCP tool. If any are invalid, ask the user to correct `launchframe.config.json` (or pass an override) before proceeding.
 4. Verify the base project builds: `npm run build`. The Next.js + shadcn/ui + Tailwind v4 scaffold should already be in place. If not, tell the user to run `npm install` first.
-5. Create the output directories if they don't exist: `docs/research/`, `docs/research/components/`, `docs/design-references/`, `scripts/`. For multiple clones, also prepare per-site folders like `docs/research/<hostname>/` and `docs/design-references/<hostname>/`.
+5. Create the output directories if they don't exist: `docs/research/`, `docs/research/components/`, `docs/design-references/`, `scripts/`. Plan `docs/research/MEDIA_MANIFEST.md` as soon as media is inventoried. For multiple clones, also prepare per-site folders like `docs/research/<hostname>/` and `docs/design-references/<hostname>/`.
 6. When working with multiple sites in one command, optionally confirm whether to run them in parallel (recommended, if resources allow) or sequentially to avoid overload.
 
 ## Guiding Principles
 
 These are the truths that separate a successful clone from a "close enough" mess. Internalize them — they should inform every decision you make.
 
+### 0. Launchframe priorities: media & motion (do not defer)
+
+**Raster & video are first-class.** Before you treat the page as “mostly typography,” run a dedicated **media inventory** (see `@docs/research/INSPECTION_GUIDE.md` Priority section): every `<img>`, `<picture>` / `<source>`, `<video>` (+ poster), and non-trivial `background-image`. Download to `public/images/` and `public/videos/` and write `docs/research/MEDIA_MANIFEST.md` (URL → local path, or `BLOCKED` + reason). Component specs MUST list concrete `public/...` paths; if you use a placeholder, say why in `docs/research/EXTRACTION_LIMITATIONS.md`. Never silently drop a hero layer, reel, or og visual.
+
+**Motion defaults to Framer Motion.** This template lists `framer-motion` as a dependency. After foundation tokens, ensure `import { motion } from "framer-motion"` (and related APIs: `useScroll`, `useTransform`, `AnimatePresence`, `LayoutGroup`) for: scroll-triggered reveals, staggered children, layout transitions, and gestures — anything beyond a trivial one-property CSS `transition`. In each spec file, add a **Motion** subsection: trigger, duration, easing, delay/stagger, and **implementation: CSS | framer-motion**. Prefer CSS only when it matches the target exactly without JS.
+
 ### 1. Completeness Beats Speed
 
 Every builder agent must receive **everything** it needs to do its job perfectly: screenshot, exact CSS values, downloaded assets with local paths, real text content, component structure. If a builder has to guess anything — a color, a font size, a padding value — you have failed at extraction. Take the extra minute to extract one more property rather than shipping an incomplete brief.
@@ -193,11 +199,12 @@ Save this as `docs/research/PAGE_TOPOLOGY.md` — it becomes your assembly bluep
 This is sequential. Do it yourself (not delegated to an agent) since it touches many files:
 
 1. **Update fonts** in `layout.tsx` to match the target site's actual fonts
-2. **Update globals.css** with the target's color tokens, spacing values, keyframe animations, utility classes, and any **global scroll behaviors** (Lenis, smooth scroll CSS, scroll-snap on body)
-3. **Create TypeScript interfaces** in `src/types/` for the content structures you've observed
-4. **Extract SVG icons** — find all inline `<svg>` elements on the page, deduplicate them, and save as named React components in `src/components/icons.tsx`. Name them by visual function (e.g., `SearchIcon`, `ArrowRightIcon`, `LogoIcon`).
-5. **Download global assets** — write and run a Node.js script (`scripts/download-assets.mjs`) that downloads all images, videos, and other binary assets from the page to `public/`. Preserve meaningful directory structure.
-6. Verify: `npm run build` passes
+2. **Confirm Framer Motion** — `framer-motion` should already be in `package.json`. If missing, add it (`npm install framer-motion`) so builders can import `motion` without ad-hoc library drift.
+3. **Update globals.css** with the target's color tokens, spacing values, keyframe animations, utility classes, and any **global scroll behaviors** (Lenis, smooth scroll CSS, scroll-snap on body)
+4. **Media inventory + download (early, high priority)** — run the asset discovery script (below) via browser MCP, write `docs/research/MEDIA_MANIFEST.md`, then implement **`scripts/download-assets.mjs`** and execute it so **images** land in `public/images/` and **videos** (+ posters) in `public/videos/` (or a clear subdirectory scheme under `public/`). Batch parallel downloads (4 concurrent) with errors logged — do not claim success if URLs failed. This step should complete **before** most section components are built so builders use real paths.
+5. **Create TypeScript interfaces** in `src/types/` for the content structures you've observed
+6. **Extract SVG icons** — find all inline `<svg>` elements on the page, deduplicate them, and save as named React components in `src/components/icons.tsx`. Name them by visual function (e.g., `SearchIcon`, `ArrowRightIcon`, `LogoIcon`).
+7. Verify: `npm run build` passes
 
 ### Asset Discovery Script Pattern
 
@@ -354,11 +361,16 @@ For each section (or sub-component, if you're breaking it up), create a spec fil
 - **State A (before):** maxWidth: 100vw, boxShadow: none, borderRadius: 0
 - **State B (after):** maxWidth: 1200px, boxShadow: 0 4px 20px rgba(0,0,0,0.1), borderRadius: 16px
 - **Transition:** transition: all 0.3s ease
-- **Implementation approach:** <CSS transition + scroll listener | IntersectionObserver | CSS animation-timeline | etc.>
+- **Implementation approach:** <CSS transition + scroll listener | IntersectionObserver | CSS animation-timeline | **framer-motion** (`motion`, `whileInView`, stagger container) | etc.>
 
 ### Hover states
 - **<Element>:** <property>: <before> → <after>, transition: <value>
 
+## Motion (Framer Motion vs CSS)
+- **Entrance / scroll reveals:** <e.g. fade+translateY, staggerChildren — specify duration, easing, delay, viewport `once`/`margin`>
+- **Library:** <`framer-motion` | CSS-only — justify if CSS-only>
+- **Keyframes / springs:** <if any — match target curve>
+
 ## Per-State Content (if applicable)
 
 ### State: "Featured"
@@ -370,9 +382,10 @@ For each section (or sub-component, if you're breaking it up), create a spec fil
 - Title: "..."
 - Cards: [...]
 
-## Assets
-- Background image: `public/images/<file>.webp`
-- Overlay image: `public/images/<file>.png`
+## Assets (images & video — required detail)
+- Raster: `public/images/<file>` — dimensions, `object-fit`, lazy if below fold
+- Video: `public/videos/<file>` — poster `public/images/...` or `public/videos/...`, autoplay/muted/loop, controls
+- Background layers: which div uses `background-image` and resolved URL → local path
 - Icons used: <ArrowIcon>, <SearchIcon> from icons.tsx
 
 ## Text Content (verbatim)
@@ -446,7 +459,7 @@ For every section, replace:
 7. **Metadata** — update `<title>`, meta description, OG tags, and favicon manifest in `src/app/layout.tsx` to reflect the new SaaS. Generate a simple favicon (initial letter on a brand-colored square) if no asset is provided.
 
 What you must NOT change in this pass:
-- Spacing, padding, typography scale, color tokens, animations, responsive breakpoints — those are still 1:1 to the original
+- Spacing, padding, typography scale, color tokens, **animation timing & motion choreography** (including Framer Motion `variants` / `transition` props), responsive breakpoints — those are still 1:1 to the original
 - Section order, section count, component structure
 - Interaction models (scroll-driven stays scroll-driven, etc.)
 - Any computed-style value extracted in Phase 3
@@ -480,6 +493,8 @@ Before dispatching ANY builder agent, verify you can check every box. If you can
 - [ ] For scroll-driven components: trigger threshold, before/after styles, and transition are recorded
 - [ ] For hover states: before/after values and transition timing are recorded
 - [ ] All images in the section are identified (including overlays and layered compositions)
+- [ ] Any `<video>` (and poster), Lottie, or canvas-driven hero is identified — not approximated as a static div
+- [ ] **Motion** subsection filled: CSS vs **framer-motion**, durations, easings, stagger, scroll triggers
 - [ ] Responsive behavior is documented for at least desktop and mobile
 - [ ] Text content is verbatim from the site, not paraphrased
 - [ ] The builder prompt is under ~150 lines of spec; if over, the section needs to be split
@@ -496,6 +511,8 @@ These are lessons from previous failed clones — each one cost hours of rework:
 - **Don't build everything in one monolithic commit.** The whole point of this pipeline is incremental progress with verified builds at each step.
 - **Don't reference docs from builder prompts.** Each builder gets the CSS spec inline in its prompt — never "see DESIGN_TOKENS.md for colors." The builder should have zero need to read external docs.
 - **Don't skip asset extraction.** Without real images, videos, and fonts, the clone will always look fake regardless of how perfect the CSS is.
+- **Don't defer image/video download to the end.** Run `MEDIA_MANIFEST.md` + `download-assets.mjs` during foundation so components reference real `public/` paths from the first build.
+- **Don't fake complex motion with a single CSS `transition` when the target uses staggered, scroll-scrubbed, or layout-driven animation** — use **`framer-motion`** (`motion`, `whileInView`, `variants`, `staggerChildren`) and match duration/easing from extraction.
 - **Don't give a builder agent too much scope.** If you're writing a builder prompt and it's getting long because the section is complex, that's a signal to break it into smaller tasks.
 - **Don't bundle unrelated sections into one agent.** A CTA section and a footer are different components with different designs — don't hand them both to one agent and hope for the best.
 - **Don't skip responsive extraction.** If you only inspect at desktop width, the clone will break at tablet and mobile. Test at 1440, 768, and 390 during extraction.
@@ -510,7 +527,7 @@ When done, report:
 - Total sections built
 - Total components created
 - Total spec files written (should match components)
-- Total assets downloaded (images, videos, SVGs, fonts)
+- Total assets downloaded (images, videos, SVGs, fonts) — path to `docs/research/MEDIA_MANIFEST.md`
 - Rebrand summary (path to `docs/research/REBRAND.md`)
 - Build status (`npm run build` result)
 - Visual QA results (any remaining discrepancies)

package/template/.continue/commands/clone-website.md

@@ -41,16 +41,22 @@ If the user provides additional instructions (specific fidelity level, deeper cu
 ## Pre-Flight
 
 1. **Read `launchframe.config.json`** (see Step 0 above). After a fresh `npx launchframe` scaffold, proceed immediately — only echo `url`/`idea` for confirmation if the config looks wrong or the user asked to verify.
-2. **Browser automation is required.** Check for available browser MCP tools (Chrome MCP, Playwright MCP, Browserbase MCP, Puppeteer MCP, etc.). Use whichever is available — if multiple exist, prefer Chrome MCP. If none are detected, ask the user which browser tool they have and how to connect it. This skill cannot work without browser automation.
+2. **Browser automation.** Prefer an MCP (Chrome DevTools MCP, Playwright MCP, Browserbase MCP, etc.) when it is healthy. **If MCP is missing or in an error state, run `npm run recon` (Playwright)** — see `scripts/recon-playwright.mjs`. It writes `docs/research/computed-snapshot.json`, `docs/research/MEDIA_MANIFEST.md`, and full-page screenshots under `docs/design-references/`. Use `npm run recon:headed` if headless hits a WAF/challenge page. One-time install: `npx playwright install chromium`. Do not skip extraction — adapt the pipeline to the tools that work.
 3. Validate the resolved URL(s). Normalize and verify each is accessible via your browser MCP tool. If any are invalid, ask the user to correct `launchframe.config.json` (or pass an override) before proceeding.
 4. Verify the base project builds: `npm run build`. The Next.js + shadcn/ui + Tailwind v4 scaffold should already be in place. If not, tell the user to run `npm install` first.
-5. Create the output directories if they don't exist: `docs/research/`, `docs/research/components/`, `docs/design-references/`, `scripts/`. For multiple clones, also prepare per-site folders like `docs/research/<hostname>/` and `docs/design-references/<hostname>/`.
+5. Create the output directories if they don't exist: `docs/research/`, `docs/research/components/`, `docs/design-references/`, `scripts/`. Plan `docs/research/MEDIA_MANIFEST.md` as soon as media is inventoried. For multiple clones, also prepare per-site folders like `docs/research/<hostname>/` and `docs/design-references/<hostname>/`.
 6. When working with multiple sites in one command, optionally confirm whether to run them in parallel (recommended, if resources allow) or sequentially to avoid overload.
 
 ## Guiding Principles
 
 These are the truths that separate a successful clone from a "close enough" mess. Internalize them — they should inform every decision you make.
 
+### 0. Launchframe priorities: media & motion (do not defer)
+
+**Raster & video are first-class.** Before you treat the page as “mostly typography,” run a dedicated **media inventory** (see `@docs/research/INSPECTION_GUIDE.md` Priority section): every `<img>`, `<picture>` / `<source>`, `<video>` (+ poster), and non-trivial `background-image`. Download to `public/images/` and `public/videos/` and write `docs/research/MEDIA_MANIFEST.md` (URL → local path, or `BLOCKED` + reason). Component specs MUST list concrete `public/...` paths; if you use a placeholder, say why in `docs/research/EXTRACTION_LIMITATIONS.md`. Never silently drop a hero layer, reel, or og visual.
+
+**Motion defaults to Framer Motion.** This template lists `framer-motion` as a dependency. After foundation tokens, ensure `import { motion } from "framer-motion"` (and related APIs: `useScroll`, `useTransform`, `AnimatePresence`, `LayoutGroup`) for: scroll-triggered reveals, staggered children, layout transitions, and gestures — anything beyond a trivial one-property CSS `transition`. In each spec file, add a **Motion** subsection: trigger, duration, easing, delay/stagger, and **implementation: CSS | framer-motion**. Prefer CSS only when it matches the target exactly without JS.
+
 ### 1. Completeness Beats Speed
 
 Every builder agent must receive **everything** it needs to do its job perfectly: screenshot, exact CSS values, downloaded assets with local paths, real text content, component structure. If a builder has to guess anything — a color, a font size, a padding value — you have failed at extraction. Take the extra minute to extract one more property rather than shipping an incomplete brief.
@@ -195,11 +201,12 @@ Save this as `docs/research/PAGE_TOPOLOGY.md` — it becomes your assembly bluep
 This is sequential. Do it yourself (not delegated to an agent) since it touches many files:
 
 1. **Update fonts** in `layout.tsx` to match the target site's actual fonts
-2. **Update globals.css** with the target's color tokens, spacing values, keyframe animations, utility classes, and any **global scroll behaviors** (Lenis, smooth scroll CSS, scroll-snap on body)
-3. **Create TypeScript interfaces** in `src/types/` for the content structures you've observed
-4. **Extract SVG icons** — find all inline `<svg>` elements on the page, deduplicate them, and save as named React components in `src/components/icons.tsx`. Name them by visual function (e.g., `SearchIcon`, `ArrowRightIcon`, `LogoIcon`).
-5. **Download global assets** — write and run a Node.js script (`scripts/download-assets.mjs`) that downloads all images, videos, and other binary assets from the page to `public/`. Preserve meaningful directory structure.
-6. Verify: `npm run build` passes
+2. **Confirm Framer Motion** — `framer-motion` should already be in `package.json`. If missing, add it (`npm install framer-motion`) so builders can import `motion` without ad-hoc library drift.
+3. **Update globals.css** with the target's color tokens, spacing values, keyframe animations, utility classes, and any **global scroll behaviors** (Lenis, smooth scroll CSS, scroll-snap on body)
+4. **Media inventory + download (early, high priority)** — run the asset discovery script (below) via browser MCP, write `docs/research/MEDIA_MANIFEST.md`, then implement **`scripts/download-assets.mjs`** and execute it so **images** land in `public/images/` and **videos** (+ posters) in `public/videos/` (or a clear subdirectory scheme under `public/`). Batch parallel downloads (4 concurrent) with errors logged — do not claim success if URLs failed. This step should complete **before** most section components are built so builders use real paths.
+5. **Create TypeScript interfaces** in `src/types/` for the content structures you've observed
+6. **Extract SVG icons** — find all inline `<svg>` elements on the page, deduplicate them, and save as named React components in `src/components/icons.tsx`. Name them by visual function (e.g., `SearchIcon`, `ArrowRightIcon`, `LogoIcon`).
+7. Verify: `npm run build` passes
 
 ### Asset Discovery Script Pattern
 
@@ -356,11 +363,16 @@ For each section (or sub-component, if you're breaking it up), create a spec fil
 - **State A (before):** maxWidth: 100vw, boxShadow: none, borderRadius: 0
 - **State B (after):** maxWidth: 1200px, boxShadow: 0 4px 20px rgba(0,0,0,0.1), borderRadius: 16px
 - **Transition:** transition: all 0.3s ease
-- **Implementation approach:** <CSS transition + scroll listener | IntersectionObserver | CSS animation-timeline | etc.>
+- **Implementation approach:** <CSS transition + scroll listener | IntersectionObserver | CSS animation-timeline | **framer-motion** (`motion`, `whileInView`, stagger container) | etc.>
 
 ### Hover states
 - **<Element>:** <property>: <before> → <after>, transition: <value>
 
+## Motion (Framer Motion vs CSS)
+- **Entrance / scroll reveals:** <e.g. fade+translateY, staggerChildren — specify duration, easing, delay, viewport `once`/`margin`>
+- **Library:** <`framer-motion` | CSS-only — justify if CSS-only>
+- **Keyframes / springs:** <if any — match target curve>
+
 ## Per-State Content (if applicable)
 
 ### State: "Featured"
@@ -372,9 +384,10 @@ For each section (or sub-component, if you're breaking it up), create a spec fil
 - Title: "..."
 - Cards: [...]
 
-## Assets
-- Background image: `public/images/<file>.webp`
-- Overlay image: `public/images/<file>.png`
+## Assets (images & video — required detail)
+- Raster: `public/images/<file>` — dimensions, `object-fit`, lazy if below fold
+- Video: `public/videos/<file>` — poster `public/images/...` or `public/videos/...`, autoplay/muted/loop, controls
+- Background layers: which div uses `background-image` and resolved URL → local path
 - Icons used: <ArrowIcon>, <SearchIcon> from icons.tsx
 
 ## Text Content (verbatim)
@@ -448,7 +461,7 @@ For every section, replace:
 7. **Metadata** — update `<title>`, meta description, OG tags, and favicon manifest in `src/app/layout.tsx` to reflect the new SaaS. Generate a simple favicon (initial letter on a brand-colored square) if no asset is provided.
 
 What you must NOT change in this pass:
-- Spacing, padding, typography scale, color tokens, animations, responsive breakpoints — those are still 1:1 to the original
+- Spacing, padding, typography scale, color tokens, **animation timing & motion choreography** (including Framer Motion `variants` / `transition` props), responsive breakpoints — those are still 1:1 to the original
 - Section order, section count, component structure
 - Interaction models (scroll-driven stays scroll-driven, etc.)
 - Any computed-style value extracted in Phase 3
@@ -482,6 +495,8 @@ Before dispatching ANY builder agent, verify you can check every box. If you can
 - [ ] For scroll-driven components: trigger threshold, before/after styles, and transition are recorded
 - [ ] For hover states: before/after values and transition timing are recorded
 - [ ] All images in the section are identified (including overlays and layered compositions)
+- [ ] Any `<video>` (and poster), Lottie, or canvas-driven hero is identified — not approximated as a static div
+- [ ] **Motion** subsection filled: CSS vs **framer-motion**, durations, easings, stagger, scroll triggers
 - [ ] Responsive behavior is documented for at least desktop and mobile
 - [ ] Text content is verbatim from the site, not paraphrased
 - [ ] The builder prompt is under ~150 lines of spec; if over, the section needs to be split
@@ -498,6 +513,8 @@ These are lessons from previous failed clones — each one cost hours of rework:
 - **Don't build everything in one monolithic commit.** The whole point of this pipeline is incremental progress with verified builds at each step.
 - **Don't reference docs from builder prompts.** Each builder gets the CSS spec inline in its prompt — never "see DESIGN_TOKENS.md for colors." The builder should have zero need to read external docs.
 - **Don't skip asset extraction.** Without real images, videos, and fonts, the clone will always look fake regardless of how perfect the CSS is.
+- **Don't defer image/video download to the end.** Run `MEDIA_MANIFEST.md` + `download-assets.mjs` during foundation so components reference real `public/` paths from the first build.
+- **Don't fake complex motion with a single CSS `transition` when the target uses staggered, scroll-scrubbed, or layout-driven animation** — use **`framer-motion`** (`motion`, `whileInView`, `variants`, `staggerChildren`) and match duration/easing from extraction.
 - **Don't give a builder agent too much scope.** If you're writing a builder prompt and it's getting long because the section is complex, that's a signal to break it into smaller tasks.
 - **Don't bundle unrelated sections into one agent.** A CTA section and a footer are different components with different designs — don't hand them both to one agent and hope for the best.
 - **Don't skip responsive extraction.** If you only inspect at desktop width, the clone will break at tablet and mobile. Test at 1440, 768, and 390 during extraction.
@@ -512,7 +529,7 @@ When done, report:
 - Total sections built
 - Total components created
 - Total spec files written (should match components)
-- Total assets downloaded (images, videos, SVGs, fonts)
+- Total assets downloaded (images, videos, SVGs, fonts) — path to `docs/research/MEDIA_MANIFEST.md`
 - Rebrand summary (path to `docs/research/REBRAND.md`)
 - Build status (`npm run build` result)
 - Visual QA results (any remaining discrepancies)