Canvas
ASCII Renderer
OGL WebGL image rendered as animated ASCII dot-grid characters with scanline displacement.
Preview
WebGL image rendered as an animated ASCII dot-grid with scanline displacement.
Attributes
Installation
pnpm dlx motion-blocks add ascii-rendererUsage
---import "@/components/motion-blocks/ascii-renderer-element.ts";--- <motion-ascii-renderer image="/images/your-image.jpg" density={25.0} strength={3.0} color="#6c87bc" background-color="#17181A" class="w-full h-[400px]"/>API Reference
| Attribute | Type | Default |
|---|---|---|
image URL of the image to render as ASCII. | string | "" |
density Density of the ASCII character grid (higher = more characters). | number | 25.0 |
strength Intensity of the ASCII character brightness based on image luminance. | number | 3.0 |
color Color of the ASCII characters (any CSS color value). | string | "#6c87bc" |
background-color Background color behind the ASCII characters (any CSS color value). | string | "#17181A" |