Chromatic Glitch

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):

   jsCopy

   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

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

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).