Files
hyperframes/skills/hyperframes-animation/blueprints/overwhelm-surround.md
T
WaterrrForeverandClaude Opus 4.8 05af482f22 feat(skills): product-launch-video skill + consolidate motion knowledge into hyperframes-animation (#1745)
* 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>
2026-06-27 02:51:35 +08:00

3.2 KiB
Raw Blame History

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's dataviz-countup).

duration: 69s

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.63.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.04.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.6end) — 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 by gsap-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/height tweens → drive the reshape on scaleX/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 a fromTo yoyo 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.