* feat(skills): product-launch-video + consolidate motion knowledge into hyperframes-animation
- Add the product-launch-video skill: shot-sequence architecture where each
visual frame is a time-coded shot sequence picked from a blueprint menu and
paced to the voiceover (anti-PowerPoint). Includes the frame-worker sub-agent,
story/visual/motion-design references, and audio/captions/transitions/
stage-assets/assemble-index scripts.
- Consolidate motion knowledge in hyperframes-animation as the single source of
truth: promote the updated atomic rules (31 -> 36) and rename product-launch-
video's archetypes into hyperframes-animation blueprints (13 -> 15, replacing
the old set). product-launch-video, faceless-explainer, and pr-to-video now
reference them via ../hyperframes-animation/{rules-index,blueprints-index}.md
and the rules/blueprints dirs. Fixes the discrete-text-sequence broken links;
blueprints no longer ship per-id runnable examples, so example references in
the consumers were dropped.
- Default HeyGen TTS voice to Marcia (deterministic; was the API's first English
voice, which drifts on catalog re-sort). Override with --voice.
- assemble-index pre-assembly frame guards: auto-repair a sub-comp root missing
canvas dims; hard-fail on <video>/<audio> inside a sub-comp; hard-fail on a
timed non-root element missing class="clip" or overlapping same-track clips.
- Lint/CLI: lint media inside sub-compositions as an error; stop false-positive
caption layout/lint findings; contrast/layout-audit skip elements hidden by an
invisible ancestor.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* fix(skills): clear CodeQL alerts in assemble-index.mjs
- script/style blanking regex now matches closing tags with trailing
whitespace (</script >, </style >) — js/bad-tag-filter (high).
- drop the existsSync precheck before reading/repairing a frame file; read
directly and handle ENOENT, removing the check->write TOCTOU window —
js/file-system-race (high).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
3.2 KiB
overwhelm-surround — Overwhelm / Close-In
intent: Convey overwhelm by accumulation. Recognizable subjects assemble, density markers scatter in to amplify "look how much," then the central subject morphs into the viewer's own avatar and elements close in from ALL sides — the frame feels surrounded, not zoomed-into. The emotional arc is recognition → claustrophobia.
roles served
- Problem (from
problem-mockup-overwhelm): when the problem beat must first show "too many tools / too much surface area" and then put the viewer inside it — a literal swap of subject (product → person) followed by a closing-in that feels invasive. Reach for it when the pain is "you're buried," not "this metric is bad" (that'sdataviz-countup).
duration: 6–9s
shot structure (a [bg] canvas; recognizable surfaces first, the viewer's avatar revealed underneath, then a radial crowd)
- Scene 1 (0.0–~1.6s) — recognizable assembly. Three
[product mockups / surfaces]assemble into something the viewer knows — staggered scale-in, the center one full-size, the two flanks smaller (~0.86). Each rides a low-amplitude float so they feel like live context, not a static collage. Camera static. - Scene 2 (~1.6–3.0s) — density amplifies.
[platform icons / logos]scatter in around the mockups (staggered), used purely as density markers — "look how much surface area," not animated dials. - Scene 3 (~3.0–4.6s) — the morph (signature move). The CENTER mockup MORPHS: its content fades out, the container reshapes, and the viewer's
[avatar]is revealed underneath — a literal swap of subject, product → person. - Scene 4 (~4.6–end) — close-in.
[task bubbles / demands]close in from ALL sides toward the avatar (radial staggered entry). The avatar stays put while the bubbles invade — the claustrophobia comes from being surrounded, never from a camera push. Holds on the crowded state.
motion vocabulary: staggered scale-in assembly; resting-scale-preserving low float; density-marker icon scatter; content-fade → container-reshape → reveal-anchor-beneath morph; radial close-in entry from all compass points; held crowded end-state.
rule mapping
- staggered mockup + icon entries (smooth settle onto their resting scale) →
spring-pop-entrance(smooth-settle register) backed bygsap-effects - platform icons as density markers (positions pre-baked, scale/opacity only — NOT internal-parts animation) →
svg-icon-enrichment(its DOM contract only) - center mockup → avatar morph (HF forbids
width/heighttweens → drive the reshape onscaleX/scaleY, anchor = the avatar layer rendered beneath) →card-morph-anchor - radial bubble close-in (positions baked once via
cos/sin, staggered entry) →gsap-effects(radial layout) +spring-pop-entrance(per-bubble arrival) - low-amplitude float on background mockups/icons →
sine-wave-loop(low-amplitude register — subtle jitter that composes onto each element's resting scale, never afromToyoyo that re-tweens to its start)
camera modifier: camera-static — the close-in must read as the world crowding the subject, so the frame holds; a push-in would convert "surrounded" into "zoomed-into" and kill the claustrophobia.