ASCII Band

Shaders 1

About

A band of light drawn in flickering ASCII characters.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds ASCII Band to your project and fits it to your theme.

Code

How ASCII Band is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import AsciiBand from "@/components/ui/ascii-band";

const settings = {
  backgroundColor: "#000000",
  hue: 0,
  saturation: 1,
  intensity: 1,
  softness: 1,
  grain: 0.03,
  characters: " =+xX80S#@",
  cellSize: 16,
  glyphOpacity: 1,
  gaps: 0.22,
  flicker: 1.5,
  speed: 1,
  flow: 1,
  interactive: true,
  smearStrength: 1,
  smearRadius: 0.1,
};

export default function AsciiBandDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };

  return (
    <div className="h-screen w-full">
      <AsciiBand
        backgroundColor={s.backgroundColor}
        hue={s.hue}
        saturation={s.saturation}
        intensity={s.intensity}
        softness={s.softness}
        grain={s.grain}
        characters={s.characters}
        cellSize={s.cellSize}
        glyphOpacity={s.glyphOpacity}
        gaps={s.gaps}
        flicker={s.flicker}
        speed={s.speed}
        flow={s.flow}
        interactive={s.interactive}
        smearStrength={s.smearStrength}
        smearRadius={s.smearRadius}
      />
    </div>
  );
}