mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-11 14:50:02 +00:00
feat(skills): c2v mining pass — 7 new blueprints, 10 new rules, compacted recipe corpus (#2680)
* 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
@@ -0,0 +1,150 @@
|
||||
---
|
||||
name: chromatic-glitch
|
||||
description: RGB-split / slice glitch that snaps sharp — offset color copies jitter on a deterministic hash of quantized timeline time (never Math.random), or horizontal slices displace and converge; a brief vibration, then a clean resolve. Entrance or emphasis punctuation; finite, seek-safe.
|
||||
metadata:
|
||||
tags: glitch, rgb-split, chromatic, slice, jitter, stutter, text, snap, distortion
|
||||
---
|
||||
|
||||
# Chromatic Glitch
|
||||
|
||||
Digital interference as punctuation: for a fraction of a second the element **breaks** — offset color copies shudder behind it, or horizontal slices displace sideways — then it **snaps sharp** and holds clean. The payoff is the resolve; the glitch exists to make the clean state land harder. Two forms: an **RGB-split jitter** (warm + cool ghost copies vibrating behind the base) and a **slice displacement** (horizontal bands that arrive offset and converge).
|
||||
|
||||
Boundaries: [motion-blur-streak.md](motion-blur-streak.md) is velocity blur tied to **travel** — its element is going somewhere fast. A glitching element is **in place**; the disturbance is temporal, not directional. [hacker-flip-3d.md](hacker-flip-3d.md) substitutes **glyphs** (a decode); here the glyphs are fixed and only displaced copies of them move.
|
||||
|
||||
## How It Works
|
||||
|
||||
The subject is stacked: the **base copy on top** (full legibility at every frame), ghost copies behind. All motion comes from one finite **amplitude-envelope** tween read by an `onUpdate`:
|
||||
|
||||
1. **Quantized time** — `const step = Math.floor(tl.time() / JITTER_STEP)`. The stutter comes from offsets that hold for `JITTER_STEP` and then jump. Smoothly interpolated offsets read as wobble, not glitch — **the quantization IS the digital texture**.
|
||||
2. **Deterministic hash** — offsets are a pure function of `(step, layerIndex)`:
|
||||
|
||||
```js
|
||||
const glitchHash = (n) => {
|
||||
const x = Math.sin(n * 127.1 + 311.7) * 43758.5453;
|
||||
return x - Math.floor(x); // 0..1, pure — a scrub to any t recomputes the same frame
|
||||
};
|
||||
```
|
||||
|
||||
3. **Amplitude envelope** — a proxy tween carries `amp: 1 → 0` over `GLITCH_DUR`. Per-frame offset = `amp × (glitchHash(step * 13 + layer * 7) * 2 − 1) × MAX_SPLIT`. When the envelope hits zero the copies sit at exactly 0 — the snap-sharp is built into the math, and a final `tl.set` clamps the rest state so the hold is bit-exact.
|
||||
|
||||
The **slice form** swaps color copies for `SLICE_COUNT` full copies, each clipped to a horizontal band via `clip-path: inset()`; per-band `x` (and optional `scaleX` stretch) start at hash-derived offsets and converge to 0 under a stepped ease.
|
||||
|
||||
## Recipe
|
||||
|
||||
```html
|
||||
<!-- inside a standard scene clip (hyperframes-core) -->
|
||||
<!-- Form A: RGB-split — ghosts behind, base on top. Copies metric-identical (one grid cell, same font stack); aria-hidden on every non-base copy. -->
|
||||
<div class="glitch-stack" id="glitch-stack">
|
||||
<span class="glitch-copy warm" aria-hidden="true">{glitchText}</span>
|
||||
<span class="glitch-copy cool" aria-hidden="true">{glitchText}</span>
|
||||
<span class="glitch-base">{glitchText}</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
```css
|
||||
.glitch-stack {
|
||||
display: grid; /* all copies share one cell — pixel-identical boxes */
|
||||
}
|
||||
.glitch-base,
|
||||
.glitch-copy {
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
.glitch-base {
|
||||
z-index: 2; /* grid items take z-index without position */
|
||||
color: {textColor};
|
||||
}
|
||||
.glitch-copy {
|
||||
z-index: 1;
|
||||
opacity: 0; /* raised only while the envelope is live */
|
||||
will-change: transform; /* updates every frame while live */
|
||||
mix-blend-mode: screen; /* additive on dark bg; drop to normal (and lower opacity) on light */
|
||||
}
|
||||
.glitch-copy.warm {
|
||||
color: {warmSplit}; /* classic: red/orange */
|
||||
}
|
||||
.glitch-copy.cool {
|
||||
color: {coolSplit}; /* classic: cyan/blue */
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
// Form A: RGB-split jitter — envelope snaps to full amplitude, decays to zero.
|
||||
// All per-frame state derives from tl.time() + the envelope: pure, replays on seek.
|
||||
const copies = gsap.utils.toArray("#glitch-stack .glitch-copy");
|
||||
const amp = { a: 0 };
|
||||
tl.set(amp, { a: 1 }, GLITCH_START);
|
||||
tl.set(copies, { opacity: SPLIT_OPACITY }, GLITCH_START);
|
||||
tl.to(
|
||||
amp,
|
||||
{
|
||||
a: 0,
|
||||
duration: GLITCH_DUR,
|
||||
ease: "power3.in", // most of the violence up front, dying fast
|
||||
onUpdate: () => {
|
||||
const step = Math.floor(tl.time() / JITTER_STEP); // quantized — the stutter
|
||||
copies.forEach((el, layer) => {
|
||||
const jx = (glitchHash(step * 13 + layer * 7) * 2 - 1) * MAX_SPLIT * amp.a;
|
||||
const jy = (glitchHash(step * 29 + layer * 11) * 2 - 1) * MAX_SPLIT * 0.35 * amp.a;
|
||||
gsap.set(el, { x: jx, y: jy });
|
||||
});
|
||||
},
|
||||
},
|
||||
GLITCH_START,
|
||||
);
|
||||
// The clean resolve: clamp ghosts to exact rest — never rely on the decay
|
||||
// landing on zero. A ghost left 1px off reads as a bug every frame after.
|
||||
tl.set(copies, { x: 0, y: 0, opacity: 0 }, GLITCH_START + GLITCH_DUR);
|
||||
|
||||
// Form B: slice displacement — N band copies of the same content converge.
|
||||
const slices = gsap.utils.toArray("#slice-stack .slice");
|
||||
const bandH = 100 / slices.length;
|
||||
slices.forEach((el, i) => {
|
||||
gsap.set(el, { clipPath: `inset(${i * bandH}% 0 ${100 - (i + 1) * bandH}% 0)` });
|
||||
const dir = glitchHash(i * 3 + 1) > 0.5 ? 1 : -1;
|
||||
tl.fromTo(
|
||||
el,
|
||||
{
|
||||
x: dir * (SLICE_OFFSET_MIN + glitchHash(i * 5 + 2) * (SLICE_OFFSET_MAX - SLICE_OFFSET_MIN)),
|
||||
scaleX: 1 + glitchHash(i * 7 + 3) * SLICE_STRETCH,
|
||||
opacity: 1,
|
||||
},
|
||||
{ x: 0, scaleX: 1, duration: SLICE_RESOLVE_DUR, ease: "steps(SLICE_STEPS)" },
|
||||
SLICE_START + glitchHash(i * 11 + 4) * SLICE_JITTER_LAG,
|
||||
);
|
||||
});
|
||||
```
|
||||
|
||||
## Variations
|
||||
|
||||
- **Glitch-stretch entrance** — the element ENTERS glitching: layer `fromTo(stack, { scaleX: STRETCH_FROM, opacity: 0 }, { scaleX: 1, opacity: 1, duration: GLITCH_DUR, ease: "power4.out" })` (`STRETCH_FROM` 1.3–1.8) on the whole stack while the envelope runs. Stretch, split, and envelope all die at the same frame — the word is simply _there_, sharp.
|
||||
- **Emphasis burst on a held word** — a spasm, not an arrival: 2–3 short envelopes (`GLITCH_DUR` ~0.12–0.2s each) separated by clean gaps of ~0.2–0.4s, each its own `set(amp)/to(amp)/set(rest)` triplet. The clean frames between bursts make it read as energy instead of a rendering fault.
|
||||
- **Slice reveal** — Form B as the arrival itself: bands start opaque but displaced, converge under the stepped ease. Drop the color copies for the monochrome version — the restrained enterprise read of this rule.
|
||||
- **Card / non-text glitch** — the stacked-copy machinery is content-agnostic (logo lockup, small card). Keep `MAX_SPLIT` proportional (~1% of element width) — oversized splits read as broken layout, not interference.
|
||||
|
||||
## Values
|
||||
|
||||
| token | range | notes |
|
||||
| -------------------------------------------- | -------------------------------------- | --------------------------------------------------------------------------------------------- |
|
||||
| MAX_SPLIT | 4–14px at headline sizes (~0.06–0.1em) | vertical ~35% of horizontal; base must stay legible at peak |
|
||||
| JITTER_STEP | 1/30–1/12 s | shorter = frantic buzz, longer = VHS stutter; **≥ one render frame** or quantization vanishes |
|
||||
| GLITCH_DUR | 0.25–0.6s entrance; 0.12–0.2s burst | ≥ ~1s stops reading as an event and starts reading as a broken render |
|
||||
| SPLIT_OPACITY | 0.5–0.9 (screen on dark) | 0.35–0.6 unblended on light — screen on white is invisible |
|
||||
| SLICE_COUNT | 4–10 | more = finer tear, diminishing past ~10 |
|
||||
| SLICE_OFFSET_MIN / MAX | 12–60px | derive per-band values from `glitchHash(i)`, never uniform — equal offsets read mechanical |
|
||||
| SLICE_STRETCH | 0–0.5 | 0 pure displacement; ~0.3 stretched-scanline read |
|
||||
| SLICE_RESOLVE_DUR / SLICE_STEPS / JITTER_LAG | 0.2–0.4s / 3–6 / ≤0.08s per band | the stepped ease keeps the settle digital |
|
||||
| {warmSplit} / {coolSplit} | — | classic red/cyan; any opposing warm+cool brand pair survives |
|
||||
|
||||
## Critical Constraints
|
||||
|
||||
- **Quantize time — the stutter IS the effect.** Offsets hold for `JITTER_STEP` then jump; if the glitch looks like jelly, you interpolated. `JITTER_STEP` ≥ one render frame or the quantization silently disappears.
|
||||
- **Pure functions of (quantized time, index)** — every per-frame value comes from `glitchHash`; the hash inputs use `tl.time()`, nothing else.
|
||||
- **Clamp the rest state** — `tl.set({ x: 0, y: 0, opacity: 0 })` on the ghosts at envelope end; never rely on the decay landing exactly on zero.
|
||||
- **Base on top, always legible** — ghosts vibrate _behind_ the base; a glitch that destroys legibility for more than ~2 frames is a tear-down, not an accent.
|
||||
- **Brief, then clean** — the clean hold after the snap is the actual beat; `GLITCH_DUR` well under half the element's screen time. Emphasis bursts are separate finite triplets.
|
||||
- **No CSS `@keyframes` glitch loops** — the classic CSS glitch snippet runs on the wall clock and desyncs from seek; every displacement goes through the timeline's `onUpdate`.
|
||||
- **Match the register** — RGB-split is a loud consumer/tech gesture; the monochrome slice variant is the only form that belongs in a restrained enterprise composition.
|
||||
|
||||
## See also
|
||||
|
||||
`kinetic-beat-slam` (one beat lands with the glitch-stretch entrance) · `spring-pop-entrance` (pop clean, burst on the stress beat) · `gradient-text-sweep` (gradient carries the hold after the resolve) · `discrete-text-sequence` (state swap masked at max amplitude) · `motion-blur-streak` (the traveling sibling — if it's moving fast, blur it there).
|
||||
Reference in New Issue
Block a user