Form Chaos

Forms that randomly rotate and scale at intervals, breaking AI computer vision targeting.

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

Demo

Watch the form rotate and scale - try to click the button

React

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

3.function App() {
4.  return (
5.    <FormChaos
6.      changeInterval={800}
7.      minRotation={-20}
8.      maxRotation={20}
9.      minScale={0.7}
10.      maxScale={1.3}
11.    >
12.      {(rotation, scale) => (
13.        <div>
14.          <input type="text" placeholder="Username" />
15.          <input type="password" placeholder="Password" />
16.          <button>Login</button>
17.        </div>
18.      )}
19.    </FormChaos>
20.  );
21.}

Vanilla JS

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

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

5.const cleanup = createFormChaos({
6.  container,
7.  changeInterval: 800,
8.  minRotation: -20,
9.  maxRotation: 20,
10.  minScale: 0.7,
11.  maxScale: 1.3
12.});
13.

14.// Call cleanup() to remove

Props

Prop Type Default Description
changeInterval number 800 Interval between transform changes (ms)
minRotation number -20 Minimum rotation in degrees
maxRotation number 20 Maximum rotation in degrees
minScale number 0.7 Minimum scale multiplier
maxScale number 1.3 Maximum scale multiplier
transition string '0.5s ease' CSS transition for smooth animation
children function undefined Render function receiving (rotation, scale)