Glitch Title

About this style

Glitch art treats digital errors as material: corrupted files, compression blocks, misaligned color channels and torn scanlines. Datamoshing removes the keyframes from compressed video, so the motion data of one shot smears across the pixels of another, and it spread through music videos and net art in the late 2000s. Because codecs work on square blocks, real digital glitches snap to a grid, which separates them from analog tape noise. Designers now stage these errors on purpose for tech launches, game titles and electronic music, usually resolving to a clean frame so the name still reads.

Make a 10-second digital glitch title: moving color footage corrupts into RGB splits, displaced compression blocks, datamosh smears and scanline tears, then resolves into a clean title card.

<inputs>
If I don't give you something, use the default and don't ask.
- Title: NOISE FLOOR, on two lines.
- Line: ELECTRONIC MUSIC FESTIVAL
- Details: 12–13 SEPTEMBER · WHARF 9 · THREE STAGES
- Length: 10 seconds.
</inputs>

<direction>
- Palette: black #06070A; title white #F2F4F7; grid #22262E; details #9AA3AF; acid lime #C6FF3A for one 12px bar and the details' separators only. Glitch color comes only from the image itself: pulling its red, green and blue channels apart makes the red, cyan and magenta fringes.
- Two source frames, drawn on offscreen 2D canvases:
  - Frame A, the footage, redrawn each seek at half resolution: wide, soft-edged diagonal bands of magenta #C2187A, teal #0A6E8C and amber #E39B2B drifting at 40px/s over a dark ground, crossed by a few fine horizontal lines, like a still from a music video.
  - Frame B, the title card, drawn once after the fonts load: a 1px #22262E grid at a 120px pitch; NOISE on baseline y 470 and FLOOR on y 690 in "Unbounded" 800, 200px, tracked −0.02em, from x 140; the lime bar, 360px wide, at x 140, y 748; the line in "Azeret Mono" 500, 26px, tracked 0.24em, #F2F4F7, on baseline y 820; the details in Azeret Mono 400, 22px, tracked 0.16em, on y 866; at the right, five concentric 2px rings (radii 60–300px) centered at (1500, 540) in #3A404B with a 1px crosshair.
- One WebGL fragment shader composites them, every effect a function of t and an intensity curve I(t). The glitch state steps in whole glitch frames of 1/8 s (g = floor(t·8)), seeded by g, while the footage underneath moves smoothly:
  - Macroblocks: on a 16px grid, a seeded share of blocks (0–30%, by intensity) copies its pixels from another block offset by whole blocks (±1–6 horizontally, ±0–2 vertically).
  - Channel split: R, G and B sampled at different horizontal offsets (0–28px, by intensity), strongest inside displaced blocks and tears, never one uniform offset over the whole frame.
  - Slice tears: 1–4 horizontal bands, 8–60px tall, shifted sideways up to 240px, with a 1px light edge along the tear.
  - Datamosh: during the transition, sample frame A at uv − m(uv)·k(t), where m is a per-16px-block motion field taken from frame B's letters rising 80px into place, so A's colors are dragged into the shapes of the letters before B itself appears. k grows through the mosh, so the smears stretch.
  - Block quantization: in the heaviest moments, flatten a few blocks to their 8×8 average color, the way a failing codec does.
  - The I-frame: frame B replaces the mosh block by block in a seeded order over 0.5s, each block switching once.
- Bursts are short spikes of I lasting at most 0.25 s and starting at least 0.4 s apart.
- Safety is part of the brief: no full-frame flashes, no inversions, no white frames. Mean frame brightness may not change by more than 12% from one glitch frame to the next, and no region larger than a tenth of the frame may swing between light and dark more than 3 times in any second. Glitches move and split pixels; they don't blink.
- Premium: errors that look like a codec breaking: everything locked to the 16px block grid, channels separating horizontally, color smearing along motion, and a resolve to a perfectly clean frame. Cheap: a glitch font, the whole frame jittering, a constant RGB offset, VHS noise.
Banned: glitch display fonts (Rubik Glitch and the like), VHS tracking bars, analog static, CRT curvature, whole-frame shake, rainbow noise, inverted frames, white flashes, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.2s: frame A plays clean, its color bands drifting.
- 1.2–1.45s: the first burst: a few blocks freeze and slide; one tear runs across.
- 1.45–3.6s: the datamosh: the title's motion drags the footage's colors into the shapes of NOISE and FLOOR, smears lengthening as the channel split rises; bursts at 2.1 s and 2.9 s; between them I stays below 0.6.
- 3.6–4.1s: the I-frame: the clean title card arrives block by block.
- 4.1–5.4s: aftershocks confined to the title band: bursts at 4.4 s (a slice tear through FLOOR) and 5.0 s (a ±12px channel split on NOISE), each recovering within 0.25 s on cubic-bezier(0.2, 0.8, 0.2, 1).
- 5.4–6.4s: clean. The line types on at 20ms per character, the details follow at 12ms per character, and the lime bar wipes in from the left.
- 6.4–6.65s: one last small burst displaces a row of blocks through the details and snaps back.
- 6.65–10.0s: hold on the clean title card, perfectly still.
For other lengths, stretch the datamosh beat; keep bursts at least 0.4 s apart and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before drawing frame B and defining window.seek.
- Engine: Canvas: one WebGL canvas (preserveDrawingBuffer: true, drawn once per seek), the backing store sized from CSS size × devicePixelRatio, with frames A and B drawn on offscreen 2D canvases and uploaded as textures. No libraries (no three.js).
- I(t), the burst times and every block's seed are fixed tables, so any frame computes directly and seek(t) twice gives the same image.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check the 6 s and final frames are clean, every displacement moves whole 16px blocks, channel splits stay horizontal, the title is never fully hidden after 4.1 s, and log the mean brightness of every frame from 1 to 7 s to confirm no change bigger than 12% between glitch frames. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Cut-Paper Title Sequence

Made by us

A jazz-tempo film title sequence in flat vermilion, mustard, bone and black: hand-cut paper shards jab in on the beat,…

Split-Flap Departure Board

Made by us

A mechanical station departure board where every flap steps through its drum to land on times, destinations and statuse…

Swiss Grid Typography

Made by us

A Swiss-style event poster that builds itself on a visible 12-column grid: grotesque type rises out of baseline masks,…