Animated ASCII Backgrounds for Web Apps – ASCIIGround.js

ASCIIGround is a JavaScript library that creates animated or static ASCII backgrounds with multiple pattern options.

Features

• Multiple Animations: Perlin noise, sine waves, digital rain, static noise, and Japanese Matrix rain
• Customizable Character Sets: Define your own ASCII characters for different visual effects
• Responsive Design: Automatically adapts to canvas resizing and viewport changes
• Performance Optimized: Efficient rendering loop with configurable frame rates
• Full-Page Utility: Helper function for creating full-screen ASCII backgrounds
• Flexible Styling: Custom fonts, colors, and background colors
• Module Support: Works with both ES modules and UMD/CDN implementations

How to use it:

1. Install ASCIIGround with NPM:

# NPM
$ npm install asciiground

2. Or use the UMD build:

<script src="/dist/asciiground.umd.js"></script>

3. Create an HTML5 canvas element on your webpage:

<canvas id="example"></canvas>

4. Get the canvas element and instantiate ASCIIGround:

// TypeScript
import { ASCIIGround } from 'asciiground';
const canvas = document.getElementById('example') as HTMLCanvasElement;
const asciiGround = new ASCIIGround(canvas, {
  // options here
});
asciiGround.init()

// Browser
const canvas = document.getElementById('example')
const asciiGround = new ASCIIGround.default(canvas, {
  // options here
})
asciiGround.init()

5. Create a fullpage ASCII background:

import { createFullPageBackground } from 'asciiground';
const matrix = createFullPageBackground({
  // options here
});

6. All possible configuration options.

/** Animation pattern type. */
pattern: 'perlin' | 'wave' | 'rain' | 'static' | 'japan-rain'

/** ASCII characters to use for rendering (from lightest to darkest). */
characters: string[]

/** Animation speed multiplier. */
speed: number

/** Font size in pixels. */
fontSize?: number

/** Font family. */
fontFamily?: string

/** Text color. */
color?: string

/** Background color. */
backgroundColor?: string

/** Direction of animation, if supported by the pattern. */
direction?: 'left' | 'right' | 'up' | 'down'

/** Horizontal wave amplitude (for wave pattern). */
amplitudeX?: number

/** Vertical wave amplitude (for wave pattern). */
amplitudeY?: number

/** Frequency of wave pattern. */
frequency?: number

/** Perlin noise scale factor. */
noiseScale?: number

/** Rain density (for rain/japan-rain patterns), 0-1. */
rainDensity?: number

/** Rain direction (for rain pattern). */
rainDirection?: 'vertical' | 'diagonal-left' | 'diagonal-right'

The post Animated ASCII Backgrounds for Web Apps – ASCIIGround.js appeared first on CSS Script.