Glitch Text

Text with characters that constantly shuffle positions. Humans can still read word shapes, but OCR gets scrambled output on every frame.

Test Your AI See this pattern in action in Level 7: Apply To Be My Browser
Try Level 7

Demo

Characters constantly shuffle positions. Humans can read it, OCR struggles.

React

React
1.import { GlitchText } from 'anti-ai-ui';
2.

3.function App() {
4.  return (
5.    <GlitchText
6.      text="Welcome"
7.      shuffleInterval={120}
8.      shuffleChance={0.4}
9.      jitterY={8}
10.    />
11.  );
12.}

Custom Character

Custom Character Rendering
1.import { GlitchText } from 'anti-ai-ui';
2.

3.function App() {
4.  return (
5.    <GlitchText
6.      text="Welcome"
7.      shuffleInterval={120}
8.      renderChar={({ char, style, offsetY }) => (
9.        <span
10.          style={{
11.            ...style,
12.            color: offsetY > 0 ? '#ef4444' : '#3b82f6',
13.            textShadow: '0 0 10px currentColor',
14.          }}
15.        >
16.          {char}
17.        </span>
18.      )}
19.    />
20.  );
21.}

Vanilla JS

Vanilla JS
1.import { createGlitchText } from 'anti-ai-ui/vanilla';
2.

3.const container = document.getElementById('header');
4.

5.const cleanup = createGlitchText({
6.  container,
7.  text: 'Welcome',
8.  shuffleInterval: 120,
9.  shuffleChance: 0.4,
10.  jitterY: 8
11.});
12.

13.// Call cleanup() to remove

Props

Prop Type Default Description
text string 'Text' Text to display with shuffling characters
shuffleInterval number 120 Milliseconds between character shuffles
shuffleChance number 0.4 Probability (0-1) of swapping on each interval
jitterY number 8 Max vertical offset in pixels for each character
preferAdjacent boolean true Prefer swapping adjacent characters for readability
charStyle CSSProperties undefined Inline styles for each character span
renderChar (props: RenderCharProps) => ReactNode undefined Custom render function for each character