Runaway Button

A button that flees when the cursor approaches, requiring precise human timing to catch.

Test Your AI See this pattern in action in Level 5: Runaway Button
Try Level 5

Demo

Move your cursor toward the button to see it escape

React

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

3.function App() {
4.  return (
5.    <div style={{ position: 'relative', height: '300px' }}>
6.      <RunawayButton
7.        evasionDistance={150}
8.        speed={1.5}
9.        onCatch={() => console.log('Caught!')}
10.      >
11.        Try to click me!
12.      </RunawayButton>
13.    </div>
14.  );
15.}

Custom Button

Custom Button Component
1.import { RunawayButton } from 'anti-ai-ui';
2.import { MyButton } from './MyButton';
3.

4.function App() {
5.  return (
6.    <div style={{ position: 'relative', height: '300px' }}>
7.      <RunawayButton
8.        evasionDistance={150}
9.        onCatch={() => console.log('Caught!')}
10.        renderButton={({ onClick, style, className, children, ref }) => (
11.          <MyButton
12.            ref={ref}
13.            onClick={onClick}
14.            style={style}
15.            className={className}
16.          >
17.            {children}
18.          </MyButton>
19.        )}
20.      >
21.        Try to click me!
22.      </RunawayButton>
23.    </div>
24.  );
25.}

Vanilla JS

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

3.const button = document.getElementById('my-button');
4.const container = document.getElementById('container');
5.

6.const cleanup = makeButtonRunaway(button, {
7.  container,
8.  evasionDistance: 120,
9.  escapeDistance: 80,
10.  onCatch: () => console.log('Caught!')
11.});
12.

13.// Call cleanup() to remove

Props

Prop Type Default Description
evasionDistance number 120 Distance in pixels at which button starts evading
escapeDistance number 80 How far to move when evading (pixels)
container HTMLElement parentElement Container element for bounds (Vanilla only)
onCatch function undefined Callback when button is clicked
renderButton (props: RenderButtonProps) => ReactNode undefined Custom render function for the button (React only)
children ReactNode - Button content (React only)
className string undefined CSS class for styling
style CSSProperties undefined Inline styles (React only)