Add Slack Emoji Maker web application

[simonw]

Make a Slack emoji maker. Slack emojis should be PNGs and square and under 128KB and have transparent backgrounds, so we need to be able to open any image file - or drop it onto the area - and then select and delete a background (have automatic background detection buttons but also allow clicking to select a color which is then expanded out as far as possible). Also a tool for cropping the image to square. And it should show you the current PNG size is KB and if it is small enough, and provide ways to shrink it if not. Anything else you can think of that's appropriate for Slack emoji making would be good too.

Claude Code Fable 5

This PR introduces a complete web-based tool for creating custom Slack emoji from images.

Summary

A new single-file HTML application that guides users through the process of converting any image into a Slack-compatible emoji: square format, transparent background, and under 128KB file size.

Key Features

• Image Loading: Drag-and-drop, file selection, clipboard paste, and automatic scaling of large images (max 1024px)
• Background Removal:
  • Click-based color removal with contiguous or global modes
  • Automatic edge detection and removal
  • Adjustable tolerance slider with feathered edges for smooth transitions
• Image Cropping: Interactive square crop tool with draggable handles and repositioning
• Image Transformation:
  • Trim transparent edges
  • Pad to square without cropping
  • Resize to 128×128 or 64px
  • Color reduction (posterization) for smaller file sizes
• History Management: Full undo/redo support with keyboard shortcuts (Cmd/Ctrl+Z)
• Output & Preview:
  • Real-time file size monitoring with Slack's 128KB limit indicator
  • Live preview in light and dark Slack themes at multiple sizes
  • Download as PNG with custom emoji name
  • Copy to clipboard functionality
• Responsive Design: Mobile-friendly layout that adapts from single-column to two-column editor

Implementation Details

• Pure vanilla JavaScript with no external dependencies
• Canvas-based image manipulation with efficient flood-fill algorithms
• Feathered edge blending for natural-looking transparency transitions
• Pointer events for cross-device crop handle interaction
• Blob-based file handling with proper resource cleanup
• Real-time preview generation and size calculation

https://claude.ai/code/session_01UeXJ6yn95J6fSjoqhPSSos

[claude]

Claude encountered an error —— View job

---

I'll analyze this and get back to you.

[simonw]

Made this with it: