hyperframes 0.6.96 → 0.6.98

package/dist/skills/hyperframes/references/transitions/css-push.md

@@ -1,41 +0,0 @@
-## Linear / Push
-
-### Push Slide
-
-Both scenes move together — new pushes old out.
-
-```js
-tl.to(old, { x: -1920, duration: 0.5, ease: "power3.inOut" }, T);
-tl.fromTo(new, { x: 1920, opacity: 1 }, { x: 0, duration: 0.5, ease: "power3.inOut" }, T);
-```
-
-### Vertical Push
-
-Same as push slide but vertical.
-
-```js
-tl.to(old, { y: -1080, duration: 0.5, ease: "power3.inOut" }, T);
-tl.fromTo(new, { y: 1080, opacity: 1 }, { y: 0, duration: 0.5, ease: "power3.inOut" }, T);
-```
-
-### Elastic Push
-
-Push with overshoot bounce on the incoming scene.
-
-```js
-tl.to(old, { x: -1920, duration: 0.5, ease: "power3.in" }, T);
-tl.fromTo(new, { x: 1920, opacity: 1 }, { x: 30, duration: 0.4, ease: "power4.out" }, T + 0.1);
-tl.to(new, { x: -15, duration: 0.15, ease: "sine.inOut" }, T + 0.5);
-tl.to(new, { x: 0, duration: 0.1, ease: "sine.out" }, T + 0.65);
-```
-
-### Squeeze
-
-Old compresses, new expands from opposite side.
-
-```js
-tl.to(old, { scaleX: 0, transformOrigin: "left center", duration: 0.4, ease: "power3.inOut" }, T);
-tl.fromTo(new, { scaleX: 0, transformOrigin: "right center", opacity: 1 },
-  { scaleX: 1, duration: 0.4, ease: "power3.inOut" }, T + 0.1);
-tl.set(old, { opacity: 0 }, T + 0.5);
-```

package/dist/skills/hyperframes/references/transitions/css-radial.md

@@ -1,37 +0,0 @@
-## Radial / Shape
-
-### Circle Iris
-
-Expanding circle from center reveals new scene.
-
-```js
-tl.set(new, { opacity: 1 }, T);
-tl.fromTo(new,
-  { clipPath: "circle(0% at 50% 50%)" },
-  { clipPath: "circle(75% at 50% 50%)", duration: 0.5, ease: "power2.out" }, T);
-tl.set(old, { opacity: 0 }, T + 0.5);
-```
-
-### Diamond Iris
-
-Expanding diamond shape from center.
-
-```js
-tl.set(new, { opacity: 1 }, T);
-tl.fromTo(new,
-  { clipPath: "polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)" },
-  { clipPath: "polygon(50% -20%, 120% 50%, 50% 120%, -20% 50%)", duration: 0.5, ease: "power2.out" }, T);
-tl.set(old, { opacity: 0 }, T + 0.5);
-```
-
-### Diagonal Split
-
-Old scene shrinks to a triangle in one corner.
-
-```js
-tl.set(new, { opacity: 1, zIndex: 1 }, T);
-tl.set(old, { zIndex: 10, clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" }, T);
-tl.to(old, { clipPath: "polygon(60% 0%, 100% 0%, 100% 40%, 60% 0%)", duration: 0.5, ease: "power3.inOut" }, T);
-tl.set(old, { opacity: 0, zIndex: "auto", clipPath: "none" }, T + 0.5);
-tl.set(new, { zIndex: "auto" }, T + 0.5);
-```

package/dist/skills/hyperframes/references/transitions/css-scale.md

@@ -1,24 +0,0 @@
-## Scale / Zoom
-
-### Zoom Through
-
-Old zooms past camera + blurs, new zooms in from behind.
-
-```js
-tl.to(old, { scale: 2.5, opacity: 0, filter: "blur(8px)", duration: 0.4, ease: "power3.in" }, T);
-tl.fromTo(new,
-  { scale: 0.5, opacity: 0, filter: "blur(8px)" },
-  { scale: 1, opacity: 1, filter: "blur(0px)", duration: 0.4, ease: "power3.out" }, T + 0.15);
-```
-
-### Zoom Out
-
-Old shrinks away, new was behind it. Needs z-index management.
-
-```js
-tl.set(new, { opacity: 1, zIndex: 1 }, T);
-tl.set(old, { zIndex: 10, transformOrigin: "50% 50%" }, T);
-tl.to(old, { scale: 0.3, opacity: 0, duration: 0.4, ease: "power3.in" }, T);
-tl.set(old, { zIndex: "auto" }, T + 0.4);
-tl.set(new, { zIndex: "auto" }, T + 0.4);
-```

