react-video-ascii — Video → live ASCII React component

• Source: https://github.com/LucasHJin/react-video-ascii · live demo: https://video-ascii-demo.vercel.app/ · npm: react-video-ascii
• Category: effect — WebGL2-accelerated video-as-live-ASCII React component
• Role for KN-86: the interaction-grammar north star for the on-screen ASCII aesthetic. Its full prop matrix is distilled into the project-wide ASCII Effect Spec. KN-86 itself doesn’t run React; the grammar — hover-brighten-with-trail, click-ripple, load-reveal — translates to KN-86’s keyboard-driven equivalents in the spec.
• License / caveats: check the repo’s LICENSE before vendoring. Published as an npm package; the recommended path for web-side KN-86 surfaces (the documentation site, marketing pages, the desktop emulator if Electron-based) is npm install react-video-ascii, not source vendoring. For the on-device KN-86 runtime, the grammar transfers; the implementation is independent (see libcaca).

What it is

A React component that takes a video element (<video> source, webcam stream, or any DOM video reference) and renders it live as colour ASCII art on a <canvas>, using WebGL2 for the per-frame raster→glyph conversion. The result is a high-frame-rate, interactive ASCII surface that responds to mouse hover and click events with built-in animation primitives — and ships with a load-reveal animation on first paint.

For KN-86 the value is not the WebGL implementation (the Pi can’t run WebGL2 on-device); it’s the prop matrix that defines what an ASCII-rendered interactive surface should be able to do. Distilled into ascii-effects.md as the KN-86-internal spec.

Full prop matrix (verbatim from the README)

Top-level props

Prop	Type	Default	Range	Notes
numColsRaw	number	250	20–350	Number of character columns.
brightnessRaw	number	1.0	0.0–2.0	Brightness multiplier.
saturationRaw	number	1.0	0.0–2.0	Saturation multiplier.
bgOpacityRaw	number	0.3	0.0–1.0	Background opacity.
chars	string	(standard ramp)	—	Character set, dark to bright.
charMode	'shape' | 'luminance'	'shape'	—	shape matches glyph silhouettes; luminance uses brightness.
cropFocus	'left' | 'center' | 'right'	'center'	—	Crop anchor when aspect mismatch.
mouseEffect	boolean | MouseEffectOptions	true	—	Hover effects.
clickEffect	boolean | ClickEffectOptions	true	—	Click effects.
revealEffect	boolean | RevealEffectOptions	false	—	Reveal animation on load.

MouseEffectOptions

Prop	Type	Default	Range	Notes
style	'brighten' | 'scatter'	'brighten'	—	brighten highlights chars; scatter replaces them.
trailLen	number	15	0–30	(brighten) Trail positions tracked.
brightness	number	2.0	0.2–5.0	(brighten) Brightness boost at the cursor.
scatterChars	string	'->o'	—	(scatter) Chars substituted near cursor.
radius	number	0.08 / 0.05	0.03–0.2	Effect radius as fraction of smaller canvas dim.
duration	number	1.0	0.1–4	Seconds the effect lingers after cursor leaves.

ClickEffectOptions

Prop	Type	Default	Range	Notes
style	'ripple' | 'spread'	'ripple'	—	ripple sends a brightness ring outward; spread expands a scatter region.
brightness	number	1.1	1.05–2.0	(ripple) Brightness of the ripple ring.
spreadExpandDuration	number	1.5	0.5–5.0	(spread) Seconds for the region to fully expand.
spreadSpeed	number	7.5	0.5–10.0	(spread) Speed of the spread wave front.

RevealEffectOptions

Prop	Type	Default	Range	Notes
type	'diagonal' | 'radial' | 'random'	'random'	—	Pattern in which characters appear on load.
duration	number	0.4	0.1–4	Reveal animation duration in seconds.

Default chars ramp (verbatim)

 `.',-_:!;|\"~+^lr`\/L`>t<v=Tz?icf1{sIxY*jJno}CZyVwmSXRqM$O%#9&NW0Q@

72 characters, ordered dark to bright. KN-86 adopts this verbatim as the project-default ramp in ascii-effects.md.

Key takeaways for KN-86

• The prop matrix is the spec. The full set above is exactly the surface KN-86 wants to expose through NoshAPI for ASCII rendering. ASCII Effect Spec distills this into the KN-86-internal grammar.
• charMode: 'shape' as the project default. shape matches glyph silhouettes against image features (corner detection, edge gradients); luminance ramps purely by brightness. On a monochrome-amber device with a constrained palette ramp, shape preserves more visible detail and reads as more deliberate. KN-86 commits to shape by default.
• Three event types — hover, click, reveal. Maps cleanly onto KN-86’s keyboard-cursor-position + commit-keystroke + on-load lifecycle. See ascii-effects.md for the translation.
• WebGL2 is not the on-device path. KN-86 hardware can’t run WebGL2. The implementation reference for the device is libcaca (CPU, ncurses-style render). The grammar transfers losslessly; the implementation doesn’t.
• The demo image (saved locally) is worth keeping. The repo’s README hero image is served from a GitHub user-attachments URL that the user warned will eventually expire. The local copy at effect/screenshots/react-video-ascii-demo.png is the durable reference.
• Live demo at video-ascii-demo.vercel.app is the best single way to feel the prop tunables in action — worth a periodic re-visit when scoping the cart-author SDK’s ASCII-tunable surface to confirm we’re exposing the right knobs.

Image

The README hero image — captured locally because the upstream URL is a signed/temporary GitHub user-attachments link that may expire. Shows the live ASCII rendering at the project-default tunables (numColsRaw 250, charMode ‘shape’, mouseEffect ‘brighten’ with trail).

Notes

• Cross-link ascii-effects.md — the KN-86-internal spec distilled from this entry’s prop matrix.
• Cross-link libcaca.md — the engine reference for the on-device implementation.
• Cross-link no-more-secrets (Batch 4) — sibling reveal-effect under the unified (reveal ...) NoshAPI primitive per the spec.
• Cross-link BOOTSTRA.386 and AetherTune (Batches 4+3) — the boot-animation references that compose with this spec’s reveal:diagonal for the hand-off into the first interactive frame.
• License note repeat: prefer npm install react-video-ascii over source vendoring for any web-side use. On-device implementation is independent.