Skill 18 · Hyperframes Animation
Subchapter 18.41
blueprints/video-text-pivot.mdMarkdown3 KBView on GitHub
intent: A product video holds center and claims attention, then slides aside to hand its weight to a hero stat in the space it vacates, then both clear and kinetic text types into the center — accent words carrying the meaning the video used to carry — sealed by a gradient pill. The arc is “show → yield → pivot → stamp,” and each handoff pairs an exit with a same-anchor entrance so two beats read, not four.
roles served
metric-video-text-pivot): when the open is “see the feature” then “see the impact” and the [product video] must stay visible through the stat reveal — it slides, it doesn’t cut.duration: 6–8s
shot structure (a [bg] canvas; one [product video] as a real muted .mp4 clip, a hero stat, then kinetic text — each pair shares a screen anchor so the handoff reads as a weight-transfer)
[product video] lands centered on a smooth scale-up and breathes (a small y-bob), claiming full attention. Camera static.[hero stat] now fills as the stat pops in with 3D-depth type — one weight-transfer reading as a single event, not two. The stat breathes within this window.[impact text] TYPES into the vacated center, character by character; its [accent words] carry the meaning the video used to carry.[pill] snaps shut around the closing line (scaleX 0→1), its glow halo resolving a beat behind so the silhouette reads before the bloom — sealing the statement as one graphic. Holds.motion vocabulary: video scale-in + small breath; weight-transfer slide (video x + scale-down handing off to the stat at the same anchor); 3D-depth stat type; character-stream typing; gradient pill scaleX-snap; glow-halo bloom trailing the silhouette.
rule mapping
gsap-effects (scale/opacity then x + scale on a long-tail power3); the video itself is a muted <video class="clip"> direct child of the root3d-text-depth-layers (static-depth variation — layers built at setup, no cascade fighting the entry)scale-swap-transition (shared center)dynamic-content-sequencing (clean character stream) or discrete-text-sequencescaleX snap + trailing glow halo → gsap-effects (scaleX) + ambient-glow-bloom (the halo, resolving a beat behind)sine-wave-loop (low-amplitude register — subtle jitter, gated to each element’s window, never a forever loop)camera modifier: camera-static — all motion is element-space (the video translates), so the “pivot” is the elements moving, not a camera.