Label Shuffle

Labels randomly swap between different inputs. The "Email" label might appear above password, "Name" above email. You can never trust which field is which.

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

Demo

Registration
Which field is which?

Try to put the right data in the right field

React

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

3.function App() {
4.  return (
5.    <LabelPositionSwap
6.      fields={[
7.        { label: 'Username', placeholder: 'Enter username' },
8.        { label: 'Email', placeholder: 'you@example.com', type: 'email' },
9.        { label: 'Password', placeholder: 'Enter password', type: 'password' },
10.      ]}
11.      shuffleInterval={2500}
12.      onShuffle={(order) => console.log('New label order:', order)}
13.    />
14.  );
15.}

Custom Field

Custom Field Component
1.import { LabelPositionSwap } from 'anti-ai-ui';
2.import { MyInput } from './MyInput';
3.

4.function App() {
5.  return (
6.    <LabelPositionSwap
7.      fields={[
8.        { label: 'Username', placeholder: 'Enter username' },
9.        { label: 'Email', placeholder: 'you@example.com', type: 'email' },
10.        { label: 'Password', placeholder: 'Enter password', type: 'password' },
11.      ]}
12.      renderField={({ label, placeholder, type, value, onChange, isFading }) => (
13.        <div className="my-field-wrapper">
14.          <label style={{ opacity: isFading ? 0 : 1 }}>
15.            {label}
16.          </label>
17.          <MyInput
18.            type={type}
19.            placeholder={placeholder}
20.            value={value}
21.            onChange={(e) => onChange(e.target.value)}
22.          />
23.        </div>
24.      )}
25.    />
26.  );
27.}

Vanilla JS

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

3.const { destroy, shuffleNow } = createLabelPositionSwap({
4.  container: document.getElementById('form'),
5.  fields: [
6.    { label: 'Username', placeholder: 'Enter username' },
7.    { label: 'Email', placeholder: 'you@example.com', type: 'email' },
8.    { label: 'Password', placeholder: 'Enter password', type: 'password' },
9.  ],
10.  shuffleInterval: 2500,
11.  onShuffle: (order) => console.log('New label order:', order)
12.});
13.

14.// Force shuffle now
15.shuffleNow();
16.

17.// Cleanup
18.destroy();

Props

Prop Type Default Description
fields Array [name, email, password] Field definitions with label, placeholder, and type
shuffleInterval number 2500 How often labels shuffle between fields (ms)
onShuffle function undefined Callback when labels shuffle, receives new label order array
renderField (props: RenderFieldProps) => ReactNode undefined Custom render function for each field
className string undefined CSS class for the container
style CSSProperties undefined Inline styles for the container