package/dist/skills/hyperframes/references/transitions.md

@@ -1,138 +0,0 @@
-# Scene Transitions
-
-A transition tells the viewer how two scenes relate. A crossfade says "this continues." A push slide says "next point." A blur crossfade says "drift with me." Choose transitions that match what the content is doing emotionally, not just technically.
-
-## Animation Rules for Multi-Scene Compositions
-
-These are non-negotiable for every multi-scene composition:
-
-1. **Every composition uses transitions.** No exceptions. Scenes without transitions feel like jump cuts.
-2. **Every scene uses entrance animations.** Elements animate IN via `gsap.from()` — opacity, position, scale, etc. No scene should pop fully-formed onto screen.
-3. **Exit animations are BANNED** except on the final scene. Do NOT use `gsap.to()` to animate elements out before a transition fires. The transition IS the exit. Outgoing scene content must be fully visible when the transition starts — the transition handles the visual handoff.
-4. **Final scene exception:** The last scene MAY fade elements out (e.g., fade to black at the end of the composition). This is the only scene where exit animations are allowed.
-
-## Energy → Transition Character
-
-The energy of a beat tells you what motion character the transition should have — not which specific transition to use. The motion character is a quality you derive from the brand and content, then find a transition that has that quality.
-
-**Soft/organic character:** transitions that breathe, dissolve, or drift. Nothing sharp, mechanical, or percussive. Duration 0.5–0.8s, smooth easing curves.
-
-**Directional/purposeful character:** transitions that move content decisively. Clear direction, readable momentum. Duration 0.3–0.5s, clean deceleration.
-
-**Percussive/instant character:** transitions that hit like a cut. Immediate, almost hard-cut energy. Duration 0.15–0.3s, aggressive or near-instant easing.
-
-These are calibration ranges, not recipes. A brand that treats its "high energy" section with restraint might use 0.4s for a moment that another brand transitions in 0.2s — both are correct for their brand. Pick ONE character that defines the video's primary transitions, then use 1–2 contrasting moments as intentional accents. See the **Mood → Motion Quality** section below to find transitions with the right character for a given mood.
-
-## Mood → Motion Quality
-
-Think about what the transition _communicates_, not what it looks like. The question is: **what motion quality serves this mood?** Then find transitions that have that quality in the catalog (`transitions/catalog.md`).
-
-| Mood                     | Motion quality that fits                                                                    | Why                                                                                 |
-| ------------------------ | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
-| **Warm / inviting**      | Soft edges, dissolving, color-temperature washes — nothing sharp, mechanical, or percussive | Warmth reads as continuity and flow; hard cuts or compression feel cold             |
-| **Cold / clinical**      | Mechanical transformation — compression, slicing, gridding, precision                       | The content appears to be processed or structured, reinforcing a systematic quality |
-| **Editorial / magazine** | Clean directional movement — like turning a page                                            | Feels like content is being browsed or curated, not revealed                        |
-| **Tech / futuristic**    | Data-like fragmentation, digital displacement, scan artifacts                               | Transition feels computational rather than physical                                 |
-| **Tense / edgy**         | Instability, distortion, displacement — something slightly wrong about the image            | Introduces friction where smooth transitions would release tension                  |
-| **Playful / fun**        | Overshoot, expansion, rotation — motion with personality and bounce                         | Transitions that feel like objects rather than effects                              |
-| **Dramatic / cinematic** | Scale, weight, light extremes — the cut is an event, not a bridge                           | Every shader and every hard cut carries narrative gravity                           |
-| **Premium / luxury**     | Restraint — transitions that are barely visible, or invisible                               | Luxury communicates through what it withholds                                       |
-| **Retro / analog**       | Organic imperfection — light bleed, scan lines, color wash                                  | Physical film artifacts; imperfection as authenticity                               |
-
-Use this table to derive what **quality** the transition should have, then look at the specific options in `transitions/catalog.md` to find one that has that quality for this brand. The transitions listed in the catalog are all available; none are reserved for a specific mood.
-
-## Narrative Position
-
-Each position in the video has a different job to do. What transition you pick for each should come from the brand's motion character and the storyboard's intent — not from a rule about "climax = boldest."
-
-- **Opening** — establishes the motion language for the entire video. Make a deliberate choice; whatever you pick here sets the viewer's expectation for everything that follows.
-- **Between related points** — should be almost invisible. The content is continuing; the transition shouldn't draw attention to itself. Consistency matters more than distinctiveness here.
-- **Topic change** — needs enough contrast from your primary that it signals "something different is starting." The contrast is in motion character, not just duration.
-- **Climax / hero reveal** — this is the moment the video has been building to. The transition should feel earned by what came before. "Use your boldest transition here" is a default, not a rule — the climax of a restrained editorial piece might be a hard cut.
-- **Wind-down** — returns to a motion character that allows the viewer to exhale. Matches the opening in tone, not necessarily in technique.
-- **Outro** — no new energy. Slowest and simplest in the video. Closure.
-
-## Blur and Motion Intensity
-
-Blur and duration should express the energy of the content, not match a lookup table. The ranges below are calibration references — starting points to adjust from based on what the brand and storyboard call for.
-
-Higher-energy transitions: shorter duration, less blur, no hold at peak. The motion is immediate.
-Lower-energy transitions: longer duration, more blur, longer hold at peak. The motion has weight.
-
-Calibration ranges (not prescriptions):
-
-- Soft/organic: blur 20–30px, duration 0.8–1.2s, hold 0.3–0.5s
-- Directional/purposeful: blur 8–15px, duration 0.4–0.6s, hold 0.1–0.2s
-- Percussive/instant: blur 3–6px, duration 0.2–0.3s, no hold
-
-A brand that uses these as a formula will produce transitions that feel the same across every video. A brand-derived choice asks: what blur and duration expresses the weight this transition should have?
-
-## Presets
-
-| Preset     | Duration | Easing            |
-| ---------- | -------- | ----------------- |
-| `snappy`   | 0.2s     | `power4.inOut`    |
-| `smooth`   | 0.4s     | `power2.inOut`    |
-| `gentle`   | 0.6s     | `sine.inOut`      |
-| `dramatic` | 0.5s     | `power3.in` → out |
-| `instant`  | 0.15s    | `expo.inOut`      |
-| `luxe`     | 0.7s     | `power1.inOut`    |
-
-## Implementation
-
-Read [transitions/catalog.md](transitions/catalog.md) for GSAP code and hard rules for every transition type.
-
-| Category    | CSS                                                            | Shader (WebGL)                                                            |
-| ----------- | -------------------------------------------------------------- | ------------------------------------------------------------------------- |
-| Push/slide  | Push slide, vertical push, elastic push, squeeze               | Whip pan                                                                  |
-| Scale/zoom  | Zoom through, zoom out, gravity drop, 3D flip                  | Cinematic zoom, gravitational lens                                        |
-| Reveal/mask | Circle iris, diamond iris, diagonal split, clock wipe, shutter | SDF iris                                                                  |
-| Dissolve    | Crossfade, blur crossfade, focus pull, color dip               | Cross-warp morph, domain warp                                             |
-| Cover       | Staggered blocks, horizontal blinds, vertical blinds           | —                                                                         |
-| Light       | Light leak, overexposure burn, film burn                       | Light leak (shader), thermal distortion                                   |
-| Distortion  | Glitch, chromatic aberration, ripple, VHS tape                 | Glitch (shader), chromatic split, ridged burn, ripple waves, swirl vortex |
-| Pattern     | Grid dissolve, morph circle                                    | —                                                                         |
-
-## Transitions That Don't Work in CSS
-
-Avoid: star iris, tilt-shift, lens flare, hinge/door. See catalog.md for why.
-
-## CSS vs Shader
-
-CSS transitions animate scene containers with opacity, transforms, clip-path, and filters. Shader transitions composite both scene textures per-pixel on a WebGL canvas — they can warp, dissolve, and morph in ways CSS cannot.
-
-**Both are first-class options.** Shaders are provided by the `@hyperframes/shader-transitions` package — import from the package instead of writing raw GLSL. CSS transitions are simpler to set up. Choose based on the effect you want, not based on which is easier.
-
-**Mixing is supported.** You can have some transitions use WebGL shaders and others use a CSS crossfade in the same composition. Omit the `shader` field on any `TransitionConfig` entry to get a smooth opacity crossfade instead of a WebGL effect:
-
-```js
-var tl = HyperShader.init({
-  bgColor: "#000",
-  accentColor: "#6366f1",
-  scenes: ["s1", "s2", "s3", "s4"],
-  transitions: [
-    { time: 4.0, shader: "sdf-iris", duration: 0.7 }, // WebGL shader
-    { time: 8.5, duration: 0.8 }, // no shader → CSS crossfade
-    { time: 13.0, shader: "domain-warp", duration: 0.6 }, // WebGL shader
-  ],
-});
-```
-
-HyperShader manages all scene visibility regardless of transition type. Let it create the timeline (don't pass `timeline:` into `init()`) and add your beat animations to the returned `tl` after the call.
-
-## Shader-Compatible CSS Rules
-
-Shader transitions capture DOM scenes to WebGL textures via html2canvas. The canvas 2D rendering pipeline doesn't match CSS exactly. Follow these rules to avoid visible artifacts at transition boundaries:
-
-1. **No `transparent` keyword in gradients.** Canvas interpolates `transparent` as `rgba(0,0,0,0)` (black at zero alpha), creating dark fringes. Always use the target color at zero alpha: `rgba(200,117,51,0)` not `transparent`.
-2. **No gradient backgrounds on elements thinner than 4px.** Canvas can't match CSS gradient rendering on 1-2px elements. Use solid `background-color` on thin accent lines.
-3. **No CSS variables (`var()`) on elements visible during capture.** html2canvas doesn't reliably resolve custom properties. Use literal color values in inline styles.
-4. **Mark uncapturable decorative elements with `data-no-capture`.** The capture function skips these. They're present on the live DOM but absent from the shader texture. Use for elements that can't follow the rules above.
-5. **No gradient opacity below 0.15.** Gradient elements below 10% opacity render differently in canvas vs CSS. Increase to 0.15+ or use a solid color at equivalent brightness.
-6. **Every `.scene` div must have explicit `background-color`, AND pass the same color as `bgColor` in the `init()` config.** The package captures scene elements via html2canvas. Both the CSS `background-color` on `.scene` and the `bgColor` config must match. Without either, the texture renders as black.
-
-These rules only apply to shader transition compositions. CSS-only compositions have no restrictions.
-
-## Visual Pattern Warning
-
-Avoid transitions that create visible repeating geometric patterns — grids of tiles, hexagonal cells, uniform dot arrays, evenly-spaced blob circles. These look cheap and artificial regardless of the math behind them. Organic noise (FBM, domain warping) is good because it's irregular. Geometric repetition is bad because the eye instantly sees the grid.

package/dist/skills/hyperframes/references/typography.md

@@ -1,175 +0,0 @@
-# Typography
-
-The compiler embeds supported fonts — just write `font-family` in CSS.
-
-## Banned
-
-Training-data defaults that every LLM reaches for. These produce monoculture across compositions.
-
-Inter, Roboto, Open Sans, Noto Sans, Arimo, Lato, Source Sans, PT Sans, Nunito, Poppins, Outfit, Sora, Playfair Display, Cormorant Garamond, Bodoni Moda, EB Garamond, Cinzel, Prata, Syne
-
-**Syne in particular** is the most overused "distinctive" display font. It is an instant AI design tell.
-
-## Guardrails
-
-You know these rules but you violate them. Stop.
-
-- **Don't pair two sans-serifs.** You do this constantly — one for headlines, one for body. Cross the boundary: serif + sans, or sans + mono.
-- **One expressive font per scene.** You pick two interesting fonts trying to make it "better." One performs, one recedes.
-- **Weight contrast must be extreme.** You default to 400 vs 700. Video needs 300 vs 900. The difference must be visible in motion at a glance.
-- **Video sizes, not web sizes.** Body: 20px minimum. Headlines: 60px+. Data labels: 16px. You will try to use 14px. Don't.
-
-## What You Don't Do Without Being Told
-
-- **Tension should mean something.** Don't pattern-match pairings. Ask WHY these two fonts disagree. The pairing should embody the content's contradiction — mechanical vs human, public vs private, institutional vs personal. If you can't articulate the tension, it's arbitrary.
-- **Register switching.** Assign different fonts to different communicative modes — one voice for statements, another for data, another for attribution. Not hierarchy on a page. Voices in a conversation.
-- **Tension can live inside a single font.** A font that looks familiar but is secretly strange creates tension with the viewer's expectations, not with another font.
-- **One variable changed = dramatic contrast.** Same letterforms, monospaced vs proportional. Same family at different optical sizes. Changing only rhythm while everything else stays constant.
-- **Double personality works.** Two expressive fonts can coexist if they share an attitude (both irreverent, both precise) even when their forms are completely different.
-- **Time is hierarchy.** The first element to appear is the most important. In video, sequence replaces position.
-- **Motion is typography.** How a word enters carries as much meaning as the font. A 0.1s slam vs a 2s fade — same font, completely different message.
-- **Fixed reading time.** 3 seconds on screen = must be readable in 2. Fewer words, larger type.
-- **Tracking tighter than web.** -0.03em to -0.05em on display sizes. Video encoding compresses letter detail.
-
-## Finding Fonts
-
-Don't default to what you know. If the content is luxury, a grotesque sans might create more tension than the expected Didone serif. Decide the register first, then search.
-
-Save this script to `/tmp/fontquery.py` and run with `curl -s 'https://fonts.google.com/metadata/fonts' > /tmp/gfonts.json && python3 /tmp/fontquery.py /tmp/gfonts.json`:
-
-```python
-import json, sys, random
-from collections import OrderedDict
-
-random.seed()  # true random each run
-
-with open(sys.argv[1]) as f:
-    data = json.load(f)
-fonts = data.get("familyMetadataList", [])
-
-ban = {"Inter","Roboto","Open Sans","Noto Sans","Lato","Poppins","Source Sans 3",
-       "PT Sans","Nunito","Outfit","Sora","Playfair Display","Cormorant Garamond",
-       "Bodoni Moda","EB Garamond","Cinzel","Prata","Arimo","Source Sans Pro","Syne"}
-skip_pfx = ("Roboto","Noto ","Google Sans","Bpmf","Playwrite","Anek","BIZ ",
-            "Nanum","Shippori","Sawarabi","Zen ","Kaisei","Kiwi ","Yuji ","Radio ")
-
-def ok(f):
-    if f["family"] in ban: return False
-    if any(f["family"].startswith(b) for b in skip_pfx): return False
-    if "latin" not in (f.get("subsets") or []): return False
-    return True
-
-seen = set()
-R = OrderedDict()
-
-# Trending Sans — recent (2022+), popular (<300)
-R["Trending Sans"] = []
-for f in fonts:
-    if not ok(f) or f["family"] in seen: continue
-    if f.get("category") in ("Sans Serif","Display") and f.get("dateAdded","") >= "2022-01-01" and f.get("popularity",9999) < 300:
-        R["Trending Sans"].append(f); seen.add(f["family"])
-
-# Trending Serif — recent (2018+), popular (<600)
-R["Trending Serif"] = []
-for f in fonts:
-    if not ok(f) or f["family"] in seen: continue
-    if f.get("category") == "Serif" and f.get("dateAdded","") >= "2018-01-01" and f.get("popularity",9999) < 600:
-        R["Trending Serif"].append(f); seen.add(f["family"])
-
-# Monospace — recent (2018+), popular (<600)
-R["Monospace"] = []
-for f in fonts:
-    if not ok(f) or f["family"] in seen: continue
-    if f.get("category") == "Monospace" and f.get("dateAdded","") >= "2018-01-01" and f.get("popularity",9999) < 600:
-        R["Monospace"].append(f); seen.add(f["family"])
-
-# Impact & Condensed — heavy display fonts with 800+ weight
-R["Impact & Condensed"] = []
-for f in fonts:
-    if not ok(f) or f["family"] in seen: continue
-    has_heavy = any(k in list(f.get("fonts",{}).keys()) for k in ("800","900"))
-    is_display = f.get("category") in ("Sans Serif","Display")
-    if has_heavy and is_display and f.get("popularity",9999) < 400:
-        R["Impact & Condensed"].append(f); seen.add(f["family"])
-
-# Script & Handwriting — popular (<300)
-R["Script & Handwriting"] = []
-for f in fonts:
-    if not ok(f) or f["family"] in seen: continue
-    if f.get("category") == "Handwriting" and f.get("popularity",9999) < 300:
-        R["Script & Handwriting"].append(f); seen.add(f["family"])
-
-
-# Randomize the top 5 in each category so the LLM doesn't always pick the same first result
-for cat in R:
-    R[cat].sort(key=lambda x: x.get("popularity",9999))
-    top5 = R[cat][:5]
-    rest = R[cat][5:]
-    random.shuffle(top5)
-    R[cat] = top5 + rest
-limits = {"Trending Sans":15,"Trending Serif":12,"Monospace":8,
-          "Impact & Condensed":12,"Script & Handwriting":10}
-for cat in R:
-    items = R[cat][:limits.get(cat,10)]
-    if not items: continue
-    print(f"--- {cat} ({len(items)}) ---")
-    for ff in items:
-        var = "VAR" if ff.get("axes") else "   "
-        print(f'  {ff.get("popularity"):4d} | {var} | {ff["family"]}')
-    print()
-```
-
-Five categories: trending sans, trending serif, monospace, impact/condensed, script/handwriting. All dynamically filtered from Google Fonts metadata — no hardcoded font names. Cross classification boundaries when pairing.
-
-## Selection Thinking
-
-Don't pick fonts by category reflex (editorial → serif, tech → mono, modern → geometric sans). That's pattern matching, not design.
-
-1. **Name the register.** What voice is the content speaking in? Institutional authority? Personal confession? Technical precision? Casual irreverence? The register narrows the field more than the category.
-2. **Think physically.** Imagine the font as a physical object the brand could ship — a museum exhibit caption, a hand-painted shop sign, a 1970s mainframe terminal manual, a fabric label inside a coat, a children's book printed on cheap newsprint, a tax form. Whichever physical object fits the register is pointing at the right _kind_ of typeface.
-3. **Reject your first instinct.** The first font that feels right is usually your training-data default for that register. If you picked it last time too, find something else.
-4. **Cross-check the assumption.** An editorial brief does NOT need a serif. A technical brief does NOT need a sans. A children's product does NOT need a rounded display font. The most distinctive choice often contradicts the category expectation.
-
-## Similar-Font Pairing
-
-Never pair two fonts that are similar but not identical — two geometric sans-serifs, two transitional serifs, two humanist sans. They create visual friction without clear hierarchy. The viewer senses something is "off" but can't articulate it. Either use one font at two weights, or pair fonts that contrast on multiple axes: serif + sans, condensed + wide, geometric + humanist.
-
-## Dark Backgrounds
-
-Light text on dark backgrounds creates two optical illusions you need to compensate for:
-
-- **Increased apparent weight.** Light-on-dark reads heavier than dark-on-light at the same `font-weight`. Use 350 instead of 400 for body text. Headlines are less affected because size compensates.
-- **Tighter apparent spacing.** Light halos around letterforms reduce perceived gaps. Increase `line-height` by 0.05-0.1 beyond your light-background value. For display sizes, add 0.01em `letter-spacing` to counteract.
-
-## OpenType Features for Data
-
-Most fonts ship with OpenType features that are off by default. Turn them on for data compositions:
-
-```css
-/* Tabular numbers — digits align vertically in columns */
-.stat-value,
-.timer,
-.data-column {
-  font-variant-numeric: tabular-nums;
-}
-
-/* Diagonal fractions — renders 1/2 as ½ */
-.recipe-amount,
-.ratio {
-  font-variant-numeric: diagonal-fractions;
-}
-
-/* Small caps for abbreviations — less visual shouting */
-.abbreviation,
-.unit {
-  font-variant-caps: all-small-caps;
-}
-
-/* Disable ligatures in code — fi, fl, ffi should stay separate */
-code,
-.code {
-  font-variant-ligatures: none;
-}
-```
-
-`tabular-nums` is essential any time numbers are stacked vertically — stat callouts, timers, scoreboards, data tables. Without it, digits have proportional widths and columns don't align.

package/dist/skills/hyperframes/references/video-composition.md

@@ -1,62 +0,0 @@
-# Video Composition
-
-Video frames are not web pages. These rules apply to every composition regardless of brand, style, or design spec.
-
-## The Design Spec Is Brand, Not Layout
-
-The design spec (`frame.md` or `design.md`) defines what the brand looks like: colors, fonts, personality, constraints. It does NOT define how to compose a video frame. Use brand colors at video-appropriate intensity — not at web-UI opacity.
-
-**Strict from the spec:** hex values (including background color), font families, weight relationships, Do's and Don'ts. If the user chose a light canvas, use a light canvas. If they chose dark, use dark. Do not override their palette.
-
-**Adapt for video:** type sizes, spacing, decorative opacity, border weight, component treatments. A web UI card at `border: 1px solid #e2e3e6` with `box-shadow: 0 2px 4px rgba(0,0,0,0.06)` is invisible on video. The brand color is sacred; the application is yours.
-
-## Density
-
-A beat with 3 elements looks empty. A beat with 8-10 feels alive.
-
-Every scene needs:
-
-- **Background texture** — radial glow, oversized ghost type, color panel, grain, grid. Never solid flat color.
-- **Midground content** — the actual message. Cards, stats, code blocks, images.
-- **Foreground accents** — dividers, labels, data bars, registration marks, monospace metadata. The details that make it feel produced, not generated.
-
-Aim for 8-10 visual elements per scene. Two of those should be decorative elements the user didn't ask for — you add them because empty frames look broken.
-
-## Color Presence
-
-Muted is fine. Flat is not. Every scene should have at least one color that pulls the eye.
-
-- Brand accent should be VISIBLE — not a 5% opacity glow lost in compression. 15-25% for atmospheric, full saturation for focal elements.
-- **Light canvases work differently than dark.** On dark: accent glows pop naturally. On light: use bolder borders (2px+ solid), stronger structural elements (rules, dividers), and full-saturation accent hits. Light backgrounds need texture (subtle grain, patterns) to avoid the "blank slide" feel. Don't switch to dark — make light cinematic.
-- Tint neutrals toward the brand hue. Dead gray reads as undesigned.
-
-## Scale
-
-Web sizes are invisible on video. Everything scales up.
-
-| Element            | Web     | Video    |
-| ------------------ | ------- | -------- |
-| Headlines          | 32-48px | 64-120px |
-| Body text          | 14-16px | 28-42px  |
-| Labels             | 12px    | 18-24px  |
-| Decorative opacity | 3-8%    | 12-25%   |
-| Borders            | 1px     | 2-4px    |
-| Padding            | 16-32px | 60-140px |
-
-If you're writing a font-size under 24px in a video composition, justify it. If you're writing decorative opacity under 10%, it's invisible.
-
-## Motion Intensity
-
-Subtle reads as static at 30fps. Err toward more movement than feels safe.
-
-- Every decorative element should have ambient motion: breathe, drift, pulse, orbit. Static decoratives feel dead.
-- Vary motion per scene — don't repeat the same ambient pattern.
-- Scene entrances should use 3+ different eases and directions. If every element enters from `y: 30, opacity: 0`, the scene has no choreography.
-
-## Frame Composition
-
-- **Two focal points minimum.** The eye needs somewhere to travel.
-- **Fill the frame.** Hero text: 60-80% of frame width.
-- **Anchor to edges.** Pin content to left/top or right/bottom. Centered-and-floating is a web layout pattern.
-- **Split frames.** Data panel left, content right. Top bar with metadata, full-width below. Zone-based layouts over centered stacks.
-- **Structural elements.** Rules, dividers, border panels. They create visual paths and animate well (`scaleX: 0` → `1`).