Codeptor

Ascii Shader Tsx — AI skill for Claude Code

AI community

Agent skill for generating animated ASCII art, dithered visuals, and shader-like effects as React/TSX components.

How to install Ascii Shader Tsx

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Codeptor/ascii-shader-tsx and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Ascii Shader Tsx does

Agent skill for generating animated ASCII art, dithered visuals, and shader-like effects as React/TSX components. Works with Claude Code, Gemini CLI, Cursor, Windsurf, and any AI coding agent. 9 art styles, 8 dithering algorithms, procedural animation, CRT/glitch FX.

Alternatives in AI

Pixel Agents — Compressed Reference — VS Code extension with embedded React webview: pixel art office where AI agents (Claude Code terminals) are an 6.5k ★
WindsurfAPI — Turn Windsurf / Devin Desktop's 100+ AI models (Claude, GPT, Gemini, DeepSeek, Kimi, GLM, SWE) into OpenAI-, A 3k ★
Ante — Ghost in your shell 1.9k ★

README

ascii-shader-tsx

An agent skill for generating animated ASCII art, dithered visuals, and shader-like effects as self-contained React/TSX components.

Works with any AI coding agent that supports skill/instruction files — Claude Code, Gemini CLI, Cursor, Windsurf, Cline, or any agent that can read markdown references.

Combines the [Glyph](https://github.com/Codeptor/glyph) rendering engine (9 art styles, 8 dithering algorithms, 6 FX presets) with procedural animation techniques (simplex noise, particles, value fields, feedback buffers) into a comprehensive reference that your agent reads to generate production-ready components.

What It Does

You describe what you want — your agent reads the relevant reference docs and generates a single `.tsx` file with everything inlined. Zero external dependencies beyond React.

**Generative mode** — no image input needed:

"create a matrix rain background with CRT scanlines"
"animated noise field with teal/purple plasma"
"blockchain network visualization with flowing hex data"

**Source mode** — process images, video, or webcam:

"convert this image to ASCII art with Floyd-Steinberg dithering"
"webcam feed rendered as braille characters"
"video with halftone dot effect and retro amber palette"

What's Inside

From Glyph Engine

Category	Contents
Art Styles	Classic, Halftone (circle/square/diamond/pentagon/hexagon), Braille (3 variants), DotCross, Line, Particles, Retro (5 duotones), Terminal, Claude
Dithering	Floyd-Steinberg, Bayer 8x8, Atkinson, Jarvis-Judice-Ninke, Stucki, Sierra, Sierra-Lite
FX	CRT (scanlines + phosphor + bloom), Matrix Rain, Noise, Intervals, Beam, Glitch
Color Modes	Grayscale, Fullcolor, Matrix Green, Amber, Sepia, Cool-Blue, Neon, Custom
Rendering	BT.709 luminance, sRGB linearization LUT, edge detection, vignette