Svelte

Use Anti-AI UI Framework with Svelte for reactive, compiler-driven automation resistance.

Installation

Install via npm:

Installation
1.npm install anti-ai-ui

Basic Usage

Use the vanilla JS API with Svelte lifecycle functions:

Basic Usage
1.<script>
2.  import { onMount, onDestroy } from 'svelte';
3.  import { makeButtonRunaway } from 'anti-ai-ui/vanilla';
4.

5.  let container;
6.  let cleanup;
7.

8.  onMount(() => {
9.    cleanup = makeButtonRunaway(container, {
10.      buttonText: 'Submit',
11.      evasionDistance: 140,
12.      onCatch: () => {
13.        console.log('Button caught!');
14.      }
15.    });
16.  });
17.

18.  onDestroy(() => {
19.    if (cleanup) cleanup();
20.  });
21.</script>
22.

23.<div bind:this={container} style="position: relative; height: 200px">
24.  <!-- Button will be injected here -->
25.</div>

Best Practices

  • Always cleanup: Call cleanup functions in onDestroy
  • Use bind:this: Bind DOM elements with bind:this
  • Reactivity: Combine with Svelte's reactive statements for dynamic behavior

Next Steps