Gravity Field

UI elements drift toward invisible gravity wells that move and reseed on hover. Target drift during approach requires prediction and adaptation, making it difficult for AI agents to click elements.

Demo

Move your cursor into the field - buttons drift toward gravity wells

React

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

3.function App() {
4.  return (
5.    <GravityField
6.      wellCount={3}
7.      wellStrength={0.5}
8.      noise={2}
9.      reseedOnHover={true}
10.      followMode="follow"
11.      followSpeed={0.005}
12.      showWells={true}
13.      wellColor="#e94560"
14.      style={{ width: '100%', height: 400 }}
15.    >
16.      <button>Submit</button>
17.      <button>Cancel</button>
18.      <button>Confirm</button>
19.    </GravityField>
20.  );
21.}

Vanilla JS

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

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

5.const cleanup = makeGravityField(container, {
6.  wellCount: 3,
7.  wellStrength: 0.5,
8.  noise: 2,
9.  reseedOnHover: true,
10.  followMode: 'follow',
11.  followSpeed: 0.005,
12.  showWells: true,
13.  wellColor: '#e94560'
14.});
15.

16.// Call cleanup() to remove the effect

Props

Prop Type Default Description
wellCount number 3 Number of gravity wells in the field
wellStrength number 0.5 Base strength of gravity wells (0-1)
noise number 2 Random noise added to element positions (px)
reseedOnHover boolean true Reseed well positions when cursor enters
updateInterval number 50 How often to update positions (ms)
followMode 'follow' | 'fixed' | 'repel' | 'orbit' 'follow' How wells react to cursor movement
followSpeed number 0.005 Speed at which wells follow/react to cursor (0-0.1)
showWells boolean true Show visual indicators for gravity wells
wellColor string '#e94560' Color for well particle indicators
initialWellPositions Array<{x, y}> undefined Initial positions for wells (0-1 normalized). Overrides wellCount if provided.
className string undefined Additional CSS class for the container
style CSSProperties undefined Inline styles for the container

Follow Modes

Mode Description
follow Wells slowly drift toward cursor position
fixed Wells stay in their initial positions
repel Wells push away from cursor when nearby
orbit Wells orbit around the cursor position

Bot Angle

Target drift during approach requires prediction and adaptation. AI agents struggle because elements continuously move toward gravity wells, and those wells shift when the cursor enters the container. The combination of physics-based movement, noise, and dynamic well repositioning creates an unpredictable environment that's difficult to automate.