Floating Banner Ads

Fake banner ads that spawn at random positions, covering real UI elements and confusing automation.

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

Demo

Free Download
Enter your details below

Try to fill the form while ads keep spawning

React

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

3.function App() {
4.  return (
5.    <FloatingBannerAds
6.      adMessages={['Win $1000!', 'Free iPhone!', 'Click Here!']}
7.      spawnInterval={4000}
8.      adLifetime={3000}
9.      onAdClick={(ad) => console.log('Clicked:', ad.text)}
10.    />
11.  );
12.}

Custom Ad

Custom Ad Rendering
1.import { FloatingBannerAds } from 'anti-ai-ui';
2.

3.function App() {
4.  return (
5.    <FloatingBannerAds
6.      adMessages={['Win $1000!', 'Free iPhone!', 'Click Here!']}
7.      spawnInterval={4000}
8.      renderAd={({ ad, style }) => (
9.        <div
10.          style={{
11.            ...style,
12.            background: 'linear-gradient(135deg, #ef4444, #dc2626)',
13.            border: '2px solid gold',
14.          }}
15.          onClick={() => console.log('Clicked:', ad.text)}
16.        >
17.          <span className="blink">{ad.text}</span>
18.        </div>
19.      )}
20.    />
21.  );
22.}

Vanilla JS

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

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

5.const cleanup = createFloatingBannerAds({
6.  container,
7.  adMessages: ['Win $1000!', 'Free iPhone!', 'Click Here!'],
8.  spawnInterval: 4000,
9.  adLifetime: 3000,
10.  onAdClick: (ad) => console.log('Clicked:', ad.text)
11.});
12.

13.// Call cleanup() to remove

Props

Prop Type Default Description
adMessages string[] default spam messages Array of ad messages to display
spawnInterval number 4000 Interval between spawning new ads (ms)
adLifetime number 3000 How long each ad lives before disappearing (ms)
minX / maxX number 20 / 80 X position range as percentage (0-100)
minY / maxY number 20 / 80 Y position range as percentage (0-100)
onAdClick function undefined Callback when an ad is clicked
showCloseButtons boolean true Whether to show close buttons on some ads
renderAd (props: RenderAdProps) => ReactNode undefined Custom render function for individual ads
adStyle CSSProperties undefined Custom inline styles for each ad
adClassName string undefined Custom CSS class for each ad