Help us improve
Share bugs, ideas, or general feedback.
From claude-skills
Generate animated ASCII art from images with subject detection, blurred pixelated backgrounds, and dynamic visual effects. Use when asked to create ASCII art, convert an image to ASCII, generate pixel art, add animated text art effects, or make retro-style visual art from photos.
npx claudepluginhub ckorhonen/claude-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/claude-skills:ascii-pixel-artThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate animated ASCII art from images with subject detection, blurred pixelated backgrounds, and dynamic visual effects.
Guides technical evaluation of code review feedback: read fully, restate for understanding, verify against codebase, respond with reasoning or pushback before implementing.
Share bugs, ideas, or general feedback.
Generate animated ASCII art from images with subject detection, blurred pixelated backgrounds, and dynamic visual effects.
Transform images into interactive ASCII art with sophisticated visual effects. Uses computer vision to detect subjects, creates atmospheric backgrounds, and adds cinematic animations including pulse effects, diagonal sweeps, random flickers, and interactive hover responses.
✅ Use when:
❌ Do NOT use when:
Required packages:
pip install pillow rembg numpy
System requirements:
python3 scripts/ascii_pixel_effect.py <input_image> [output.html]
# Generate with default output name
python3 scripts/ascii_pixel_effect.py portrait.jpg
# Specify output file
python3 scripts/ascii_pixel_effect.py photo.png artwork.html
# Process multiple images
for img in *.jpg; do
python3 scripts/ascii_pixel_effect.py "$img" "${img%.jpg}.html"
done
1. Load and Resize
2. Build Blurred Background
3. Subject Detection
4. Pixel Grid Overlay
5. Build Character Grid
. character in dark blue (40, 65, 100)@#S08Xox+=;:-,. (inverted luminance)6. Composite Layers
7. Animate (JavaScript)
| Parameter | Value | Purpose |
|---|---|---|
| TARGET_WIDTH | 900px | Output image width |
| CELL_W × CELL_H | 11×14px | Character cell dimensions |
| GRID_STEP | 24px | Pixel grid interval |
| Blur radius | 14 | Background blur strength |
| BG darken | 0.65 | Background darkening (35% darker) |
| BG desaturate | 50% | Background color reduction |
| Subject threshold | 0.25 | Mask mean for subject detection |
| ASCII ramp | @#S08Xox+=;:-,. | Density gradient (dark→light) |
| BG dot color | (40, 65, 100) | Background character RGB |
| BG dot opacity | 30% | Background character transparency |
| Grid opacity | 5% | Pixel grid visibility |
def normalize_color(r, g, b):
"""Preserve hue, maximize brightness"""
mx = max(r, g, b, 1)
return int(r/mx*255), int(g/mx*255), int(b/mx*255)
This normalizes RGB values so the brightest channel reaches 255, preserving hue while maximizing color saturation for subject pixels.
Self-contained HTML file:
Visual effects:
Image Selection:
Performance:
Artistic Control:
Common Issues:
skills/ascii-pixel-effect-v2/SKILL.md for implementationMIT License - Free to use and modify