Glitch Text Generator

Glitch text keeps every letter you typed and hangs Unicode combining marks on it: small accents, strokes and lines that a font draws on top of the letter before them. Nothing about the letters changes, which is why glitch text stays searchable to the eye and survives copy and paste. The styles differ only in which marks they use, where those marks sit and how many each letter gets.

“Per letter at 1” is the average number of marks a letter gets at intensity 1; intensity multiplies it. Each letter gets a whole number of marks in each zone, so at intensity 3 a Full glitch letter gets between 2 and 5, averaging 3.6. Dropout concentrates the same kind of damage on fewer letters, so its stacks are taller even though the line is no longer: at intensity 3 its tallest letter in “Signal lost” has 7 marks, against 4 for Full glitch. For towering horror stacks and text that gets worse towards the end, use the cursed text generator.

Where a mark lands is not up to the font. Every combining mark has a canonical combining class in the Unicode Character Database, a number that says which part of the letter it attaches to. The generator sorts the 112 marks in the Combining Diacritical Marks block (U+0300–036F) by that number, keeps the 99 that behave predictably, and puts each into one of three zones. The Fine-tune checkboxes switch zones on and off.

The “through” zone is small: Unicode has only five overlays in this block, a tilde, a short and a long stroke, and a short and a long slash. That is why Scan lines repeats itself sooner than the other styles. Left out are U+0340, 0341, 0343 and 0344, which normalisation swaps for other marks, U+0345 (the Greek iota subscript), the invisible combining grapheme joiner U+034F, and the double marks U+035C–0362, which stretch across two letters.

Many apps normalise text when you save or send it, so that the same word typed different ways is stored the same way. One step of normalisation is canonical ordering: when a letter carries marks of different classes, they are sorted by class number. Marks of the same class keep their order, so the picture rarely changes, but the stored text does.

Worked example. The generator writes a + U+0301 (acute, class 230) + U+0334 (tilde overlay, class 1). Normalised to NFD, it becomes a + U+0334 + U+0301, because 1 sorts before 230. Normalised to NFC, the a and the acute then fuse into the single character á (U+00E1), leaving á + U+0334. Same look, one character shorter, and a text comparison with the original now fails. If a glitched name “doesn’t match” after a round trip, this is usually why.

Combining marks stack outward from the letter and are allowed to leave the line box. The text box does not grow to fit them, so they either spill over the lines above and below or get cut off where the container clips. Single-line inputs, buttons, table cells and anything with overflow: hidden are where glitch text usually loses its top and bottom.

The status line under the controls reports the tallest stack in the Full glitch row. Two or three marks fit in most chat apps; at eight or more, plan on the text reaching well into the neighbouring lines. On your own page you can make room for it:

Fonts also differ. A font with mark-positioning data stacks each new mark above the previous one; a font without it, or a fallback font, may draw several marks in the same spot, so a stack of six can look like two. Check the result in the app or font where it will actually be seen.

Each mark is a character in its own right, so glitch text is much longer than it looks. “Signal lost” is 11 characters you can see, but in the Full glitch style at intensity 3 it is stored as 42. Character limits on names, bios and posts count the stored characters, not the visible ones, so glitch text can hit a limit long before the text looks long.

Each mark in this block is 2 bytes in UTF-8 and one UTF-16 unit, so for these marks the stored-character count is also what JavaScript’s length reports. The “visible” count is the number of grapheme clusters, a letter plus everything stacked on it, which is how a person counts. Every row in the generator shows its stored length under the style name.

A real bad signal does not hit every letter evenly. Letters hit sets the share of letters that get any marks; the rest stay clean. Each letter has its own fixed roll, so lowering the slider removes letters from the hit list without reshuffling the ones that stay, and raising intensity makes the same letters heavier.

Worked example. “ACCESS DENIED” in the Full glitch style at intensity 3: at 100% all 12 letters carry marks and the text is 51 characters long; at 50%, 4 letters do and it is 27; at 30%, 3 do and it is 23. With a phrase this short the share lands on whole letters, so 50% will not always mean exactly half. Press New pattern to move the hits to different letters.

The text from this page is still: the marks are part of the characters. For a headline that jitters and splits on your own site, CSS is the better tool. It keeps the real text in the page, so search engines, translation and screen readers get plain words, and the effect can be turned off for people who ask for less motion.

Use it as <h1 class="glitch" data-text="Signal lost">Signal lost</h1>. The two copies are cut into bands with clip-path and nudged sideways in cyan and magenta. The animation runs twice, four seconds in all, and stops, which matters for accessibility: WCAG 2.2 success criterion 2.2.2 asks for a way to pause anything that moves for more than five seconds, and 2.3.1 rules out flashing more than three times a second. The prefers-reduced-motion block removes the effect for visitors who have asked their system to reduce motion.