ascii-img-reactlisted

Use when rendering images as ASCII art in the browser or a React app with the ascii-img-react library — the shape-vector (not brightness-ramp) approach that keeps edges sharp. Trigger when ascii-img-react or <AsciiImage> is named; when the user wants an image-to-ASCII React component, a terminal/retro ASCII image effect on a web page, a click-ripple or rain ASCII animation over an image, or to theme ASCII output via CSS variables; or when they reach for the low-level utilities (sampleCell, sampleGrid, sampleExternalCircles, findBestCharacter, CachedCharacterLookup, applyGlobalContrast / applyDirectionalContrast, NORMALIZED_CHARACTERS). Covers install, the <AsciiImage> props, CORS/sizing/performance caveats, CSS-variable theming, Astro/Next integration, and the 6D shape-vector technique it implements. Not for converting an image file to ASCII from the command line in Python (use image-to-ascii), and not for real-time generative textmode graphics on a WebGL grid (use textmode-js).
vinsonconsulting/claude-skill-foundry · ★ 1 · Web & Frontend · score 74

Install: claude install-skill vinsonconsulting/claude-skill-foundry

# ascii-img-react `ascii-img-react` renders an image as ASCII art in React via an `<AsciiImage>` component. It matches each grid cell to the character whose **shape** fits best (6D shape vectors + nearest-neighbour), so edges stay crisp — unlike a brightness ramp. Pin a version: the package is young (`0.1.0`, MIT). Install + props live below; the full API is in `references/component-api.md`, the algorithm in `references/technique.md`. ## Mental model - Characters are matched by **shape, not brightness**. Six staggered sampling circles per cell form a 6D vector; the nearest character (Euclidean distance) wins. That is why diagonals and curves render as `/`, `\`, `_` rather than a blocky ramp. - The component samples the image on a hidden `<canvas>`, so the **image must be same-origin or CORS-enabled** (`img.crossOrigin = "anonymous"`). A cross-origin image without CORS headers renders blank. - It outputs a `<pre>` of monospace text. **Monospace fonts only** — proportional fonts break the grid. - The `contrast` and `directionalContrast` props are exactly the global and directional contrast-enhancement exponents from the technique (see `references/technique.md`). ## Install ```sh npm add ascii-img-react@0.1.0 # or: bun add / pnpm add / yarn add ``` Peer deps: React 18 or 19 (`react`, `react-dom`). ## Usage ```tsx import { AsciiImage } from 'ascii-img-react'; export function Hero() { return ( <AsciiImage src="/portrait.jpg" // same-or