mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 04:38:33 +00:00
feat(capture): improve capture quality + clean up CLAUDE.md
Capture improvements:
- Font weights via document.fonts API + DOM sampling (variable font detection)
- Section background-image extraction (no more false #FFFFFF on hero photos)
- Detected libraries surfaced in CLAUDE.md brand summary
- Structured visible-text.txt with [tag] prefixes, cookie/nav noise filtered
- tokens.json cleaned: removed images/paragraphs/icons (duplicated elsewhere),
filtered sections to heading-only, trimmed cssVariables to design-relevant
- Removed redundant scroll pass in htmlExtractor (2-5s faster per capture)
- Font cap at 20 families, Placeholder/Fallback fonts filtered
CLAUDE.md rewrite:
- Removed prescriptive tone ("use exact strings" → "rephrase freely")
- Removed fluff sections (How to Create, DESIGN.md warning, Example Prompts,
Source Patterns)
- asset-descriptions.md promoted to first data row
- Removed assets-catalog.json from inventory
Skill fixes:
- Dead shader refs → point to packages/shader-transitions/README.md
- Google Fonts import in techniques.md → local @font-face placeholder
- Added Stripe DESIGN.md as light-brand example
- Removed HANDOFF.md generation from step-7
- Updated step-1 for new font weight + visible-text formats
This commit is contained in:
ukimsanov
@@ -24,9 +24,9 @@ Read each file below. After reading each one, **write a 1-2 sentence summary** o
|
||||
|
||||
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.
|
||||
2. **`extracted/tokens.json`** — Note the top 5-7 colors (HEX), all font families with their weights (e.g. `Inter (400,700)` or `Sohne (100-900 variable)`), 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.
|
||||
3. **`extracted/visible-text.txt`** — Each line is prefixed with the HTML tag: `[h1] Heading`, `[p] Body text`, `[a] Link text`. Use these tags to understand hierarchy — headings are key messages, paragraphs are supporting copy. Strip the `[tag]` prefix when quoting text in the script.
|
||||
|
||||
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).
|
||||
|
||||
|
||||
@@ -126,3 +126,53 @@ Soulscape 2026 is a cinematic, "high-signal" digital experience that positions i
|
||||
- Do not use standard drop shadows — use radial glow or bloom effects instead.
|
||||
- Do not use sharp high-speed animations — all motion should be fluid and breathing.
|
||||
```
|
||||
|
||||
Here is a contrasting example from a light, corporate brand to show the range:
|
||||
|
||||
```markdown
|
||||
# Design System
|
||||
|
||||
## Overview
|
||||
|
||||
Stripe's visual personality is defined by high-precision, technical sophistication, and a fluid, forward-moving motion language. The layout is dense but expertly balanced, utilizing a "canary" grid system that favors high-density data visualizations and modular bento-style layouts. The tone is authoritative and innovative, characterized by smooth CSS animations, complex SVG graphics that mimic UI dashboards, and the iconic "hero wave" background that uses layered gradients to create depth and movement.
|
||||
|
||||
## Colors
|
||||
|
||||
- **Brand Primary**: #635bff (The signature Stripe Blurple)
|
||||
- **Text Solid**: #0a2540 (Deep navy for primary headings)
|
||||
- **Text Soft**: #424770 (Subdued slate for descriptions and secondary text)
|
||||
- **Surface Background**: #ffffff (White primary surface)
|
||||
- **Surface Subdued**: #f6f9fc (Light gray for section contrast)
|
||||
- **Accent Green**: #212d45 (Used in high-converting success UI graphics)
|
||||
- **Accent Orange**: #ff6118 (Used for specific product highlights like Connect)
|
||||
- **Accent Yellow**: #fc5 (Warm highlight used in bento cards)
|
||||
- **Border Quiet**: #e6ebf1 (Soft borders for cards and dividers)
|
||||
|
||||
## Typography
|
||||
|
||||
- **Primary Font**: Sohne (sohne-var), a custom neo-grotesque that balances technical precision with approachability. Used across all headers and body copy.
|
||||
- **Monospace Font**: SourceCodePro-Medium, specifically for code snippets, tabular data, and technical UI identifiers.
|
||||
- **Heading Scale**: hds-heading--xxl ~3rem, hds-heading--lg ~1.5rem, hds-heading--md ~1.125rem
|
||||
- **Body Scale**: Standard body text centers around 1rem (16px) with a line-height of 1.5-1.6.
|
||||
|
||||
## Elevation
|
||||
|
||||
- **Shadows**: Multi-layered shadow system (e.g., 0 30px 60px -12px rgba(50,50,93,0.25)). Shadows are diffused and deep for a floating effect.
|
||||
- **Borders**: Heavy use of 1px solid borders to define bento grid boundaries instead of shadows in flat sections.
|
||||
- **Glass/Layering**: Navigation overlays use backdrop-filter blur(5px) with translucent white background.
|
||||
|
||||
## Components
|
||||
|
||||
- **Navigation Popover**: Animated dropdown spanning page margin with multi-column bento layouts.
|
||||
- **Bento Cards**: Interactive grid-aligned containers with gradient hover effects that follow the cursor.
|
||||
- **Customer Marquee**: Seamless horizontal scrolling loop of flat-colored SVG logos.
|
||||
- **UI Graphics**: Custom HTML/CSS representations of the Stripe Dashboard with tabular numbers and mini-charts.
|
||||
- **CTA Buttons**: Rounded-pill shapes with subtle scale transforms on hover.
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
- **Do**: Use smooth cubic-bezier(.25, 1, .5, 1) transitions for all hover states and entering animations.
|
||||
- **Do**: Maintain strict vertical alignment between iconography and text labels.
|
||||
- **Don't**: Use sharp-cornered cards; always apply a border-radius.
|
||||
- **Don't**: Over-saturate backgrounds; stick to white or #f6f9fc and let brand assets provide color pop.
|
||||
```
|
||||
|
||||
@@ -124,13 +124,13 @@ How this beat hands off to the next. Specify the type and parameters.
|
||||
- Zoom through: exit `scale:1→1.2, blur:20px, 0.2s power3.in` → entry `scale:0.75→1, blur:20px→0, 0.5s expo.out`
|
||||
- Hard cut / smash cut (for rapid-fire sequences)
|
||||
|
||||
**Shader transitions** (choose from `skills/hyperframes/references/transitions/shader-transitions.md`):
|
||||
**Shader transitions** (choose from `packages/shader-transitions/README.md`):
|
||||
|
||||
- Cross-Warp Morph (organic, versatile) — 0.5-0.8s, power2.inOut
|
||||
- Cinematic Zoom (professional momentum) — 0.4-0.6s, power2.inOut
|
||||
- Gravitational Lens (otherworldly) — 0.6-1.0s, power2.inOut
|
||||
- Glitch (aggressive, high energy) — 0.3-0.5s
|
||||
- See `skills/hyperframes/references/transitions/shader-setup.md` for the full WebGL boilerplate
|
||||
- See `packages/shader-transitions/README.md` for the full API, available shaders, and setup
|
||||
|
||||
**How velocity-matched CSS transitions work:**
|
||||
Exit the outgoing beat with an accelerating ease (power2.in or power3.in) plus a blur ramp. Enter the incoming beat with a decelerating ease (power2.out or power3.out) plus blur clear. The fastest point of both easing curves meets at the cut — the viewer perceives continuous camera motion, not two discrete animations. Match exit velocity to entry velocity within ~5% tolerance.
|
||||
|
||||
@@ -82,7 +82,7 @@ Every visible element must have continuous motion. A still image on a still back
|
||||
Check the storyboard's transition specification for this beat:
|
||||
|
||||
- **CSS transition**: implement the exit animation (e.g., `y:-150, blur:30px, 0.33s power2.in`). The next composition handles its own entry.
|
||||
- **Shader transition**: no exit animation needed — the shader handles the blend. Read `skills/hyperframes/references/transitions/shader-setup.md` for the full WebGL boilerplate and `skills/hyperframes/references/transitions/shader-transitions.md` for the fragment shader. Copy the FULL boilerplate — a simplified version produces black screens.
|
||||
- **Shader transition**: no exit animation needed — the shader handles the blend. Read `packages/shader-transitions/README.md` for the API, available shaders, and setup. The package handles WebGL init, capture, and GSAP integration — do not copy raw GLSL manually.
|
||||
- **Hard cut**: no exit animation. The scene simply ends.
|
||||
|
||||
For all CSS transition types and their GSAP implementations, read `skills/hyperframes/references/transitions/catalog.md`.
|
||||
|
||||
@@ -70,40 +70,3 @@ npx hyperframes preview
|
||||
```
|
||||
|
||||
Open the studio in a browser. Scrub through every beat.
|
||||
|
||||
## Create HANDOFF.md
|
||||
|
||||
Write a `HANDOFF.md` for multi-session continuity:
|
||||
|
||||
```markdown
|
||||
# Handoff — [Project Name]
|
||||
|
||||
**Date:** [today]
|
||||
**Preview:** `npx hyperframes preview`
|
||||
|
||||
## What's Built
|
||||
|
||||
| Beat | File | Dur | Status | Notes |
|
||||
| ---- | -------------------- | ---- | ------ | ----- |
|
||||
| 1 | beat-1-hook.html | 5.2s | Built | ... |
|
||||
| 2 | beat-2-features.html | 6.8s | Built | ... |
|
||||
|
||||
## Audio
|
||||
|
||||
| Asset | Status | Notes |
|
||||
| --------------- | ------ | ------------------------------------ |
|
||||
| narration.wav | Done | [provider], [voice name], [duration] |
|
||||
| transcript.json | Done | [word count] words, [duration] |
|
||||
|
||||
## What Needs Work
|
||||
|
||||
- [any known issues, polish requests, missing SFX]
|
||||
|
||||
## Commands
|
||||
|
||||
npx hyperframes preview
|
||||
npx hyperframes lint
|
||||
npx hyperframes validate
|
||||
npx hyperframes snapshot <project-dir> --at <beat-midpoints>
|
||||
npx hyperframes render --output renders/final.mp4
|
||||
```
|
||||
|
||||
@@ -251,7 +251,15 @@ Animate font-variation-settings to reshape glyphs in real-time. Works with varia
|
||||
|
||||
```html
|
||||
<style>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,100..900&display=block");
|
||||
/* Load the captured local variable font — do NOT use Google Fonts @import.
|
||||
Replace this placeholder with an @font-face pointing to assets/fonts/. */
|
||||
@font-face {
|
||||
font-family: "Fraunces";
|
||||
src: url("../assets/fonts/Fraunces-Variable.woff2") format("woff2");
|
||||
font-weight: 100 900;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
.wordmark {
|
||||
--opsz: 144;
|
||||
--wght: 440;
|
||||
|
||||
Reference in New Issue
Block a user