webpage-rebuilder

name

webpage-rebuilder

description

Capture and reconstruct public webpages from a URL, including animation-heavy Framer, Motion, Lottie, RAF, scroll-driven, and video-driven pages. Use when Codex is asked to clone, reproduce, rebuild, archive, inspect, or high-fidelity recreate a landing page, marketing site, homepage, or other public web page by extracting live DOM, text, images, CSS, network assets, layout, responsive screenshots, generated JS motion hints, runtime animation traces, and browser-observable animations.

Webpage Rebuilder

Webpage Rebuilder turns a public URL into a verified local reproduction workflow. It is designed for modern landing pages built with Framer, Motion, Lottie, generated JS bundles, requestAnimationFrame, scroll effects, and video assets. It does not recover private source code; it captures what the browser can legally and technically observe, then guides Codex to rebuild the page with visual comparison.

Operating Rules

• Work only on public pages or pages the user is authorized to inspect.
• Preserve facts in captures; do not claim exact source-code recovery.
• Treat third-party images, logos, fonts, copy, and trademarks as licensed material. Reuse only when the user owns rights or asks for an internal/private reconstruction.
• Prefer high-fidelity local implementation over mirroring remote scripts. Avoid shipping remote tracking scripts, analytics, chat widgets, or invasive third-party code in the clone.
• For a production replacement, recreate design and behavior with owned code and licensed assets.

Workflow

1. Capture the target:

node /Users/kimurataiyou/.codex/skills/webpage-rebuilder/scripts/capture-page.mjs --url "https://example.com" --out ./webpage-rebuilder-capture

If Playwright is missing in the current project, install it in the working project before running:

npm i -D playwright
npx playwright install chromium

2. Inspect manifest.json, raw/dom.html, raw/stylesheets.json, raw/layout.json, raw/animations.json, raw/assets.json, and screenshots/.

For Framer, Motion, Lottie, requestAnimationFrame, video-driven, or API-configured motion, run the deeper motion tracer as a standard second pass:

node /Users/kimurataiyou/.codex/skills/webpage-rebuilder/scripts/trace-motion.mjs --url "https://example.com" --out ./webpage-rebuilder-motion-trace --viewport 1440x1000 --scroll-steps 6

Start with motion-summary.json, then inspect motion-trace.json and saved assets/*.json, assets/*.mp4, .lottie, .riv, .js, or .mjs files before recreating motion.

3. Build the local reproduction in the user's requested stack. If no stack is specified, choose the smallest suitable target:

• Static HTML/CSS/JS for a one-page landing page.
• React/Next.js for reusable components, routing, or deployment.
• Tailwind only when the repo already uses it or the user requests it.

4. Recreate behavior by priority:

• Layout, typography, spacing, colors, and responsive breakpoints.
• Text and semantic structure.
• Images, SVGs, backgrounds, videos, and iconography.
• Exact Lottie JSON, .lottie, .riv, and video assets captured from network traffic.
• CSS transitions, CSS animations, Web Animations API effects, scroll-triggered reveals, and interactive states.
• Framer/Motion transition constants and animation objects mined from saved generated JS.
• RAF and scroll-driven effects approximated from computed-style samples when semantic keyframes are not exposed.
• Canvas/WebGL/complex requestAnimationFrame effects as visual reimplementations, not source recovery.

5. Compare the original and candidate:

node /Users/kimurataiyou/.codex/skills/webpage-rebuilder/scripts/visual-compare.mjs --source-url "https://example.com" --candidate-url "http://localhost:3000" --out ./webpage-rebuilder-compare

For numeric pixel diffs, install optional project dependencies: npm i -D pngjs pixelmatch. Without them, the script still captures paired screenshots for manual review.

6. Iterate until the screenshot diffs and manual browser checks are acceptable across desktop and mobile.

Capture Contents

capture-page.mjs records:

• final URL, title, language, viewport metadata, timing, and console errors
• full DOM snapshot
• visible text blocks with bounding boxes and computed typography
• image, SVG, background-image, video, audio, and source elements
• same-origin readable CSS rules plus all stylesheet URLs
• CSS custom properties on :root
• visible layout tree with selected computed styles
• browser resource timing and saved response bodies for images, fonts, CSS, JS, SVG, and media within size limits
• document.getAnimations() output, Element.animate() calls, and requestAnimationFrame usage signals
• full-page screenshots at desktop, tablet, and mobile viewports

trace-motion.mjs records:

• fetched JSON/Lottie/Rive/video resources when observable in network traffic
• generated JS bundles and concise Framer/Motion marker analysis when observable in network traffic
• Chrome DevTools Protocol animation events for CSS, transition, and Web Animations
• Element.animate() calls
• requestAnimationFrame counts and stack samples
• style/class mutations
• sampled computed opacity, transform, transition, animation, bounding boxes, and scroll positions across time and scroll steps
• motion-summary.json with reconstruction order, Lottie/video hints, Framer symbols, motion constants, and DOM media hints

Animation Strategy

Read references/animation-capture.md before rebuilding animation-heavy pages.

Use exact animation data when Webpage Rebuilder captures keyframes and timings. For Framer/Motion/Lottie/RAF/video pages, treat motion-summary.json as the source of truth for what can be copied exactly versus approximated. When the page uses GSAP, Framer Motion, custom RAF loops, Canvas, WebGL, or obfuscated bundles, infer behavior from screenshots, DOM states, scroll observation, runtime traces, and visible motion, then recreate it with maintainable local code.

Feasibility Standard

Read references/feasibility.md when a user asks whether Webpage Rebuilder can "completely" clone a site. The correct promise is:

Webpage Rebuilder can produce a high-fidelity, browser-observed reproduction of public pages and verify it visually. It cannot guarantee recovery of original source code, private server logic, gated assets, all A/B variants, or arbitrary non-DOM graphics internals.

Verification

Before finishing a Webpage Rebuilder task:

• Run the candidate locally.
• Capture original and candidate at least at 1440x1000 and 390x844.
• Use visual-compare.mjs; if optional pixel dependencies are unavailable, inspect the paired screenshots manually.
• Check scroll, hover, menu, modal, form, and animation states that appear in the original.
• Report residual gaps explicitly: missing license rights, blocked assets, non-DOM graphics, authentication, bot protection, or behavior that must be approximated.