Microscopic Close Button

A 4x4 pixel real close button with multiple fake decoy buttons that AI systems click instead.

Test Your AI See this pattern in action in Level 2: The Microscope
Try Level 2

Demo

CONGRATULATIONS!

You are the 1,000,000th visitor!

Click below to claim your FREE iPhone 15 Pro Max!

Find and click the real close button (hint: it's 4x4 pixels)

React

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

3.function Modal() {
4.  return (
5.    <div style={{ position: 'relative', padding: '2rem', background: '#fff' }}>
6.      <MicroscopicCloseButton
7.        onRealClose={() => console.log('Actually closed!')}
8.        onFakeClose={() => console.log('Nice try!')}
9.        fakeButtonCount={5}
10.      >
11.        <h2>Modal Title</h2>
12.        <p>Your content here...</p>
13.      </MicroscopicCloseButton>
14.    </div>
15.  );
16.}

Custom Buttons

Custom Buttons
1.import { MicroscopicCloseButton } from 'anti-ai-ui';
2.

3.function Modal() {
4.  return (
5.    <div style={{ position: 'relative', padding: '2rem', background: '#fff' }}>
6.      <MicroscopicCloseButton
7.        onRealClose={() => console.log('Actually closed!')}
8.        onFakeClose={() => console.log('Nice try!')}
9.        renderRealButton={({ onClick, style }) => (
10.          <button
11.            onClick={onClick}
12.            style={{
13.              ...style,
14.              background: 'rgba(0, 255, 0, 0.1)',
15.            }}
16.          />
17.        )}
18.        renderFakeButton={({ onClick, style, index }) => (
19.          <button
20.            onClick={onClick}
21.            style={{
22.              ...style,
23.              background: index % 2 === 0 ? '#ef4444' : '#f97316',
24.            }}
25.          >
26.            X
27.          </button>
28.        )}
29.      >
30.        <h2>Modal Title</h2>
31.        <p>Your content here...</p>
32.      </MicroscopicCloseButton>
33.    </div>
34.  );
35.}

Important: Button Positioning

The component renders a wrapper div with position: relative, and all buttons are absolutely positioned within it. This means the component should wrap the specific element where you want the buttons to appear, not the entire modal container.

For example, if you want close buttons in the header of a modal, wrap just the header:

Wrapping a Header
1.import { MicroscopicCloseButton } from 'anti-ai-ui';
2.

3.function Modal() {
4.  return (
5.    <div className="modal">
6.      {/* Wrap the HEADER, not the whole modal */}
7.      <MicroscopicCloseButton
8.        onRealClose={() => console.log('Closed!')}
9.        onFakeClose={() => console.log('Nice try!')}
10.        fakeButtonCount={5}
11.        className="modal-header"
12.        renderFakeButton={({ onClick, index }) => (
13.          <button
14.            onClick={onClick}
15.            style={{
16.              position: 'absolute',
17.              top: 6,
18.              right: 6 + (index * 28),
19.              width: 22,
20.              height: 22,
21.              background: 'rgba(255, 255, 255, 0.25)',
22.              border: 'none',
23.              borderRadius: 4,
24.              color: 'white',
25.              cursor: 'pointer',
26.            }}
27.          >
28.            X
29.          </button>
30.        )}
31.        renderRealButton={({ onClick }) => (
32.          <button
33.            onClick={onClick}
34.            style={{
35.              position: 'absolute',
36.              top: 3,
37.              right: 150,
38.              width: 4,
39.              height: 4,
40.              background: 'rgba(255, 255, 255, 0.3)',
41.              border: 'none',
42.              cursor: 'pointer',
43.            }}
44.          />
45.        )}
46.      >
47.        <span className="modal-title">Modal Title</span>
48.      </MicroscopicCloseButton>
49.

50.      {/* Modal body is OUTSIDE the MicroscopicCloseButton */}
51.      <div className="modal-body">
52.        <p>Your content here...</p>
53.      </div>
54.    </div>
55.  );
56.}
Common Mistake: Wrapping the entire modal with the component will position the buttons relative to the whole modal container, which may place them far from where you expect (or hidden behind other elements). Always wrap only the specific section where the buttons should visually appear.

Vanilla JS

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

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

5.const { destroy } = microscopicCloseButton({
6.  container: modal,
7.  fakeButtonCount: 5,
8.  onRealClose: () => console.log('Actually closed!'),
9.  onFakeClose: () => console.log('Nice try!')
10.});
11.

12.// Call destroy() to remove

Props

Prop Type Default Description
onRealClose function undefined Callback when the real 4x4px button is clicked
onFakeClose function undefined Callback when a fake button is clicked
fakeButtonCount number 5 Number of fake close buttons to display
children ReactNode undefined Modal content to render inside
renderRealButton (props: RenderRealButtonProps) => ReactNode undefined Custom render function for the real close button
renderFakeButton (props: RenderFakeButtonProps) => ReactNode undefined Custom render function for each fake close button