launchframe 0.2.5 → 0.2.6

package/template/scripts/recon-playwright.mjs

@@ -4,7 +4,7 @@
  *
  * Reads URL from launchframe.config.json (or --url). Writes:
  *   - docs/design-references/playwright-<host>-<w>px.png (full page)
- *   - docs/research/computed-snapshot.json (styles + asset inventory + bot-wall hint)
+ *   - docs/research/computed-snapshot.json (styles + merged asset inventory + bot-wall hint)
  *   - docs/research/MEDIA_MANIFEST.md (table of discovered media URLs)
  *
  * Usage:
@@ -52,27 +52,91 @@ function safeHost(url) {
   }
 }
 
-/** Scroll to bottom slowly to trigger lazy-loaded media */
+/**
+ * Scroll the full document depth slowly so lazy-loaded media and below-fold DOM resolve.
+ * Repeats until scrollHeight stabilizes (handles incremental infinite layouts up to max rounds).
+ */
 async function scrollFullPage(page) {
   await page.evaluate(async () => {
     const delay = (ms) => new Promise((r) => setTimeout(r, ms));
-    const step = Math.max(1, Math.floor(window.innerHeight * 0.85));
-    let y = 0;
-    const max = document.documentElement.scrollHeight;
-    while (y < max) {
-      y = Math.min(y + step, max);
-      window.scrollTo(0, y);
-      await delay(200);
+    const stepSize = () => Math.max(1, Math.floor(window.innerHeight * 0.85));
+
+    let unchangedStreak = 0;
+    let prevTotal = -1;
+
+    for (let round = 0; round < 12; round++) {
+      let y = 0;
+      let limit = document.documentElement.scrollHeight;
+
+      while (y < limit) {
+        y = Math.min(y + stepSize(), limit);
+        window.scrollTo(0, y);
+        await delay(130);
+        limit = document.documentElement.scrollHeight;
+      }
+
+      window.scrollTo(0, document.documentElement.scrollHeight);
+      await delay(420);
+
+      const h = document.documentElement.scrollHeight;
+
+      window.scrollTo(0, 0);
+      await delay(220);
+
+      if (h === prevTotal) unchangedStreak++;
+      else unchangedStreak = 0;
+      prevTotal = h;
+
+      if (unchangedStreak >= 2) break;
     }
-    window.scrollTo(0, 0);
-    await delay(300);
   });
 }
 
+function mergeAssetInventory(base, extra) {
+  if (!extra) return base;
+  const imgKey = (i) => i.src || "";
+  const seenImg = new Set(base.images.map(imgKey));
+  const images = [...base.images];
+  for (const i of extra.images) {
+    const k = imgKey(i);
+    if (k && !seenImg.has(k)) {
+      seenImg.add(k);
+      images.push(i);
+    }
+  }
+
+  const vidKey = (v) => `${v.src || ""}|${v.poster || ""}`;
+  const seenVid = new Set(base.videos.map(vidKey));
+  const videos = [...base.videos];
+  for (const v of extra.videos) {
+    const k = vidKey(v);
+    if ((v.src || v.poster) && !seenVid.has(k)) {
+      seenVid.add(k);
+      videos.push(v);
+    }
+  }
+
+  const seenBg = new Set(base.backgroundImages.map((b) => b.url));
+  const backgroundImages = [...base.backgroundImages];
+  for (const b of extra.backgroundImages) {
+    if (b.url && !seenBg.has(b.url)) {
+      seenBg.add(b.url);
+      backgroundImages.push(b);
+    }
+  }
+
+  return {
+    images,
+    videos,
+    backgroundImages,
+    svgCount: Math.max(base.svgCount ?? 0, extra.svgCount ?? 0),
+  };
+}
+
 async function gatherPageData(page) {
   return page.evaluate(() => {
     const title = document.title || "";
-    const text = (document.body?.innerText || "").slice(0, 5000);
+    const text = (document.body?.innerText || "").slice(0, 80000);
     const likelyBotWall =
       /just a moment/i.test(title) ||
       /checking your browser/i.test(text) ||
@@ -145,7 +209,7 @@ async function gatherPageData(page) {
     return {
       title,
       likelyBotWall,
-      textSample: text.slice(0, 1200),
+      textSample: text.slice(0, 24000),
       assetInventory: {
         images: imgs.filter((i) => i.src),
         videos,
@@ -272,23 +336,32 @@ async function main() {
     await new Promise((r) => setTimeout(r, 2500));
     snapshot.finalUrl = page.url();
 
+    let mergedInventory = null;
+    let desktopLandmarks = null;
+
     for (const w of [1440, 390]) {
       await page.setViewportSize({ width: w, height: w === 1440 ? 900 : 844 });
-      if (w === 1440) await scrollFullPage(page);
+      await scrollFullPage(page);
 
       const shotPath = join(ROOT, "docs", "design-references", `playwright-${host}-${w}px.png`);
       await page.screenshot({ path: shotPath, fullPage: true });
       snapshot.viewports[w] = { screenshot: `docs/design-references/playwright-${host}-${w}px.png` };
 
+      const data = await gatherPageData(page);
+
       if (w === 1440) {
-        const data = await gatherPageData(page);
         snapshot.title = data.title;
         snapshot.likelyBotWall = data.likelyBotWall;
-        snapshot.assetInventory = data.assetInventory;
-        snapshot.computedLandmarks = data.computedLandmarks;
+        mergedInventory = data.assetInventory;
+        desktopLandmarks = data.computedLandmarks;
         snapshot.textSample = data.textSample;
+      } else {
+        mergedInventory = mergeAssetInventory(mergedInventory, data.assetInventory);
       }
     }
+
+    snapshot.assetInventory = mergedInventory;
+    snapshot.computedLandmarks = desktopLandmarks;
   } finally {
     await browser.close();
   }

package/template/src/components/marketing/scribewise-landing.tsx

@@ -0,0 +1,34 @@
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+
+export function ScribewiseLanding() {
+  return (
+    <main className="relative flex flex-1 flex-col items-center justify-center gap-8 overflow-hidden px-6 py-24 text-center">
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,color-mix(in_oklab,var(--primary)_28%,transparent),transparent)]"
+      />
+      <p className="text-muted-foreground text-xs font-medium tracking-[0.2em] uppercase">
+        Launchframe template
+      </p>
+      <div className="max-w-2xl space-y-4">
+        <h1 className="text-balance font-semibold text-4xl tracking-tight sm:text-5xl">
+          Ready for `/clone-website`
+        </h1>
+        <p className="text-muted-foreground text-balance text-lg">
+          Add your target URL and SaaS idea via <code className="text-foreground">launchframe.config.json</code>,
+          run recon if needed, then let your agent ship the full landing.
+        </p>
+      </div>
+      <div className="flex flex-wrap items-center justify-center gap-3">
+        <Button nativeButton={false} render={<Link href="https://github.com/evangruhlkey/launchframe" />}>
+          Launchframe docs
+        </Button>
+        <Button variant="outline" nativeButton={false} render={<Link href="/" />}>
+          Replace this page
+        </Button>
+      </div>
+    </main>
+  );
+}

package/template/.claude/skills/marketing-landing-production/SKILL.md

@@ -1,36 +0,0 @@
----
-name: marketing-landing-production
-description: Elevate an authored or minimalist marketing landing to production quality — layered SVG illustration, pixel-art accents, choreographed motion (Framer Motion tiers A–E), accent tokens, OG/favicon cohesion. Use when the user asks for prod polish, more motion, stronger branding, SVG scenes, or pixel art on `src/app/page.tsx` / `src/components/marketing/**`.
-argument-hint: "[optional paths or sections to prioritize]"
-user-invocable: true
----
-
-# Marketing Landing — Production Polish
-
-You are upgrading a **marketing landing** so it feels shipped — not “fine for a demo.” Read **`AGENTS.md` → Production polish for marketing landings** first; this skill is the executable checklist.
-
-## When to run
-
-- Clone/rebrand finished but the page still reads **flat** (mostly black text on white + gray placeholders).
-- User explicitly wants **more images**, **motion**, **SVG / illustration**, **pixel art**, **brandability**, **production-ready**.
-- Feature cards use **off-topic filler art** — replace with scenes tied to copy.
-
-## Hard requirements
-
-1. **`framer-motion`** — staggered hero load (**tier A**), scroll reveals + nested staggers (**tier B**), at least **one** ambient loop (**tier C**: marquee, typing caret, SVG dash drift, gradient pulse — pick what fits brand).
-2. **Interaction polish (tier D)** — measurable hover/tap on primary surfaces (buttons, cards): subtle lift, shadow ramp, scale ≤ 1.02.
-3. **Decorative depth (tier E, optional)** — light pointer parallax **or** scroll-linked transforms; keep translation ≤ ~8px and rotation ≤ ~2deg.
-4. **`useReducedMotion()`** — disable or simplify looping motion and shorten entrances when the user prefers reduced motion.
-5. **SVG illustration layers** — dedicated React components (prefer `src/components/marketing/art/`); use **`currentColor`** where possible so theme tokens drive strokes/fills.
-6. **Pixel art** — if requested: declare palette (hex table in component comment), crisp scaling (`imageRendering: "pixelated"` for intentional upscale), consistent grid logic.
-7. **Brand spine** — motif repeats once in hero + once in a card or footer glyph cluster; define **accent CSS variables** if the page is only monochrome gray today.
-8. **Artifacts** — write **`docs/research/PRODUCTION_UPLIFT.md`**: bullets for SVG modules added, motion tiers shipped, accent tokens, OG/favicon edits.
-
-## Verification
-
-- `npm run build` passes.
-- Lighthouse/visual sanity: no layout shift explosions from animations; loops are subtle at default amplitude.
-
-## Out of scope unless asked
-
-Backend, CMS wiring, analytics, full accessibility audit beyond motion preferences.

package/template/.cursor/commands/marketing-landing-production.md

@@ -1,31 +0,0 @@
-<!-- Mirrors .claude/skills/marketing-landing-production/SKILL.md — edit skill first, then sync this body if drift occurs. -->
-
-# Marketing Landing — Production Polish
-
-You are upgrading a **marketing landing** so it feels shipped — not “fine for a demo.” Read **`AGENTS.md` → Production polish for marketing landings** first; treat this command as the executable checklist.
-
-## When to run
-
-- Clone/rebrand finished but the page still reads **flat** (mostly black text on white + gray placeholders).
-- User explicitly wants **more images**, **motion**, **SVG / illustration**, **pixel art**, **brandability**, **production-ready**.
-- Feature cards use **off-topic filler art** — replace with scenes tied to copy.
-
-## Hard requirements
-
-1. **`framer-motion`** — staggered hero load (**tier A**), scroll reveals + nested staggers (**tier B**), at least **one** ambient loop (**tier C**: marquee, typing caret, SVG dash drift, gradient pulse — pick what fits brand).
-2. **Interaction polish (tier D)** — measurable hover/tap on primary surfaces (buttons, cards): subtle lift, shadow ramp, scale ≤ 1.02.
-3. **Decorative depth (tier E, optional)** — light pointer parallax **or** scroll-linked transforms; keep translation ≤ ~8px and rotation ≤ ~2deg.
-4. **`useReducedMotion()`** — disable or simplify looping motion and shorten entrances when the user prefers reduced motion.
-5. **SVG illustration layers** — dedicated React components (prefer `src/components/marketing/art/`); use **`currentColor`** where possible so theme tokens drive strokes/fills.
-6. **Pixel art** — if requested: declare palette (hex table in component comment), crisp scaling (`imageRendering: "pixelated"` for intentional upscale), consistent grid logic.
-7. **Brand spine** — motif repeats once in hero + once in a card or footer glyph cluster; define **accent CSS variables** if the page is only monochrome gray today.
-8. **Artifacts** — write **`docs/research/PRODUCTION_UPLIFT.md`**: bullets for SVG modules added, motion tiers shipped, accent tokens, OG/favicon edits.
-
-## Verification
-
-- `npm run build` passes.
-- Lighthouse/visual sanity: no layout shift explosions from animations; loops are subtle at default amplitude.
-
-## Out of scope unless asked
-
-Backend, CMS wiring, analytics, full accessibility audit beyond motion preferences.