Vanilla JavaScript

Use Anti-AI UI patterns with plain JavaScript - no framework required.

Installation

Install via npm:

npm
1.npm install anti-ai-ui

Or use via CDN:

CDN
1.<script src="https://unpkg.com/anti-ai-ui"></script>

ES Modules

Import specific functions from the vanilla JS API:

ES Modules
1.import {
2.  runawayButton,
3.  passwordHell,
4.  shiftingInterface
5.} from 'anti-ai-ui/vanilla';
6.

7.// Initialize a component
8.const container = document.getElementById('button-container');
9.const cleanup = runawayButton(container, {
10.  buttonText: 'Click Me',
11.  evasionDistance: 140,
12.  speed: 1.2,
13.  onCatch: () => {
14.    console.log('Button caught!');
15.  }
16.});
17.

18.// Clean up when done
19.cleanup();

Global Script

When using the CDN, access functions via the AntiAiUi namespace:

Global Script
1.<script src="https://unpkg.com/anti-ai-ui"></script>
2.<script>
3.  const { runawayButton } = window.AntiAiUi;
4.

5.  const container = document.getElementById('button-container');
6.  runawayButton(container, {
7.    buttonText: 'Click Me',
8.    evasionDistance: 140
9.  });
10.</script>

Basic Example

Here's a complete HTML example:

Complete Example
1.<!DOCTYPE html>
2.<html lang="en">
3.<head>
4.  <meta charset="UTF-8">
5.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.  <title>Anti-AI UI Demo</title>
7.  <style>
8.    .container {
9.      position: relative;
10.      width: 100%;
11.      max-width: 600px;
12.      height: 300px;
13.      border: 1px solid #ccc;
14.      border-radius: 8px;
15.      padding: 20px;
16.      margin: 20px auto;
17.    }
18.  </style>
19.</head>
20.<body>
21.  <h1>Anti-AI UI Demo</h1>
22.  <div class="container" id="button-container"></div>
23.

24.  <script type="module">
25.    import { runawayButton } from 'https://unpkg.com/anti-ai-ui/vanilla';
26.

27.    const container = document.getElementById('button-container');
28.    runawayButton(container, {
29.      buttonText: 'Submit Form',
30.      onCatch: () => alert('Form submitted!')
31.    });
32.  </script>
33.</body>
34.</html>

Cleanup Functions

All vanilla JS functions return a cleanup function. Always call it to prevent memory leaks:

Cleanup
1.const cleanup = runawayButton(container, options);
2.

3.// Later, when removing the component:
4.cleanup();
5.

6.// Or on page unload:
7.window.addEventListener('beforeunload', cleanup);

Best Practices

  • Always clean up: Call the cleanup function to remove event listeners and intervals
  • Container positioning: Ensure containers have position: relative or position: absolute
  • Container size: Give containers explicit width and height for proper positioning
  • Check for null: Always check if elements exist before initializing

Next Steps