ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-11 14:50:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(skills): c2v mining pass — 7 new blueprints, 10 new rules, compacted recipe corpus (#2680)

Browse Source 
* 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.
This commit is contained in:
WaterrrForever
2026-07-21 17:28:55 +08:00
committed by GitHub
parent 8f171433f9
commit 853256403b
68 changed files with 4911 additions and 8179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/hyperframes-animation/rules/hacker-flip-3d.md
+73 -173
View File
@@ -7,217 +7,117 @@ metadata:
# Hacker Flip 3D Reveal
Characters flip down from 90° in 3D while cycling through random glyphs, then settle on the target character. Creates a "decryption" or airport flap-display reveal.
Characters flip down from 90° in 3D while cycling through pseudo-random glyphs, then settle on the target character — a "decryption" / airport flap-display reveal. Resolves to a short target word (typically a brand or label).
## How It Works
Each character gets its own per-char tween from `rotateX: 90deg` (hidden) to `rotateX: 0deg` (revealed), staggered across the word. During the flip:
Each character gets its own per-char tween from `rotateX: 90deg` (hidden, hinged at the bottom edge) to `0deg` (upright), staggered across the word. Below `REVEAL_THRESHOLD` progress the char displays a seeded pseudo-random glyph that reshuffles every few frames; past it, the real target character clicks into place — so the eye catches the right letter just as the flip settles. A hidden ghost copy of the full word reserves layout width so narrow flicker glyphs never shift the line.
1. **Phase A (0 → ~`REVEAL_THRESHOLD` progress)**: character displays a randomly-substituted glyph that flickers (changes every `FLICKER_RATE` frames)
2. **Phase B (`REVEAL_THRESHOLD` → 1.0 progress)**: character displays the REAL target character, settling into its final upright position
The `REVEAL_THRESHOLD` separates "scrambled" from "revealed" — by the time the flip is mostly done, viewer sees the correct letter clicking into place.
## HTML
## Recipe
```html
<div
class="scene"
id="hacker-flip-scene"
data-composition-id="hacker-flip-scene"
data-start="0"
data-duration="3"
data-track-index="0"
>
<div class="hacker-text-wrap" id="hacker-text" data-target="{phrase}">
<!-- Per-char spans get injected by setup script below.
Ghost placeholder (data-ghost) is rendered identically to reserve width. -->
</div>
<!-- inside a standard scene clip (hyperframes-core) -->
<div class="hacker-text-wrap" id="hacker-text" data-target="{phrase}">
<!-- ghost row + per-char spans injected by the setup script -->
</div>
```
`{phrase}` is the target word the flip resolves to (typically a brand or short label).
## CSS
```css
.scene {
position: relative;
width: 100%;
height: 100%;
display: grid;
place-items: center;
background: {bgColor};
perspective: 1500px; /* REQUIRED — without this rotateX renders flat */
}
/* the scene root (or nearest 3D ancestor) MUST set perspective: 1500px */
.hacker-text-wrap {
font-family: {monoFont}; /* monospace recommended so flicker glyphs hold width */
font-family: {monoFont}; /* monospace so flicker glyphs hold width */
font-weight: 900;
font-size: HACKER_FONT_SIZE;
color: {textColor};
letter-spacing: 4px;
display: flex;
/* Ghost / live chars are absolutely stacked; container reserves layout width */
position: relative;
position: relative; /* ghost stacks absolutely behind the live row */
}
.hacker-char {
display: inline-block;
/* Hinge at the bottom edge — flap-display look */
transform-origin: bottom;
transform-origin: bottom; /* flap-display hinge */
transform-style: preserve-3d;
/* Will-change improves render perf */
will-change: transform, opacity;
}
/* Ghost placeholder is hidden but reserves width for variable-glyph fonts.
Without this, narrow target glyphs collapse width when displayed and
characters shift horizontally during flicker. */
.hacker-ghost {
opacity: 0;
pointer-events: none;
position: absolute;
inset: 0 auto auto 0;
}
```
## GSAP Timeline + Random Glyph Logic
```js
const wrap = document.getElementById("hacker-text");
const targetWord = wrap.dataset.target;
const GLYPHS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%&*";
```html
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script>
window.__timelines = window.__timelines || {};
// Ghost row (reserves width) + live per-char spans
const ghost = document.createElement("div");
ghost.className = "hacker-ghost";
ghost.textContent = targetWord;
wrap.appendChild(ghost);
const charEls = [...targetWord].map((ch) => {
const span = document.createElement("span");
span.className = "hacker-char";
span.textContent = ch === " " ? " " : ch;
span.dataset.target = ch;
wrap.appendChild(span);
return span;
});
const wrap = document.getElementById("hacker-text");
const targetWord = wrap.dataset.target;
const GLYPHS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%&*";
// Index-seeded hash — same frame always yields the same glyph
function pseudoGlyph(seed) {
const h = ((seed * 9301 + 49297) % 233280) / 233280;
return GLYPHS[Math.floor(h * GLYPHS.length)];
}
// Build live chars + ghost placeholders (ghost keeps layout width stable)
wrap.innerHTML = "";
const ghostRow = document.createElement("div");
ghostRow.className = "hacker-ghost";
ghostRow.style.display = "inline-flex";
ghostRow.style.position = "absolute";
ghostRow.style.left = "0";
ghostRow.style.top = "0";
ghostRow.textContent = targetWord;
wrap.appendChild(ghostRow);
const charEls = [];
const liveRow = document.createElement("div");
liveRow.style.display = "inline-flex";
liveRow.style.position = "relative";
for (const ch of targetWord) {
const span = document.createElement("span");
span.className = "hacker-char";
span.textContent = ch === " " ? " " : ch;
span.dataset.target = ch;
liveRow.appendChild(span);
charEls.push(span);
}
wrap.appendChild(liveRow);
// Deterministic "random" — seeded by char index + frame group so the same
// frame always yields the same glyph (HF seek determinism).
function pseudoGlyph(seed) {
const h = ((seed * 9301 + 49297) % 233280) / 233280;
return GLYPHS[Math.floor(h * GLYPHS.length)];
}
const tl = gsap.timeline({ paused: true });
// Per-char flip — stagger across the word
charEls.forEach((el, i) => {
const state = { p: 0 };
tl.to(
state,
{
p: 1,
duration: FLIP_DURATION,
ease: "power3.out",
onUpdate: () => {
// Phase A: random glyph flickering. Phase B: real character.
const progress = state.p;
if (progress < REVEAL_THRESHOLD) {
// Update glyph every FLICKER_RATE worth of progress
const flickerSeed = i * 1000 + Math.floor(progress * 100);
el.textContent = pseudoGlyph(flickerSeed);
} else {
el.textContent = el.dataset.target === " " ? " " : el.dataset.target;
}
// Flip rotateX from 90 (down) to 0 (upright)
const rotateX = 90 - progress * 90;
const opacity = Math.min(1, progress * 2);
el.style.transform = `rotateX(${rotateX}deg)`;
el.style.opacity = opacity;
},
charEls.forEach((el, i) => {
const state = { p: 0 };
tl.to(
state,
{
p: 1,
duration: FLIP_DURATION,
ease: "power3.out",
onUpdate: () => {
if (state.p < REVEAL_THRESHOLD) {
el.textContent = pseudoGlyph(i * 1000 + Math.floor(state.p * 100));
} else {
el.textContent = el.dataset.target === " " ? " " : el.dataset.target;
}
el.style.transform = `rotateX(${90 - state.p * 90}deg)`;
el.style.opacity = Math.min(1, state.p * 2);
},
i * CHAR_STAGGER,
);
});
window.__timelines["hacker-flip-scene"] = tl;
</script>
},
i * CHAR_STAGGER,
);
});
```
## How to Choose Values
- **HACKER_FONT_SIZE** — font-size of the flip text in px.
- Range: 6-10% of viewport min-dimension; the flip text is the focal beat, scale accordingly
- Constraints: ghost row must use the identical size so layout width stays stable mid-flicker
- Reference: ../../examples/proof-logo-chain.html uses `163px` at 1920×1080
- **FLIP_DURATION** — per-character flip tween duration.
- Range: 0.4-1.0s; under 0.4s the random-glyph phase has no time to flicker, over 1.0s drags
- Effects: shorter feels snappy and modern; longer feels mechanical / typewriter
- Reference: ../../examples/proof-logo-chain.html uses `0.55s`
- **CHAR_STAGGER** — delay between consecutive characters starting their flips, in seconds.
- Range: 0.03-0.08s; too fast and chars overlap visually, too slow and the effect feels labored
- Constraints: total decode time = `CHAR_STAGGER × (charCount − 1) + FLIP_DURATION`; ensure this fits the phase budget
- Reference: ../../examples/proof-logo-chain.html uses `0.033s` (≈2 frames at 60fps)
- **REVEAL_THRESHOLD** — progress at which a glyph swaps from random → real.
- Range: 0.5-0.7; lower reveals too early (no decode tension), higher feels like a hard reveal at the end
- Effects: this is a discrete tuning of when the eye locks onto the real letter
- Reference: ../../examples/proof-logo-chain.html uses `0.6`
- **FLICKER_RATE** — frames between glyph reshuffles during the random phase.
- Range: 3-6; lower than 3 looks like noise, higher than 6 looks like discrete typing instead of flicker
- Constraints: must be ≥ ~3 frames (see Critical Constraints)
- Reference: ../../examples/proof-logo-chain.html uses an equivalent of `3` (one shuffle every 3 internal-clock frames)
- **{bgColor} / {textColor}** — stage background and live-character color tokens.
- **{monoFont}** — monospace family preferred so flicker glyphs don't change width per swap; if a proportional font is required, the ghost placeholder makes the cost recoverable.
- **{phrase}** — the target word the flip resolves to. Length feeds the total decode duration via `CHAR_STAGGER`.
## Variations
- **Top-down hinge** — swap `transform-origin: bottom` to `top` for a falling-flap look.
- **Top-down hinge** — `transform-origin: top` for a falling-flap look.
- **Center spin** — `transform-origin: center` reads as a barrel roll, not a flap.
- **Number-only pool** — restrict `GLYPHS` to digits for a price / countdown decode.
- **Two-pass decode** — chain two `FLIP_DURATION` tweens with different glyph pools (e.g. symbols → letters → real) for a longer reveal.
- **Two-pass decode** — chain two `FLIP_DURATION` tweens with different glyph pools (symbols → letters → real) for a longer reveal.
## Key Principles
## Values
- **Threshold at ~`REVEAL_THRESHOLD`** for swap from random → real glyph — close enough to settled that viewer's eye catches the right letter
- **Hinge at `transform-origin: bottom`** for flap-display look (vs `top` for top-down, vs `center` for spin)
- **Deterministic random** via seeded hash — HF runtime seeks frame-by-frame, so the same frame must show the same glyph (no `Math.random()`)
- **Ghost placeholder** sits behind the live chars with identical content + same font, reserving width — without it, narrow glyphs shift the layout mid-flicker
- **Stagger in the 0.04-0.08s range** per char — too fast and chars overlap visually, too slow and effect feels labored
- **Center the flip dead-center via `display: grid; place-items: center;`** on the scene root — and DO NOT add decorative headers/footers (timestamp lines, "// AUTH" tags, small status dots). The flip text IS the focal beat; surrounding clutter dilutes it. If a secondary label is necessary, promote it to BIG typography in the same stacked layout (56-72px caps + tracking), not a tiny corner annotation.
| token | range | notes |
| ---------------- | ------------------------------- | ---------------------------------------------------------------------------------- |
| HACKER_FONT_SIZE | 6–10% of viewport min-dimension | the flip IS the focal beat; ghost must use the identical size |
| FLIP_DURATION | 0.4–1.0s | under 0.4s the flicker phase has no time; over 1.0s drags |
| CHAR_STAGGER | 0.03–0.08s | total decode = `CHAR_STAGGER × (chars − 1) + FLIP_DURATION` — fit the phase budget |
| REVEAL_THRESHOLD | 0.5–0.7 | lower reveals too early (no tension); higher reads as a hard end-reveal |
| FLICKER_RATE | 3–6 frames per glyph swap | <3 looks like noise; >6 looks like discrete typing |
Reference: `../../examples/proof-logo-chain.html` (163px, 0.55s, 0.033s, 0.6).
## Critical Constraints
- **`perspective` on scene root REQUIRED** — without parent perspective, `rotateX` looks like a 2D scale, not a 3D flip
- **`transform-style: preserve-3d` on each char** — keeps 3D context intact when chars have their own transforms
- **Timeline must be paused**: `gsap.timeline({ paused: true })`
- **Registry key = `data-composition-id`**
- **Deterministic randomness**: don't use `Math.random()`. Use a seed derived from char index + frame group so seek determinism holds
- **`onUpdate` writes to DOM**: HF seeks every frame, so this runs many times — keep work O(1) per char per frame
- **Flicker rate ≥ ~3 frames per glyph swap**: faster looks like noise, slower looks like discrete typing
- **`perspective` on the scene root REQUIRED** — without parent perspective, `rotateX` renders as a 2D squash, not a 3D flip; `transform-style: preserve-3d` on each char.
- **Ghost placeholder** with identical content + font must back the live chars — without it, narrow glyphs shift the layout mid-flicker (monospace preferred; the ghost makes a proportional face recoverable).
- **Flicker seed = char index + quantized progress** — the same frame must show the same glyph.
- **Flicker rate ≥ ~3 frames per swap**; `onUpdate` work stays O(1) per char per frame.
- **Center the flip dead-center and add NO decorative chrome** (timestamp lines, "// AUTH" tags, status dots) — the flip is the beat. A necessary secondary label is BIG typography (56–72px caps + tracking) in the same stack, never a tiny corner annotation.
## Combinations
## See also
- [card-morph-anchor.md](card-morph-anchor.md) — pair: hacker-flip reveals a phrase, then card morphs into the next shot
- [counting-dynamic-scale.md](counting-dynamic-scale.md) — counterpart for numeric reveals (text vs number)
## Pairs with HF skills
- `/hyperframes-animation` — timeline + per-char stagger + `onUpdate`
- `/hyperframes-core` — composition wiring
- `/hyperframes-cli` — `hyperframes lint`
`card-morph-anchor` (flip reveals a phrase, card morphs into the next shot) · `counting-dynamic-scale` (the numeric counterpart).