hyperframes/skills/website-to-hyperframes/references/step-1-capture.md

Step 1: Capture & Understand

Run the capture

npx hyperframes capture <URL> -o captures/<project-name>

No API keys required. The capture extracts design tokens, screenshots, fonts, and assets with DOM-context descriptions automatically.

Optional: Set GEMINI_API_KEY (or GOOGLE_API_KEY) in a .env file at the repo root for richer AI-powered image descriptions via Gemini 2.5 Flash vision. Free tier: 5 RPM; paid tier removes the bottleneck.

Wait for it to complete. Print how many screenshots, assets, sections, and fonts were extracted.

Read and summarize

Read each file below. After reading each one, write a 1-2 sentence summary of what you learned. These summaries are your working memory — the raw file content may be cleared from context later.

Must read (do not skip)

1. View the scroll screenshots — viewport-sized captures covering the full page height (the number depends on the page length). Start with:

   • screenshots/scroll-000.png — the hero section at full 1920x1080 resolution. This is the most important image. Describe: is the background light or dark? What's the dominant visual element? What colors jump out?
   • Then scan through the rest to see the full page. Each screenshot overlaps the previous by ~30%.

   After viewing them, write 3-4 sentences describing the site's visual mood, layout patterns, color strategy, and overall feel.

2. extracted/tokens.json — Note the top 5-7 colors (HEX), all font families, number of sections, and number of headings/CTAs.

3. extracted/visible-text.txt — Note the site's headline, tagline, key selling points, and any notable statistics or social proof.

4. extracted/asset-descriptions.md — One-line-per-file summary of all downloaded assets. Note which assets are most visually striking or useful for video (hero images, logos, product screenshots).

Read if they exist

5. extracted/animations.json — Note if the site uses scroll-triggered animations, marquees, canvas/WebGL, or named CSS animations.

6. extracted/lottie-manifest.json — View each preview image at assets/lottie/previews/ to see what the animations look like.

7. extracted/video-manifest.json — View each preview at assets/videos/previews/ to see what each video shows.

8. extracted/shaders.json — If present, this contains the actual GLSL shader code that powers the site's WebGL visual effects (gradient waves, particle systems, noise fields). Read the fragment shaders to extract: color values used in gradients, noise algorithms, blend functions. You can recreate similar effects in your compositions using Canvas 2D or by embedding the shader patterns with a <canvas> + WebGL context. See the Canvas 2D and procedural art patterns in techniques.md.

On-demand (read when building scenes)

9. Individual images in assets/ — Use asset-descriptions.md as your index. View specific images when you need them for a beat.

10. extracted/assets-catalog.json — Use to find remote URLs when you need an asset that wasn't downloaded.

For rich captures (30+ images)

Launch a sub-agent to view all images and SVGs:

"Read every image in assets/ and every SVG in assets/svgs/. For each, write one line: filename — what it shows, dominant colors, approximate size. Return the complete catalog."

Use the sub-agent's catalog as your asset reference for the rest of the workflow.

Gate

Print your site summary before proceeding to Step 2:

• Site: [name]
• Colors: [top 3-5 HEX values with roles]
• Fonts: [font families]
• Sections: [count] sections, [count] headings, [count] CTAs
• Key assets: [3-5 most useful assets for video]
• Vibe: [one sentence describing the visual identity]