ASCII Tiles

A field of glassy tiles made of glowing ASCII characters

ascii-tiles-tw

Customize

Tweak the props live

Animation & Glyphs

Speed1

Opacity1

Glyph Size8

Pattern Freq X6

Pattern Freq Y4

Pattern Freq XY10

Glass Tiles

Tile Density3.3

Tile Shear-0.22

Bevel Width0.02

Bevel Softness0.1

Refraction100

Chromatic Spread0.2

Specular Exp150

Specular Strength1

Color & Cursor

Glyph Color

#FFFFFF

Recess Color

#050D08

Background

#000000

Cursor Interaction

Cursor Radius129

Cursor Intensity1

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

Default:undefined

speednumber

Animation speed multiplier (0–3)

Default:1

glyphSizenumber

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

Default:8

tileDensitynumber

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

Default:3.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)

Default:0.02

bevelSoftnessnumber

Bevel falloff softness (0.01–0.4)

Default:0.1

refractionStrengthnumber

Refractive offset across bevels in pixels (0–120)

Default:100

chromaticSpreadnumber

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

Default:0.2

specularExponentnumber

Specular highlight exponent (1–256)

Default:150

specularStrengthnumber

Specular highlight intensity (0–3)

Default:1

patternFreqXnumber

First sinusoid horizontal frequency (0–20)

Default:6

patternFreqYnumber

Second sinusoid vertical frequency (0–20)

Default:4

patternFreqXYnumber

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

Default:10

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)

Default:1

dprnumber

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

Default:1.5

cursorInteractionboolean

Enable cursor-based pattern destruction near the mouse

Default:false

cursorRadiusnumber

Cursor influence radius in CSS pixels (20–400)

Default:129

cursorIntensitynumber

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

Default:1