ASCII Background

An animated field of bitmap ASCII characters reveals flowing patterns in emerald light.

 .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@   .:-=+*#%@   .::--===+++***##%%@@

An animated field of bitmap ASCII characters reveals flowing patterns in emerald light. Hover to brighten the character field. Glyphs are rendered in the shader; no font or image is required.

ASCII Background is a vgpu-powered React UI component that renders a WGSL shader through WebGPU. It supports reduced motion and provides a fallback for browsers without WebGPU.

Installation

text

Add the ascii-background component from Hangry UI to this project.

Use the project's package manager to run:
shadcn@latest add https://ui.razeev.com/r/ascii-background.json

Integrate the component with the existing layout and styling.
Keep its interactions and reduced-motion support intact.

How to use

tsx

import { AsciiBackground } from "@/components/hangry-ui/shader/ascii-background";

<AsciiBackground cellSize={14} speed={0.2} intensity={0.9}
  className="grid place-items-center p-12">
  <h2 className="typography-section-title text-white">A different perspective.</h2>
</AsciiBackground>

Props

Prop	Type	Default	Description
`cellSize`	`number`	`14`	Character cell size in CSS pixels, clamped to 7–40.
`speed`	`number`	`0.2`	Nonnegative ambient animation speed. Set 0 to freeze the ambient field.
`intensity`	`number`	`0.9`	Background brightness, clamped to 0–2.
`interactive`	`boolean`	`true`	Enable the pointer effect.
`children`	`ReactNode`	—	Content displayed above the shader.
Native div props	`ComponentProps`	—	Classes, styles, IDs, and accessibility attributes.

Dependencies

Motion
vgpu