Live preview

speed1.0font size14accent

roughness0.55heightScale0.55

Framework examples

TerrainBackground.tsx

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

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

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

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

Terrain-specific options

Option	Type	Default	Description
`roughness`	number	0.55	FBM roughness — higher = more jagged terrain.
`heightScale`	number	0.55	Vertical height scale of the landscape.

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.

renderTerrainBackground.ts

import { renderTerrainBackground } 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);
  renderTerrainBackground(ctx, canvas.width, canvas.height, t, colors, 0.9);
  requestAnimationFrame(tick);
}

requestAnimationFrame(tick);