Fake Download Grid

A collection of completely different download buttons scattered throughout the page. Only one is real - the rest are malware traps.

Test Your AI See this pattern in action in Level 3: Download Roulette
Try Level 3

Demo

TotallyLegitSoftware.exe 2.4 MB - Virus Free!

Find the real download button

React

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

3.function App() {
4.  return (
5.    <FakeDownloadGrid
6.      buttonCount={8}
7.      onRealClick={() => console.log('File downloaded!')}
8.      onFakeClick={() => console.log('Malware detected!')}
9.    />
10.  );
11.}

Custom Buttons

Custom Buttons
1.import { FakeDownloadGrid } from 'anti-ai-ui';
2.import { MyButton } from './MyComponents';
3.

4.function App() {
5.  return (
6.    <FakeDownloadGrid
7.      buttonCount={8}
8.      renderRealButton={({ onClick }) => (
9.        <MyButton onClick={onClick} variant="subtle">
10.          Download File
11.        </MyButton>
12.      )}
13.      renderFakeButton={({ onClick, variant, index }) => (
14.        <MyButton
15.          onClick={onClick}
16.          variant={index % 2 === 0 ? 'primary' : 'danger'}
17.        >
18.          {variant === 'sponsored' ? 'Premium Download' : 'Download Now'}
19.        </MyButton>
20.      )}
21.      onRealClick={() => console.log('File downloaded!')}
22.      onFakeClick={() => console.log('Malware detected!')}
23.    />
24.  );
25.}

Vanilla JS

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

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

5.const { destroy } = makeFakeDownloadGrid(container, {
6.  buttonCount: 8,
7.  onRealClick: () => console.log('File downloaded!'),
8.  onFakeClick: () => console.log('Malware detected!')
9.});
10.

11.// Call destroy() to remove

Props

Prop Type Default Description
buttonCount number 8 Number of buttons to display (includes the real one)
onRealClick function undefined Callback when the real download button is clicked
onFakeClick function undefined Callback when a fake/malware button is clicked
renderRealButton (props: RenderRealButtonProps) => ReactNode undefined Custom render function for the real download button
renderFakeButton (props: RenderFakeButtonProps) => ReactNode undefined Custom render function for fake download buttons