Popup Chaos

Multiple overlapping dark pattern popups filled with deceptive buttons. Only the small X button actually closes them. Everything else is a trap.

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

Demo

Close all popups using the X button. Don't click the bait buttons!

React

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

3.function App() {
4.  return (
5.    <PopupChaos
6.      popupCount={5}
7.      contained={true}
8.      onAllClosed={() => console.log('All popups closed!')}
9.    />
10.  );
11.}

Custom Popup

Custom Popup
1.import { PopupChaos } from 'anti-ai-ui';
2.

3.function App() {
4.  return (
5.    <PopupChaos
6.      popupCount={4}
7.      contained={true}
8.      renderPopup={({ popup, closePopup, style }) => (
9.        <div
10.          style={{
11.            ...style,
12.            background: 'linear-gradient(135deg, #1e293b, #334155)',
13.            color: '#fff',
14.            borderRadius: '12px',
15.            width: 280,
16.          }}
17.        >
18.          <div style={{ padding: '12px', display: 'flex', justifyContent: 'space-between' }}>
19.            <span>Notification #{popup.id + 1}</span>
20.            <button onClick={closePopup} style={{ background: 'none', border: 'none', color: '#fff' }}>
21.              X
22.            </button>
23.          </div>
24.          <div style={{ padding: '12px' }}>
25.            <p>Custom popup content here</p>
26.            <button style={{ padding: '8px 16px' }}>Fake Action</button>
27.          </div>
28.        </div>
29.      )}
30.    />
31.  );
32.}

Vanilla JS

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

3.const { destroy, closePopup, getExpectedNextId } = popupChaos({
4.  popupCount: 5,
5.  onAllClosed: () => console.log('All popups closed!'),
6.  onWrongClose: (attempted, expected) => {
7.    console.log('Wrong order! Expected:', expected);
8.  }
9.});
10.

11.// Call destroy() to remove all popups

Props

Prop Type Default Description
popupCount number 4 Number of popups to display
contained boolean false If true, popups are contained within parent instead of fixed to viewport
onAllClosed function undefined Callback when all popups are successfully closed
onWrongClose function undefined Callback when user clicks a deceptive/trap button (Vanilla only)
renderPopup (props: RenderPopupProps) => ReactNode undefined Custom render function for popups. Receives popup data, closePopup callback, and default style.
containerStyle CSSProperties undefined Custom inline styles for the container element
containerClassName string undefined Custom CSS class for the container element