launchframe 0.2.4 → 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/app/globals.css

@@ -46,6 +46,9 @@
   --radius-2xl: calc(var(--radius) * 1.8);
   --radius-3xl: calc(var(--radius) * 2.2);
   --radius-4xl: calc(var(--radius) * 2.6);
+  --color-brand: var(--brand);
+  --color-brand-foreground: var(--brand-foreground);
+  --color-brand-muted: var(--brand-muted);
 }
 
 :root {
@@ -73,6 +76,10 @@
   --chart-4: oklch(0.371 0 0);
   --chart-5: oklch(0.269 0 0);
   --radius: 0.625rem;
+  /* Scribewise brand accents (ink + notebook blue) */
+  --brand: oklch(0.52 0.14 252);
+  --brand-foreground: oklch(0.985 0 0);
+  --brand-muted: oklch(0.94 0.03 252);
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: oklch(0.205 0 0);
@@ -84,6 +91,9 @@
 }
 
 .dark {
+  --brand: oklch(0.62 0.12 252);
+  --brand-foreground: oklch(0.145 0 0);
+  --brand-muted: oklch(0.26 0.04 252);
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);
@@ -117,6 +127,88 @@
   --sidebar-ring: oklch(0.556 0 0);
 }
 
+@keyframes scribewise-marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes scribewise-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+@keyframes scribewise-pixel-blink {
+  0%,
+  49% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: 0.25;
+  }
+}
+
+@keyframes scribewise-grid-shift {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(-24px, -24px);
+  }
+}
+
+.scribewise-marquee-track {
+  display: flex;
+  width: max-content;
+  gap: 3rem;
+  animation: scribewise-marquee 42s linear infinite;
+}
+
+.scribewise-bg-grid {
+  animation: scribewise-grid-shift 18s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .scribewise-marquee-track,
+  .scribewise-bg-grid {
+    animation: none !important;
+  }
+
+  .scribewise-pixel-brain rect,
+  .scribewise-soft-float {
+    animation: none !important;
+  }
+}
+
+.scribewise-pixel-brain rect {
+  animation: scribewise-pixel-blink 1s steps(1, end) infinite;
+}
+
+.scribewise-pixel-brain rect:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.scribewise-pixel-brain rect:nth-child(2) {
+  animation-delay: 0.12s;
+}
+
+.scribewise-pixel-brain rect:nth-child(3) {
+  animation-delay: 0.24s;
+}
+
+.scribewise-pixel-brain rect:nth-child(4) {
+  animation-delay: 0.36s;
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
@@ -127,4 +219,4 @@
   html {
     @apply font-sans;
   }
-}
+}

package/template/src/app/layout.tsx

@@ -13,8 +13,9 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Website Clone",
-  description: "Pixel-perfect website clone",
+  title: "Scribewise — AI workspace for structured notes",
+  description:
+    "Capture voice, screenshots, and messy thoughts into structured notes synced everywhere.",
 };
 
 export default function RootLayout({

package/template/src/app/page.tsx

@@ -1,9 +1,5 @@
+import { ScribewiseLanding } from "@/components/marketing/scribewise-landing";
+
 export default function Home() {
-  return (
-    <main className="flex min-h-screen items-center justify-center">
-      <p className="text-muted-foreground">
-        Clone target not yet built. Run <code className="font-mono text-foreground">/clone-website</code> to start.
-      </p>
-    </main>
-  );
+  return <ScribewiseLanding />;
 }

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>
+  );
+}