Components
ASCII Image
Convert images to ASCII art with advanced options including edge detection, dithering algorithms, and customizable charsets.
Installation
Loading installation instructions...
Usage
import { AsciiImage } from "@/components/pluto-ui/ascii-image"<AsciiImage src="https://example.com/image.jpg" width={80} fontSize={6} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | - | Image source URL |
width | number | 100 | ASCII art width in characters |
brightness | number | 0 | Brightness adjustment (-255 to 255) |
contrast | number | 0 | Contrast adjustment (-255 to 255) |
blur | number | 0 | Blur amount in pixels |
dithering | boolean | true | Enable dithering |
ditherAlgorithm | DitherAlgorithm | "floyd" | Dithering algorithm: "floyd", "atkinson", "noise", or "ordered" |
invert | boolean | false | Invert colors |
ignoreWhite | boolean | true | Ignore white pixels |
charset | Charset | "detailed" | Character set: "standard", "blocks", "binary", "hex", "detailed", or "manual" |
manualChar | string | "0" | Custom character for manual charset |
edgeMethod | EdgeMethod | "none" | Edge detection method: "none", "sobel", or "dog" |
edgeThreshold | number | 100 | Threshold for Sobel edge detection (0-255) |
dogEdgeThreshold | number | 100 | Threshold for Difference of Gaussians edge detection |
fontSize | number | 7 | Font size in pixels |
className | string | - | Additional CSS classes |
onAsciiGenerated | (ascii: string) => void | - | Callback when ASCII art is generated |
Examples
Basic Usage
Edge Detection
The component supports two edge detection methods:
- Sobel: Classic edge detection using gradient magnitude
- Difference of Gaussians (DoG): Advanced edge detection using multi-scale filtering
Dithering Algorithms
Four dithering algorithms are available:
- Floyd-Steinberg: Most common, produces good quality
- Atkinson: Softer, more diffused error
- Ordered: Uses Bayer matrix for structured dithering
- Noise: Random dithering for artistic effects
Character Sets
Multiple character sets are available:
- detailed: Full range of characters (default)
- standard: Basic ASCII characters
- blocks: Unicode block characters
- binary: Just 0s and 1s
- hex: Hexadecimal characters
- manual: Custom character
Features
- ✓ Multiple edge detection methods (none, Sobel, DoG)
- ✓ Four dithering algorithms (Floyd-Steinberg, Atkinson, Ordered, Noise)
- ✓ Adjustable brightness, contrast, and blur
- ✓ Multiple character sets including custom
- ✓ Invert colors and ignore white options
- ✓ Theme-aware styling
- ✓ Callback for generated ASCII art
Notes
- The component uses HTML5 Canvas for image processing
- Images are processed client-side in the browser
- For best results, use images with good contrast
- CORS-enabled images are required for cross-origin sources
Credits
This component was inspired by Mikhail-Bespalov (https://codepen.io/Mikhail-Bespalov/full/JoPqYrz) demonstrations.
Animocon
Animated icon buttons with multiple burst and ring animation effects using motion, inspired by mo.js Animocons. Supports toggle states, customizable colors, and 11 different animation effects.
Card Grid
An interactive card grid component with smooth hover animations using motion, where hovering over a card expands it to reveal more content.