Live preview

speed1.0font size14accent

intensity0.85wind0

Framework examples

FireBackground.tsx

import { useEffect, useRef } from 'react';
import { asciiBackground } from 'asciify-engine';

export function FireBackground() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!ref.current) return;
    const { destroy } = asciiBackground(ref.current, {
      type: 'fire',
      opacity: 0.15,
      colorScheme: 'auto',
    });
    return destroy;
  }, []);

  return (
    <div ref={ref} style={{ position: 'relative', minHeight: '100vh' }}>
      {/* your content goes here */}
    </div>
  );
}

Fire-specific options

Option	Type	Default	Description
`intensity`	number	0.85	Base heat seeded at the bottom row (0–1).
`wind`	number	0	Horizontal wind bias (-2 left … +2 right).

Shared options

Option	Type	Default	Description
`opacity`	number	0.15	Overall canvas opacity (0–1).
`colorScheme`	'dark' \| 'light' \| 'auto'	'auto'	Color palette. 'auto' follows prefers-color-scheme.
`fontSize`	number	14	Character size in px — controls grid density.
`speed`	number	1	Animation speed multiplier.
`interactive`	boolean	true	Enable mouse/pointer interaction.
`zIndex`	number	0	CSS z-index of the injected canvas.

Direct renderer

Use the standalone render function directly in your own RAF loop for full control.

renderFireBackground.ts

import { renderFireBackground } from 'asciify-engine';

const canvas = document.querySelector('canvas')!;
const ctx = canvas.getContext('2d')!;

const colors = {
  primary:    '#d4ff00',
  secondary:  '#ffffff',
  background: '#0a0a0a',
};

const start = performance.now();

function tick() {
  const t = (performance.now() - start) / 1000;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  renderFireBackground(ctx, canvas.width, canvas.height, t, colors, 0.9);
  requestAnimationFrame(tick);
}

requestAnimationFrame(tick);