--- 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
{glitchText}
``` ```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).