ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-12 23:29:50 +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/3d-text-depth-layers.md
+74 -243
View File
@@ -7,291 +7,122 @@ metadata:
# 3D Text Depth Layers
Renders the same text N times at increasing offsets, with back layers translucent and the front layer fully opaque. Creates a physical "stacked extrusion" depth illusion. Distinct from `text-shadow` (which can't have per-layer hue / opacity / animation) — each layer is a real DOM element.
The same text rendered N times at increasing offsets — back layers translucent, front layer full opacity and brand color — creates a physical "stacked extrusion" depth illusion on large typography. Distinct from `text-shadow` (which can't have per-layer hue / opacity / animation): each layer is a real DOM element.
## How It Works
- N copies of the same text in a single container
- Each copy positioned absolutely with offset `(i * OFFSET_X, i * OFFSET_Y)`
- Back layers (high `i`) use translucent or darkened color
- Front layer (`i = 0`) is full opacity, full brand color
- Optionally: each layer fades in staggered, creating a "building up" depth animation
A build script appends `LAYER_COUNT` copies back-to-front; each back layer sits at `translate(i × OFFSET_X, i × OFFSET_Y)` with alpha stepping down per layer, while the front copy (`i = 0`) is `position: relative` so it defines the container size (back layers stack absolutely behind it). The default entrance cascades the layers' fades back-to-front while a proxy tween grows the offsets from 0 → full, so the depth "builds forward" and lands as the last layer fades in.
## HTML
## Recipe
```html
<div
class="scene"
id="depth-scene"
data-composition-id="depth-scene"
data-start="0"
data-duration="3"
data-track-index="0"
>
<div class="depth-stack">
<!-- Layers injected by script — LAYER_COUNT copies of {label} -->
</div>
<!-- inside a standard scene clip (hyperframes-core) -->
<div class="depth-stack">
<!-- layers injected by script — LAYER_COUNT copies of {label} -->
</div>
```
## CSS
```css
.scene {
position: relative;
width: 100%;
height: 100%;
display: grid;
place-items: center;
background: {bgColor};
}
.depth-stack {
position: relative;
/* Container size set by the front layer; back layers stack behind */
position: relative; /* front layer defines size; back layers stack behind */
}
.depth-text {
font-family: {font};
font-weight: 900;
font-weight: 900; /* black weight — thin text loses the illusion */
font-size: HERO_FONT_SIZE;
letter-spacing: HERO_LETTER_SPACING;
line-height: 1;
color: {frontColor};
text-transform: uppercase;
}
/* Back layers — absolute, stacked behind */
.depth-text.is-back {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
pointer-events: none; /* decorative */
}
/* Front layer — relative to define container size */
.depth-text.is-front {
position: relative;
z-index: 10;
}
```
## GSAP Timeline + Layer Setup
```js
const stack = document.querySelector(".depth-stack");
```html
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script>
window.__timelines = window.__timelines || {};
const TEXT = "{label}";
const stack = document.querySelector(".depth-stack");
// Build layers — back-to-front so the FRONT (i=0) is the LAST appended
// and `position: relative` defines container size.
for (let i = LAYER_COUNT - 1; i >= 0; i--) {
const el = document.createElement("div");
el.className = "depth-text " + (i === 0 ? "is-front" : "is-back");
el.textContent = TEXT;
if (i > 0) {
const alpha = Math.max(BACK_ALPHA_MAX - i * BACK_ALPHA_STEP, BACK_ALPHA_MIN);
el.style.color = `rgba({backHueRGB}, ${alpha})`;
el.style.transform = `translate(${i * OFFSET_X}px, ${i * OFFSET_Y}px)`;
} else {
el.style.color = "{frontColor}";
}
el.dataset.layer = String(i);
stack.appendChild(el);
// Build back-to-front so the FRONT (i=0) is appended LAST
for (let i = LAYER_COUNT - 1; i >= 0; i--) {
const el = document.createElement("div");
el.className = "depth-text " + (i === 0 ? "is-front" : "is-back");
el.textContent = "{label}";
if (i > 0) {
const alpha = Math.max(BACK_ALPHA_MAX - i * BACK_ALPHA_STEP, BACK_ALPHA_MIN);
el.style.color = `rgba({backHueRGB}, ${alpha})`; // rgba in color, NOT element opacity
el.style.transform = `translate(${i * OFFSET_X}px, ${i * OFFSET_Y}px)`;
}
el.dataset.layer = String(i);
stack.appendChild(el);
}
const tl = gsap.timeline({ paused: true });
// Layered entry — back layers appear first, building forward
const allLayers = stack.querySelectorAll(".depth-text");
allLayers.forEach((el) => {
const i = Number(el.dataset.layer);
const finalAlpha = el.classList.contains("is-front")
? 1
: Math.max(BACK_ALPHA_MAX - i * BACK_ALPHA_STEP, BACK_ALPHA_MIN);
tl.fromTo(
el,
{ opacity: 0 },
{
opacity: finalAlpha,
duration: LAYER_FADE_DUR,
ease: "power2.out",
},
LAYER_CASCADE_START + (LAYER_COUNT - 1 - i) * LAYER_CASCADE_STEP,
);
});
// Optional: depth grows on entry (offset interpolates from 0 → full)
const depthState = { p: 0 };
tl.to(
depthState,
{
p: 1,
duration: DEPTH_GROW_DUR,
ease: "power2.out",
onUpdate: () => {
stack.querySelectorAll(".depth-text.is-back").forEach((el) => {
const i = Number(el.dataset.layer);
const x = i * OFFSET_X * depthState.p;
const y = i * OFFSET_Y * depthState.p;
el.style.transform = `translate(${x}px, ${y}px)`;
});
},
},
DEPTH_GROW_START,
// Cascade entry — back layers fade in first, building forward
stack.querySelectorAll(".depth-text").forEach((el) => {
const i = Number(el.dataset.layer);
const finalAlpha = i === 0 ? 1 : Math.max(BACK_ALPHA_MAX - i * BACK_ALPHA_STEP, BACK_ALPHA_MIN);
tl.fromTo(
el,
{ opacity: 0 },
{ opacity: finalAlpha, duration: LAYER_FADE_DUR, ease: "power2.out" },
LAYER_CASCADE_START + (LAYER_COUNT - 1 - i) * LAYER_CASCADE_STEP,
);
});
window.__timelines["depth-scene"] = tl;
</script>
// Depth grows on entry — offsets interpolate 0 → full
const depthState = { p: 0 };
tl.to(
depthState,
{
p: 1,
duration: DEPTH_GROW_DUR,
ease: "power2.out",
onUpdate: () => {
stack.querySelectorAll(".depth-text.is-back").forEach((el) => {
const i = Number(el.dataset.layer);
el.style.transform = `translate(${i * OFFSET_X * depthState.p}px, ${i * OFFSET_Y * depthState.p}px)`;
});
},
},
LAYER_CASCADE_START, // align with the cascade so depth lands as the last layer fades in
);
```
## Variations
### Static depth (no animation, single hero shot)
- **Static depth** (single hero shot) — render all layers at final positions from t=0; optionally fade the whole stack in with a subtle scale (0.94–0.98 → 1, 0.5–0.8s).
- **Dynamic depth pulse** — after the grow completes, modulate the offsets with a sine multiplier `1 + sin(p) × BEAT_AMP` (BEAT_AMP 0.2–0.6; one beat per 0.7–1.5s reads as a heartbeat).
- **Color-shift back layers** — instead of fading to translucent, step hue/lightness per layer: `hsla(HUE_BASE − i × HUE_STEP, SAT_PCT%, LIGHT_BASE − i × LIGHT_STEP%, 1)` (HUE_STEP 4–12°; larger reads as glitch). Depth reads as a colored cast shadow.
Skip the cascade — render all layers in their final positions from t=0, optionally fade the entire stack in:
## Values
```js
tl.from(
stack,
{ opacity: 0, scale: STATIC_ENTRY_SCALE, duration: STATIC_ENTRY_DUR, ease: "power3.out" },
0,
);
```
### Dynamic depth pulse
Animate `OFFSET_X` / `OFFSET_Y` based on a heartbeat — depth grows and shrinks rhythmically:
```js
const beat = { p: 0 };
tl.to(
beat,
{
p: Math.PI * 2 * BEAT_CYCLES,
duration: BEAT_DUR,
ease: "none",
onUpdate: () => {
const mult = 1 + Math.sin(beat.p) * BEAT_AMP;
stack.querySelectorAll(".is-back").forEach((el) => {
const i = Number(el.dataset.layer);
el.style.transform = `translate(${i * OFFSET_X * mult}px, ${i * OFFSET_Y * mult}px)`;
});
},
},
BEAT_START,
);
```
### Color-shift back layers
Instead of fading to translucent, shift to a different hue — depth reads as "casting a colored shadow":
```js
el.style.color = `hsla(${HUE_BASE - i * HUE_STEP}, ${SAT_PCT}%, ${LIGHT_BASE - i * LIGHT_STEP}%, 1)`;
```
## How to Choose Values
### Layer geometry
- **LAYER_COUNT** — number of stacked copies (back layers + 1 front).
- Range: 4-6. Below 4 the depth doesn't read as 3D; above 6 the stack visually clutters on tight kerning
- Effects: low end reads as subtle shadow; high end reads as chunky extrusion
- **OFFSET_X / OFFSET_Y** — per-layer translation offset, in px.
- Range: 1-3 px each. Above 4 px reads as a glitch / chromatic aberration rather than depth
- Effects: offset direction implies light direction. `(+x, +y)` = light from upper-left; `(-x, +y)` = light from upper-right. Pick one and keep it consistent across the composition
- Constraints: same sign convention throughout the composition
### Back-layer color falloff
- **BACK_ALPHA_MAX** — alpha of the back layer nearest the front.
- Range: 0.6-0.85. Lower than 0.5 makes even the nearest back layer disappear; higher than 0.9 fights the front layer for dominance
- **BACK_ALPHA_STEP** — alpha decrement per layer further back.
- Range: 0.08-0.15. Smaller steps read as a soft gradient; larger steps read as discrete plates
- Constraints: choose so `BACK_ALPHA_MAX − (LAYER_COUNT − 2) × BACK_ALPHA_STEP ≥ BACK_ALPHA_MIN`
- **BACK_ALPHA_MIN** — floor below which back layers stop fading.
- Range: 0.1-0.2. Below 0.1 the deepest layer disappears entirely on dark backgrounds
### Typography
- **HERO_FONT_SIZE** — front-layer font size, in px.
- Range: 60 px minimum to read as layered; 200-340 px for full-bleed hero shots. Thin text loses the layered illusion
- **HERO_LETTER_SPACING** — letter spacing.
- Range: −0.03em (tight) to 0 (normal). Negative spacing tightens the stack so the offsets read as depth instead of as repetition
- **{font}** — typeface; pick a black/900 weight family with strong horizontal strokes
- **{frontColor}** — front-layer color; the brand or accent color
- **{backHueRGB}** — RGB triplet for back layers (e.g. matched to a brand glow). Used inside `rgba({backHueRGB}, ${alpha})`
### Cascade entry (default form)
- **LAYER_CASCADE_START** — timeline offset where the cascade begins.
- Constraints: ≥ 0; if another beat precedes, ≥ that beat's end
- **LAYER_CASCADE_STEP** — delay between each layer's fade-in.
- Range: 0.04-0.10 s. Smaller feels almost-simultaneous; larger feels stepped and mechanical
- **LAYER_FADE_DUR** — duration of each individual layer's fade-in.
- Range: 0.3-0.6 s
### Depth-grow tween
- **DEPTH_GROW_START** — when the offset growth begins.
- Constraints: typically `≈ LAYER_CASCADE_START`; align so the first layer's fade and the depth growth start together
- **DEPTH_GROW_DUR** — duration over which offsets interpolate from 0 to full.
- Range: 0.4-0.8 s. Roughly match `LAYER_FADE_DUR × LAYER_COUNT / 2` so depth lands as the last layer fades in
### Static-depth variation
- **STATIC_ENTRY_SCALE** — initial scale before the whole stack fades in.
- Range: 0.94-0.98 — subtle inflation; larger reads as a separate "pop" effect
- **STATIC_ENTRY_DUR** — fade-in duration for the whole stack.
- Range: 0.5-0.8 s
### Dynamic-pulse variation
- **BEAT_CYCLES** — number of full beat cycles across `BEAT_DUR`.
- Range: `BEAT_DUR / 1.5s ≤ BEAT_CYCLES ≤ BEAT_DUR / 0.7s` (one beat per 0.7-1.5 s reads as a heartbeat)
- **BEAT_DUR** — pulse tween duration.
- Constraints: tied to the visible window of the depth stack
- **BEAT_AMP** — fractional amplitude of the offset pulse.
- Range: 0.2-0.6. Smaller is a gentle breathing depth; larger reads as a kick-drum thump
- **BEAT_START** — when the pulse begins.
- Constraints: `≥ DEPTH_GROW_START + DEPTH_GROW_DUR` so the pulse modulates a fully-grown stack
### Color-shift variation
- **HUE_BASE / HUE_STEP** — base hue (front layer) and per-layer hue rotation.
- Range: `HUE_STEP` 4-12°. Larger steps cycle further around the color wheel and read as glitch
- **SAT_PCT** — fixed saturation for all layers.
- Range: 60-85%
- **LIGHT_BASE / LIGHT_STEP** — base lightness and per-layer darkening.
- Range: `LIGHT_STEP` 3-8 percentage points so back layers darken into the background
## Key Principles
- **Layer count 4-6** — fewer than 4 doesn't read as 3D, more than 6 visually clutters on tight kerning
- **Offset 1-3 px per axis** — subtle is dramatic. `OFFSET = 6+` looks like a glitch rather than depth
- **Offset direction implies light direction** — `(+x, +y)` = light from upper-left; `(-x, +y)` = light from upper-right. Pick one and be consistent across the composition
- **Back layers translucent OR darker** — DON'T make them MORE saturated than the front (looks like a halo). Each back layer should be slightly more transparent (`alpha -= BACK_ALPHA_STEP per layer`) or slightly darker
- **Last (front) layer `position: relative`** to define container size; all others `position: absolute` stack behind
- **Bold/black weight + large size** — 900 weight, 60 px+ minimum. Thin text loses the layered illusion
- **Don't apply per-letter animation on top of layers** — character animations (hacker-flip, typewriter) on top of 6-layer depth = chaos. If you need both effects, drop depth to 2-3 layers OR apply layers only to the static post-reveal state
| token | range | notes |
| ------------------- | ------------------------ | ---------------------------------------------------------------------- |
| LAYER_COUNT | 4–6 | <4 doesn't read as 3D; >6 clutters on tight kerning |
| OFFSET_X / OFFSET_Y | 1–3px each | >4px reads as glitch / chromatic aberration, not depth |
| BACK_ALPHA_MAX | 0.6–0.85 | nearest back layer; >0.9 fights the front for dominance |
| BACK_ALPHA_STEP | 0.08–0.15 | small = soft gradient; large = discrete plates |
| BACK_ALPHA_MIN | 0.1–0.2 | floor — below 0.1 the deepest layer vanishes on dark backgrounds |
| HERO_FONT_SIZE | 60px min; 200–340px hero | thin/small text loses the layered illusion |
| HERO_LETTER_SPACING | −0.03em–0 | tighter makes offsets read as depth, not repetition |
| LAYER_CASCADE_STEP | 0.04–0.10s | smaller ≈ simultaneous; larger feels stepped |
| LAYER_FADE_DUR | 0.3–0.6s | per-layer fade |
| DEPTH_GROW_DUR | 0.4–0.8s | ≈ `LAYER_FADE_DUR × LAYER_COUNT / 2` so depth lands with the last fade |
## Critical Constraints
- **Timeline must be paused**: `gsap.timeline({ paused: true })`
- **Registry key = `data-composition-id`**
- **No CSS `text-shadow`** alongside layered depth — they compound and over-extrude
- **Use `transform: translate()` for offsets, not `top`/`left`** — translate composes cleanly with parent's centering and avoids reflow
- **`pointer-events: none` on back layers** — they're decorative; don't catch hover or selection
- **Set layer color via `rgba()` not opacity** — opacity on the whole element fades the rendered glyph including any shadow; rgba in `color` fades just the glyph
- **Offset direction implies light direction** — `(+x, +y)` = light upper-left, `(-x, +y)` = upper-right; one sign convention for the whole composition.
- **Back layers translucent OR darker — never more saturated than the front** (reads as a halo, not depth).
- **Set back-layer color via `rgba()` in `color`, not element `opacity`** — opacity fades the whole rendered glyph including any shadow.
- **Front layer `position: relative` defines container size**; back layers absolute with `pointer-events: none`; offsets via `transform: translate()`, never `top`/`left`.
- **No CSS `text-shadow` alongside layered depth** — they compound and over-extrude.
- **No per-letter animation on top of the stack** — hacker-flip / typewriter over 6-layer depth is chaos; drop to 2–3 layers or apply depth only to the static post-reveal state.
## Combinations
## See also
- [counting-dynamic-scale.md](counting-dynamic-scale.md) — render the counter number with depth layers
- [sine-wave-loop.md](sine-wave-loop.md) — idle breathing on the front layer after reveal
- [center-outward-expansion.md](center-outward-expansion.md) — depth-stacked wordmark reveals after burst lands
## Pairs with HF skills
- `/hyperframes-animation` — staggered fade-ins + onUpdate for dynamic depth
- `/hyperframes-core` — composition wiring
- `/hyperframes-cli` — `hyperframes lint`
`counting-dynamic-scale` (counter rendered with depth layers) · `sine-wave-loop` (idle breathing on the front layer post-reveal) · `center-outward-expansion` (depth-stacked wordmark after the burst lands).