Mediaexperimental

Raster

One picture through four stylised abstractions: blur, glass, glyph, pixel.

Customize

Modehow the picture is abstracted

Modemode

Show the originaldisabled

Reveal on hoverinteractive

Animatedanimated

Tuningoptions for the selected mode

Blur22blurStrength

Distortion18distortion

Glyph cell10cellSize

Glyph setglyphSet

Pixel size18pixelSize

Pixel gap2gridGap

Pixel rounding0.28rounded

TSX

<Raster />

Generated from the controls above. Only props that differ from their defaults are shown.

14 documented props on Raster
Property	Type	Default	Description
`mode`	`"blur" \| "glass" \| "glyph" \| "pixel"`	`"pixel"`	Mode.
`disabled`	`boolean`	`false`	Show the original.
`interactive`	`boolean`	`false`	Reveal on hover.
`animated`	`boolean`	`true`	Animated.
`blurStrength`	`number`	`22`	Blur. Range 4 to 60.
`distortion`	`number`	`18`	Distortion. Range 0 to 50.
`cellSize`	`number`	`10`	Glyph cell. Range 6 to 28.
`glyphSet`	`"ascii" \| "dots" \| "blocks" \| "ink"`	`"ascii"`	Glyph set.
`pixelSize`	`number`	`18`	Pixel size. Range 6 to 48.
`gridGap`	`number`	`2`	Pixel gap. Range 0 to 8.
`rounded`	`number`	`0.28`	Pixel rounding. Range 0 to 1.
`src`	`string`	`—`	Image URL or imported asset.
`alt`	`string`	`—`	Alternative text. Empty string if the image is decorative.
`aspectRatio`	`string`	`"16 / 9"`	CSS aspect ratio for the frame.

0 external runtime dependencies

Ships with nothing but React.

Experimental: still under evaluation and not part of the published package yet.