Shifting Interface

A container where child elements randomly shift position, change colors, and occasionally duplicate themselves.

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

Demo

Account Settings
Update your profile information

Fill all 3 fields and click the original "Save Changes" button (not a duplicate!)

React

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

3.function App() {
4.  return (
5.    <ShiftingInterface
6.      shiftInterval={1200}
7.      duplicateChance={0.2}
8.      colorChangeInterval={1800}
9.    >
10.      <input type="text" placeholder="Username" />
11.      <input type="password" placeholder="Password" />
12.      <button>Submit</button>
13.    </ShiftingInterface>
14.  );
15.}

Vanilla JS

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

3.const container = document.getElementById('container');
4.// Add your form elements to the container first
5.container.innerHTML = `
6.  <input type="text" placeholder="Username" />
7.  <input type="password" placeholder="Password" />
8.  <button>Submit</button>
9.`;
10.

11.const { destroy } = shiftingInterface(container, {
12.  shiftInterval: 1200,
13.  duplicateChance: 0.2,
14.  colorChangeInterval: 1800
15.});
16.

17.// Call destroy() to remove

Props

Prop Type Default Description
shiftInterval number 1200 How often elements shift position (ms)
duplicateChance number 0.2 Probability (0-1) of duplicating an element on each shift
colorChangeInterval number 1800 How often colors change (ms)
colors string[] ['#0ea5e9', '#22c55e', ...] Array of colors to cycle through
maxDuplicates number 6 Maximum number of elements allowed
children ReactNode - Form elements to shift around (React only)