Scrambling ASCII Art

A TypeScript library for creating scrambling ASCII art animations with optional React support.

Features

• 🎨 ASCII art scrambling animation
• ⚛️ React component support
• 🎮 Customizable animation speed and scale
• 📦 Zero dependencies
• 💪 TypeScript support
• 🌐 Browser compatible

Installation

npm install scrambling-ascii-art

Usage

Vanilla JavaScript/TypeScript

import { AsciiScrambleEngine } from 'scrambling-ascii-art';

const container = document.querySelector('#container');
const art = [
  " ∧＿∧ ",
  " （｡･ω･） ",
  "⊂　　ノ ",
  " しーＪ ",
];

const scrambler = new AsciiScrambleEngine(container, {
  art: art,
  speed: 80, // Optional: animation speed (default: 40)
  scale: 100 // Optional: display scale in percentage (default: 100)
});

// Start animation
scrambler.scramble().then(() => {
  console.log('Animation completed!');
});

// Stop animation if needed
scrambler.stop();

React Component

import { AsciiScramble } from 'scrambling-ascii-art/react';

function App() {
  const art = [
    " ∧＿∧ ",
    " （｡･ω･） ",
    "⊂　　ノ ",
    " しーＪ ",
  ];

  return (
    <AsciiScramble
      art={art}
      speed={80}
      scale={100}
      onComplete={() => console.log('Animation completed')}
    />
  );
}

API Reference

AsciiScramble Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | art | string[] | Required | ASCII art as array of strings | | speed | number | 40 | Animation speed (higher is slower) | | scale | number | 100 | Display scale in percentage |

Methods

| Method | Return Type | Description | |--------|-------------|-------------| | scramble() | Promise | Start scrambling animation | | stop() | void | Stop current animation |

Contributing

Contributions are welcome! Feel free to submit a Pull Request.

License

MIT License - see LICENSE file for details