Mitosis Button

Buttons that multiply when clicked. Only one is "real" at any time. Click the real one to win, click a fake and more spawn.

Demo

Buttons multiply on their own. Find the real one to win. Wrong clicks spawn more!

React

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

3.function App() {
4.  return (
5.    <div style={{ position: 'relative', height: '300px' }}>
6.      <MitosisButton
7.        initialCount={6}
8.        maxButtons={20}
9.        multiplyBy={2}
10.        onWin={() => console.log('You win!')}
11.      >
12.        Click me
13.      </MitosisButton>
14.    </div>
15.  );
16.}

Custom Button

Custom Button Component
1.import { MitosisButton } from 'anti-ai-ui';
2.import { MyButton } from './MyButton';
3.

4.function App() {
5.  return (
6.    <div style={{ position: 'relative', height: '300px' }}>
7.      <MitosisButton
8.        initialCount={6}
9.        onWin={() => console.log('You win!')}
10.        renderButton={({ onClick, style, className, children }) => (
11.          <MyButton
12.            onClick={onClick}
13.            style={style}
14.            className={className}
15.          >
16.            {children}
17.          </MyButton>
18.        )}
19.      >
20.        Submit
21.      </MitosisButton>
22.    </div>
23.  );
24.}

Vanilla JS

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

3.const button = document.getElementById('my-button');
4.

5.const cleanup = mitosisButton(button, {
6.  maxClones: 8,
7.  decayMs: 6000,
8.  initialClones: 3,
9.  onRealClick: () => console.log('Real button clicked!'),
10.  onFakeClick: (index) => console.log('Fake button clicked:', index)
11.});
12.

13.// Call cleanup() to remove

Props (React)

Prop Type Default Description
initialCount number 6 Initial number of buttons
maxButtons number 20 Maximum buttons before removal mode begins
multiplyBy number 2 Number of buttons to spawn per click
onClick function undefined Callback on each click (not the winning click)
onWin function undefined Callback when reduced to 1 button and clicked
renderButton (props: RenderButtonProps) => ReactNode undefined Custom render function for buttons
className string undefined CSS class for buttons
style CSSProperties undefined Inline styles for buttons
children ReactNode 'Click me' Button label

Options (Vanilla)

Option Type Default Description
maxClones number 8 Maximum number of clone buttons
decayMs number 6000 Time before clones automatically disappear (ms)
initialClones number 0 Number of clones to spawn on init
realIndexStrategy 'rotate' | 'random' 'rotate' How to pick which button is "real"
onRealClick function undefined Callback when real button clicked
onFakeClick function undefined Callback when fake button clicked