Three Form Carousel

Multiple identical forms that shuffle positions at random intervals, breaking DOM-based automation.

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

Demo

Watch the forms shuffle every 2 seconds

React

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

3.function App() {
4.  return (
5.    <ThreeFormCarousel
6.      formCount={3}
7.      shuffleInterval={2000}
8.      formWidth={220}
9.    >
10.      {(formIndex) => (
11.        <>
12.          <h3>Form {formIndex + 1}</h3>
13.          <input type="text" placeholder="Name" />
14.          <input type="email" placeholder="Email" />
15.          <button>Submit</button>
16.        </>
17.      )}
18.    </ThreeFormCarousel>
19.  );
20.}

Vanilla JS

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

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

5.const cleanup = createThreeFormCarousel({
6.  container,
7.  formCount: 3,
8.  shuffleInterval: 2000,
9.  formWidth: 220,
10.  createFormContent: (index) => {
11.    const form = document.createElement('div');
12.    form.innerHTML = `
13.      <h3>Form ${index + 1}</h3>
14.      <input type="text" placeholder="Name" />
15.      <button>Submit</button>
16.    `;
17.    return form;
18.  }
19.});
20.

21.// Call cleanup() to remove

Props

Prop Type Default Description
formCount number 3 Number of forms to display
shuffleInterval number 2000 Interval between position shuffles (ms)
formWidth number 220 Width of each form in pixels
gap number 16 Gap between forms in pixels
children function undefined Render function receiving form index