Installation
Get started with Anti-AI UI Framework in your project. The framework supports React components and vanilla JavaScript implementations for maximum flexibility.
Package Manager
Install the framework using your preferred package manager:
1.npm install anti-ai-ui
1.yarn add anti-ai-ui
1.pnpm add anti-ai-ui
Requirements
The framework has the following requirements:
React Setup
Import and use React components directly:
1.import { RunawayButton, PopupChaos } from 'anti-ai-ui';2.3.function App() {4. return (5. <div>6. <RunawayButton>Try to click me!</RunawayButton>7. <PopupChaos popupCount={5} />8. </div>9. );10.}
Vanilla JavaScript Setup
For framework-agnostic implementations, import from the vanilla namespace:
1.import {2. makeButtonRunaway,3. makePopupChaos4.} from 'anti-ai-ui/vanilla';5.6.const button = document.getElementById('my-button');7.const container = document.getElementById('container');8.9.makeButtonRunaway(button, {10. container,11. evasionDistance: 15012.});13.14.const cleanup = makePopupChaos({15. popupCount: 516.});17.18.// Later, clean up19.cleanup.destroy();
TypeScript Support
The framework is written in TypeScript and includes comprehensive type definitions. Types are automatically included when you install the package.
1.import { RunawayButton, type RunawayButtonProps } from 'anti-ai-ui';2.import { makeButtonRunaway, type RunawayOptions } from 'anti-ai-ui/vanilla';3.4.// Full type safety and IntelliSense support5.const props: RunawayButtonProps = {6. evasionDistance: 150,7. speed: 1.5,8. onRealClick: () => console.log('Caught!'),9.};
CDN Usage
For quick prototyping or static sites, you can use the CDN version:
1.<!-- Include via CDN -->2.<script src="https://unpkg.com/anti-ai-ui@latest/dist/vanilla/index.js"></script>3.4.<script>5. const { makeButtonRunaway } = AntiAIUI;6.7. const button = document.getElementById('my-button');8. makeButtonRunaway(button, { evasionDistance: 150 });9.</script>
Bundler Configuration
The framework works out of the box with modern bundlers:
Webpack
No additional configuration needed. The package includes CommonJS and ESM builds.
Vite
Works seamlessly with Vite's default configuration.
Next.js
For Next.js 13+ with App Router, components work in Client Components. Add
the "use client" directive:
1.'use client';2.3.import { RunawayButton } from 'anti-ai-ui';4.5.export default function Page() {6. return <RunawayButton>Click me</RunawayButton>;7.}