calesthio
50891a75b7
Separates creative grammar (renderer_family) from technical engine (render_runtime) so HyperFrames can stand alongside Remotion as a first-class runtime instead of masquerading as a Remotion sub-case. Locks runtime choice at proposal stage and enforces it end-to-end: the schemas require it, video_compose routes by it, the reviewer fails closed on silent swaps, and a parametrized contract test walks every pipeline manifest to ensure each planning-stage skill explains the conversation to the user. Adds hyperframes_compose (scaffold/lint/ validate/render/doctor/add_block), a playbook -> CSS style bridge, and vendored HyperFrames Layer 3 skills from commit d291358, pinned via PROVENANCE.md for future re-sync. Final_review now records render_runtime_used and runtime_swap_detected so compose lies are catchable after the fact.
3.7 KiB
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)
-
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.
-
extracted/tokens.json— Note the top 5-7 colors (HEX), all font families, number of sections, and number of headings/CTAs. -
extracted/visible-text.txt— Note the site's headline, tagline, key selling points, and any notable statistics or social proof. -
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
-
extracted/animations.json— Note if the site uses scroll-triggered animations, marquees, canvas/WebGL, or named CSS animations. -
extracted/lottie-manifest.json— View each preview image atassets/lottie/previews/to see what the animations look like. -
extracted/video-manifest.json— View each preview atassets/videos/previews/to see what each video shows. -
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 intechniques.md.
On-demand (read when building scenes)
-
Individual images in
assets/— Useasset-descriptions.mdas your index. View specific images when you need them for a beat. -
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]