<asciify-bg>
Animated ASCII backgrounds for any website. One script tag, zero dependencies, no tracking. Matrix rain, fire, aurora, DNA and 10 more.
- 0dependencies
- <5 kBgzip
- 14animations
- 0network requests
Add to your site in 10 seconds
Paste these two lines anywhere in your HTML. As a direct child of <body> it becomes a fixed full-page background behind your content.
<script src="https://asciify.art/bg.js"></script>
<asciify-bg type="rain" color="green"></asciify-bg>Inside any other element it fills that element: give the parent position: relative (and a height), and put your content after it with position: relative so it stays on top.
Full-page mode sits at z-index: -1: keep your page colour on <html> and leave <body> transparent, or an opaque body background will cover it (the element logs a console hint if it does).
Playground
<script src="https://asciify.art/bg.js"></script>
<asciify-bg type="rain" color="green"></asciify-bg>React / Vue / Svelte
No wrappers needed: it is a standard custom element, so every framework renders it like a <div>. The samples follow your playground settings.
// npm i asciify-bg (or add the bg.js script tag once)
import "asciify-bg";
export function Hero() {
return (
<section style={{ position: "relative", minHeight: 400 }}>
<asciify-bg type="rain" color="green"></asciify-bg>
<h1 style={{ position: "relative" }}>Hello</h1>
</section>
);
}Attributes
All optional, all live: change one from JavaScript and the animation follows. Invalid values fall back to the default.
| attribute | values | default |
|---|---|---|
| type | wave, rain, stars, pulse, noise, grid, aurora, silk, void, morph, fire, circuit, dna, terrain | rain |
| color | green, cyan, pink, amber, purple, mint, white, red or #hex | green |
| speed | 0.1 to 3 (animation speed multiplier) | 1 |
| size | 6 to 24 (font size in px; smaller = denser) | 10 |
| fps | 1 to 60 (frame-rate cap) | 30 |
| paused | boolean attribute; paused="false" plays | off |
| background | #hex, preset name or transparent | #0a0a0a |
| badge | badge="false" hides the small asciify.art link | true |
Clean by design
- No. The script makes no network requests of its own, sets no cookies, reads no storage and has no analytics. The only link is the optional asciify.art badge, which does nothing until someone clicks it.
- With prefers-reduced-motion: reduce the component draws one still frame and never animates. It pauses while it is scrolled out of view or the tab is hidden, and the fps attribute caps the frame rate (30 by default). The canvas is aria-hidden.
- bg.min.js is under 5 kB gzipped and has zero dependencies. bg.js is the same build, unminified and readable.
- Shadow DOM keeps its styles away from yours; the canvas is sized to its box and redrawn on resize at your screen's pixel density.
Source & license
MIT licensed. Read the unminified build at asciify.art/bg.js. Prefer an iframe? Every background page also has a Copy embed button.