ElyriAsciiImage
Turns an image into ASCII art: pixels map to sparser or denser characters by brightness, in a single color or the original colors. Decodes top to bottom on viewport entry, then a glint sweeps across and characters flicker; near the pointer they are pushed aside, brightened and scrambled. Adapts to light and dark themes.
Customize
Text color
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Image URL. Cross-origin images need CORS so pixels can be read; otherwise the original image is shown instead |
alt | string | — | Alternative text for screen readers |
columns | number | 100 | Characters per row; higher means more detail |
characters | string | ' .:-=+*#%@' | Character ramp ordered from sparse to dense |
colored | boolean | false | Color each character with its source pixel |
color | string | currentColor | Character color in single-color mode, inherits the text color; also overridable via --elyri-ascii-color |
invert | boolean | false | Invert the brightness mapping (by default bright areas are dense in dark themes and dark areas are dense in light themes) |
animated | boolean | true | Decode from top to bottom on viewport entry |
duration | number | 1200 | Reveal duration in milliseconds |
shimmer | boolean | true | Sweep a diagonal glint across the image periodically |
flicker | number | 0.01 | Fraction of characters that randomly flicker each frame (0-1), 0 disables it |
interactive | boolean | true | Push aside, brighten and scramble characters near the pointer |
radius | number | 90 | Pointer influence radius in CSS pixels |
className | string | — | Extra class name |
Dependencies
Canvas 2DIntersectionObserverResizeObserver