mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 07:19:52 +00:00
WaterrrForever
853256403b
* feat(skills): c2v mining pass over animation blueprints and rules Compacts ~45 existing animation rules/blueprints into tighter recipe form (net -3.4k lines) and adds 17 mined from the c2v corpus: - 7 blueprints: agent-progress-theater, camera-journey, fixed-anchor-cycle, panel-edit-live-sync, prompt-type-submit-generate, transcript-scroll-artifact-reveal, zoom-out-workspace-reveal - 10 rules: 3d-camera-flight, anchored-layout-expand, chart-scrub-readout, chromatic-glitch, control-target-sync, cursor-drag, gradient-text-sweep, multi-cursor-choreography, particle-burst, theme-crossfade-morph Both indexes updated. * feat(skills): sync product-launch script bank with mined blueprint roles The role->blueprint script bank in product-launch-video/story-design.md is kept 1:1 with blueprints-index role declarations, which the c2v mining pass expanded. Adds the 25 missing entries (script-shape descriptor + example lines + pattern): 13 for the 7 new blueprints, 12 for role widenings on 7 existing ones (cursor-ui-demo, dataviz-countup, titlecard-reveal, et al.), and states the 1:1 sync contract in the bank's intro. * docs(skills): cover constellation-hub scatter-drift variant in the script bank Review follow-up on #2680: the SOCIAL_PROOF constellation-hub entry patterned only the orbit shape; the c2v pass added a scatter-drift end-card variant with the opposite geometry (no hub, no ring). Adds an example line and extends the pattern so a scatter-drift beat's VO isn't steered toward the orbit shape.
135 lines
7.2 KiB
Markdown
135 lines
7.2 KiB
Markdown
---
|
||
name: card-morph-anchor
|
||
description: Container morphs dimensions and border-radius between shots, serving as a visual transition anchor.
|
||
metadata:
|
||
tags: morph, anchor, transition, border-radius, container, shape
|
||
---
|
||
|
||
# Card Morph Anchor
|
||
|
||
A free-floating container morphs apparent size, corner radius, and surface treatment between two shots — the morph itself IS the transition; the viewer's eye tracks the persistent container. Distinct from [anchored-layout-expand.md](anchored-layout-expand.md) (an edge-pinned live layout participant that grows along one axis and reflows neighbors — here nothing is pushed) and [theme-crossfade-morph.md](theme-crossfade-morph.md) (a whole-theme reskin under a fixed anchor — here a single container changes shape).
|
||
|
||
## How It Works
|
||
|
||
Since `width`/`height` tweens are forbidden, **substitute uniform `scale` for apparent size**; the remaining morph channels are **paint-only**: `borderRadius`, `background`, `boxShadow`. All channels ride ONE tween (one ease, one duration) so the shape morphs in lockstep. Content choreography: old content fades out during the first ~40% of the morph, new content fades in during the last ~40% — the shape-only gap between is the natural "blink." Optionally the morph card itself fades at the very end, revealing the real next-shot element rendered behind it.
|
||
|
||
## Recipe
|
||
|
||
```html
|
||
<!-- inside a standard scene clip (hyperframes-core) -->
|
||
<!-- DOM order = stacking: the anchor renders BEFORE the card, so the card is on top -->
|
||
<div class="next-shot-anchor"><img src="{nextShotAnchor}" alt="anchor" /></div>
|
||
<div class="morph-card">
|
||
<div class="content-old">{shotOneContent}</div>
|
||
<div class="content-new">{shotTwoContent}</div>
|
||
</div>
|
||
```
|
||
|
||
```css
|
||
.morph-card {
|
||
width: SHOT_ONE_W;
|
||
height: SHOT_ONE_H; /* shot-1 geometry; the morph is scale, never width/height */
|
||
border-radius: SHOT_ONE_RADIUS;
|
||
background: {surfaceShotOne};
|
||
overflow: hidden; /* content must clip during the shape change */
|
||
display: grid;
|
||
place-items: center;
|
||
will-change: transform;
|
||
}
|
||
.content-old,
|
||
.content-new {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: grid;
|
||
place-items: center;
|
||
}
|
||
.content-new {
|
||
opacity: 0; /* author its inner sizes at apparent-size ÷ END_SCALE — it scales with the card */
|
||
}
|
||
.next-shot-anchor {
|
||
position: absolute;
|
||
opacity: 0; /* fades in as the morph card fades out */
|
||
}
|
||
```
|
||
|
||
```js
|
||
const END_SCALE = SHOT_TWO_W / SHOT_ONE_W; // uniform — keep the two shots aspect-matched
|
||
|
||
// Hold shot 1 for HOLD_BEAT first — an instant morph reads as glitchy.
|
||
|
||
// One tween, all channels: uniform scale + paint-only properties.
|
||
tl.to(
|
||
".morph-card",
|
||
{
|
||
scale: END_SCALE,
|
||
borderRadius: SHOT_TWO_RADIUS / END_SCALE, // borderRadius is pre-scale — divide to land the APPARENT radius
|
||
background: "{surfaceShotTwo}",
|
||
boxShadow: "{shadowShotTwo}",
|
||
duration: MORPH_DUR,
|
||
ease: "power2.inOut",
|
||
},
|
||
MORPH_START,
|
||
);
|
||
|
||
tl.to(
|
||
".content-old",
|
||
{ opacity: 0, duration: MORPH_DUR * OLD_FADE_FRAC, ease: "power1.in" },
|
||
MORPH_START,
|
||
);
|
||
tl.to(
|
||
".content-new",
|
||
{ opacity: 1, duration: MORPH_DUR * NEW_FADE_FRAC, ease: "power1.out" },
|
||
MORPH_START + MORPH_DUR * (1 - NEW_FADE_FRAC),
|
||
);
|
||
|
||
// Optional handoff — card fades out over the pixel-identical real anchor.
|
||
tl.to(
|
||
".morph-card",
|
||
{ opacity: 0, duration: MORPH_DUR * FINAL_FADE_FRAC, ease: "power1.in", immediateRender: false },
|
||
MORPH_START + MORPH_DUR * (1 - FINAL_FADE_FRAC),
|
||
);
|
||
tl.to(
|
||
".next-shot-anchor",
|
||
{ opacity: 1, duration: MORPH_DUR * FINAL_FADE_FRAC, ease: "power1.out" },
|
||
MORPH_START + MORPH_DUR * (1 - FINAL_FADE_FRAC),
|
||
);
|
||
```
|
||
|
||
## Morph channels
|
||
|
||
| channel | how |
|
||
| -------------- | ---------------------------------------------------------------------------------------------- |
|
||
| apparent size | uniform `scale` — the substitution for the forbidden `width`/`height` tween; aspect preserved |
|
||
| `borderRadius` | paint-only; pre-scale units — tween to `APPARENT_RADIUS / END_SCALE`, ≤ half the smaller side |
|
||
| `background` | paint-only; gradients interpolate only with equal stop counts (solid→solid: `backgroundColor`) |
|
||
| `boxShadow` | paint-only; base shadow → accent glow shifts emphasis |
|
||
|
||
## Variations
|
||
|
||
- **Landing on a non-centered target** (dock icon, sidebar slot): add `x`/`y` to the same tween, computed as the FLIP-style delta between the card's and the target's rects — `getBoundingClientRect()` both at build time (single-scene only, per the contract) and tween the difference. Don't hand-compute from CSS values: paddings, borders, and parent transforms compound, and center-vs-edge arithmetic is the classic off-by-half bug.
|
||
- **Aspect change between shots**: uniform scale preserves aspect — morph to the nearest uniform fit and let the crossfade/handoff absorb the small delta, or drop the handoff and hold the card's final state.
|
||
|
||
## Values
|
||
|
||
| token | range | notes |
|
||
| ----------------- | ------------------------- | ------------------------------------------------------------------------------------ |
|
||
| HOLD_BEAT | 0.6–1.5s | ≥ shot 1's entry settle; the viewer must register shot 1 first |
|
||
| MORPH_DUR | 0.6–1.2s | < 0.5s can't fit both content fades |
|
||
| END_SCALE | SHOT_TWO_W / SHOT_ONE_W | icon-sized handoffs typically land at 80–400px apparent width |
|
||
| SHOT_TWO_RADIUS | ≤ min(W, H)/2 apparent | half the smaller side = perfect circle; beyond is clamped |
|
||
| OLD/NEW_FADE_FRAC | 0.3–0.5 each, sum ≤ 1 | the gap between is the shape-only "blink" |
|
||
| FINAL_FADE_FRAC | 0 (no handoff) or 0.1–0.2 | only when a pixel-identical anchor exists |
|
||
| ease | `power2.inOut` canonical | `power3`/`expo.inOut` OK; never `back`/`elastic` — overshoot fights the shape change |
|
||
|
||
## Critical Constraints
|
||
|
||
- **❗ Uniform-scale substitution** — never tween `width`/`height`; `scale` + the paint-only channels (`borderRadius`, `background`, `boxShadow`) are the ONLY morph properties.
|
||
- **❗ Handoff anchor must be pixel-identical to the card's final state** — same apparent size, radius, background, shadow, inner icon dimensions. Any delta = a visible pop during the crossfade. Can't match exactly? Drop the handoff and hold the morph card.
|
||
- **❗ Stacking by DOM order, never a z-index snap mid-fade** — render the anchor before the card; a `tl.set({ zIndex })` during an active opacity tween flips stacking before the fade finishes and flickers.
|
||
- **`overflow: hidden`** on the card — content must clip as the radius changes.
|
||
- **Hold a beat before morphing**; same ease family for shape and crossfade (mixed eases read unsynchronized).
|
||
|
||
## See also
|
||
|
||
`anchored-layout-expand` (edge-pinned one-axis growth with reflow) · `theme-crossfade-morph` (whole-theme reskin under a fixed anchor) · `scale-swap-transition` (content swap without shape change) · `sine-wave-loop` (a breath on the final state).
|