ASCII Tiles

A field of glassy tiles made of glowing ASCII characters

ascii-tiles-tw

Customize

Speed

1.00

Opacity

1.00

Glyph Size

Pattern Freq X

6.0

Pattern Freq Y

4.0

Pattern Freq XY

10.0

Tile Density

3.3

Tile Shear

-0.22

Bevel Width

0.02

Bevel Softness

0.10

Refraction

100

Chromatic Spread

0.20

Specular Exp

150

Specular Strength

1.00

Glyph Color

Recess Color

Background

Cursor Interaction

Cursor Radius

129

Cursor Intensity

1.00

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Container width
`height`	string \| number	`"100%"`	Container height
`className`	string	`""`	Additional CSS classes for styling
`children`	ReactNode	`undefined`	Content rendered above the effect
`speed`	number	`1`	Animation speed multiplier (0–3)
`glyphSize`	number	`8`	ASCII glyph cell size in CSS pixels (4–24)
`tileDensity`	number	`3.3`	Glass-tile grid density across the long edge (1–12)
`tileShear`	number	`-0.22`	Diagonal shear factor for the tile lattice (-0.5–0.5)
`bevelWidth`	number	`0.02`	Width of the bevelled rim between tiles (0–0.5)
`bevelSoftness`	number	`0.1`	Bevel falloff softness (0.01–0.4)
`refractionStrength`	number	`100`	Refractive offset across bevels in pixels (0–120)
`chromaticSpread`	number	`0.2`	Chromatic dispersion spread between R and B samples (0–1)
`specularExponent`	number	`150`	Specular highlight exponent (1–256)
`specularStrength`	number	`1`	Specular highlight intensity (0–3)
`patternFreqX`	number	`6`	First sinusoid horizontal frequency (0–20)
`patternFreqY`	number	`4`	Second sinusoid vertical frequency (0–20)
`patternFreqXY`	number	`10`	Cross-product frequency for the third sinusoid (0–20)
`glyphColor`	string	`"#FFFFFF"`	Base lit color of the glyphs in hex format
`recessColor`	string	`"#050D08"`	Color tucked into the recesses between tiles in hex format
`backgroundColor`	string	`"#000000"`	Background fill color in hex format
`opacity`	number	`1`	Master alpha (0–1)
`dpr`	number	`1.5`	Maximum device pixel ratio (caps GPU work) (1–3)
`cursorInteraction`	boolean	`false`	Enable cursor-based pattern destruction near the mouse
`cursorRadius`	number	`129`	Cursor influence radius in CSS pixels (20–400)
`cursorIntensity`	number	`1`	Cursor effect strength (0–1; higher = clearer empty zone)

widthstring | number

Container width

Default"100%"

heightstring | number

Container height

Default"100%"

classNamestring

Additional CSS classes for styling

Default""

childrenReactNode

Content rendered above the effect

Defaultundefined

speednumber

Animation speed multiplier (0–3)

Default1

glyphSizenumber

ASCII glyph cell size in CSS pixels (4–24)

Default8

tileDensitynumber

Glass-tile grid density across the long edge (1–12)

Default3.3

tileShearnumber

Diagonal shear factor for the tile lattice (-0.5–0.5)

Default-0.22

bevelWidthnumber

Width of the bevelled rim between tiles (0–0.5)

Default0.02

bevelSoftnessnumber

Bevel falloff softness (0.01–0.4)

Default0.1

refractionStrengthnumber

Refractive offset across bevels in pixels (0–120)

Default100

chromaticSpreadnumber

Chromatic dispersion spread between R and B samples (0–1)

Default0.2

specularExponentnumber

Specular highlight exponent (1–256)

Default150

specularStrengthnumber

Specular highlight intensity (0–3)

Default1

patternFreqXnumber

First sinusoid horizontal frequency (0–20)

Default6

patternFreqYnumber

Second sinusoid vertical frequency (0–20)

Default4

patternFreqXYnumber

Cross-product frequency for the third sinusoid (0–20)

Default10

glyphColorstring

Base lit color of the glyphs in hex format

Default"#FFFFFF"

recessColorstring

Color tucked into the recesses between tiles in hex format

Default"#050D08"

backgroundColorstring

Background fill color in hex format

Default"#000000"

opacitynumber

Master alpha (0–1)

Default1

dprnumber

Maximum device pixel ratio (caps GPU work) (1–3)

Default1.5

cursorInteractionboolean

Enable cursor-based pattern destruction near the mouse

Defaultfalse

cursorRadiusnumber

Cursor influence radius in CSS pixels (20–400)

Default129

cursorIntensitynumber

Cursor effect strength (0–1; higher = clearer empty zone)

Default1