> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/anthropics/skills/llms.txt
> Use this file to discover all available pages before exploring further.
# Slack GIF Creator
> Create optimized animated GIFs for Slack with proper dimensions, file size, and visual polish
# Slack GIF Creator Skill
The Slack GIF Creator skill provides utilities and knowledge for creating animated GIFs optimized for Slack. It handles technical constraints, provides drawing tools, and offers animation concepts to create polished, performant GIFs for emoji and messages.
## When to Use
Use this skill when users request:
* "Make me a GIF of X doing Y for Slack"
* "Create an animated emoji"
* "I need a custom Slack GIF"
* Animated content optimized for Slack's requirements
## Slack Requirements
### Dimensions
**Size**: 128x128 pixels (recommended)
**Use case**: Custom animated emoji in Slack
**Best for**: Icons, reactions, small animations
**Size**: 480x480 pixels
**Use case**: GIFs posted in messages
**Best for**: Larger animations, more detailed content
### Performance Parameters
* **FPS**: 10-30 frames per second (lower = smaller file size)
* **Colors**: 48-128 colors (fewer = smaller file size)
* **Duration**: Keep under 3 seconds for emoji GIFs
Start with 10 FPS and 48 colors for emoji GIFs. This keeps file sizes small while maintaining smooth animation.
## Core Workflow
Creating a GIF follows three steps:
```python theme={null}
from core.gif_builder import GIFBuilder
from PIL import Image, ImageDraw
# 1. Create builder
builder = GIFBuilder(width=128, height=128, fps=10)
# 2. Generate frames
for i in range(12):
frame = Image.new('RGB', (128, 128), (240, 248, 255))
draw = ImageDraw.Draw(frame)
# Draw your animation using PIL primitives
# (circles, polygons, lines, etc.)
builder.add_frame(frame)
# 3. Save with optimization
builder.save('output.gif', num_colors=48, optimize_for_emoji=True)
```
## Drawing Graphics
### Working with User Images
When users upload images:
* **Use directly**: "animate this", "split this into frames"
* **Use as inspiration**: "make something like this"
```python theme={null}
from PIL import Image
uploaded = Image.open('file.png')
# Use directly, or just as reference for colors/style
```
### Drawing from Scratch
Use PIL ImageDraw primitives for all graphics:
```python theme={null}
draw.ellipse([x1, y1, x2, y2],
fill=(r, g, b),
outline=(r, g, b),
width=3)
```
```python theme={null}
points = [(x1, y1), (x2, y2), (x3, y3), ...]
draw.polygon(points,
fill=(r, g, b),
outline=(r, g, b),
width=3)
```
```python theme={null}
draw.line([(x1, y1), (x2, y2)],
fill=(r, g, b),
width=5)
```
```python theme={null}
draw.rectangle([x1, y1, x2, y2],
fill=(r, g, b),
outline=(r, g, b),
width=3)
```
Don't use emoji fonts (unreliable across platforms) or assume pre-packaged graphics exist. Draw everything using PIL primitives.
### Making Graphics Look Good
Polished graphics require attention to detail:
**Use Thicker Lines**
* Always set `width=2` or higher for outlines
* Thin lines (width=1) look choppy and amateurish
**Add Visual Depth**
* Use gradients for backgrounds (`create_gradient_background`)
* Layer multiple shapes for complexity
* Example: A star with a smaller star inside
**Make Shapes Interesting**
* Don't draw plain circles - add highlights, rings, or patterns
* Stars can have glows (draw larger, semi-transparent versions behind)
* Combine shapes (stars + sparkles, circles + rings)
**Pay Attention to Colors**
* Use vibrant, complementary colors
* Add contrast (dark outlines on light shapes, vice versa)
* Consider overall composition
**Complex Shapes**
* Use combinations of polygons and ellipses
* Calculate points carefully for symmetry
* Add details (hearts can have highlight curves, snowflakes have intricate branches)
Be creative and detailed! A good Slack GIF should look polished, not like placeholder graphics.
## Available Utilities
### GIFBuilder
Assembles frames and optimizes for Slack:
```python theme={null}
from core.gif_builder import GIFBuilder
builder = GIFBuilder(width=128, height=128, fps=10)
builder.add_frame(frame) # Add single PIL Image
builder.add_frames(frames) # Add list of frames
builder.save('out.gif',
num_colors=48,
optimize_for_emoji=True,
remove_duplicates=True)
```
### Validators
Check if GIF meets Slack requirements:
```python theme={null}
from core.validators import validate_gif, is_slack_ready
# Detailed validation
passes, info = validate_gif('my.gif', is_emoji=True, verbose=True)
# Quick check
if is_slack_ready('my.gif'):
print("Ready!")
```
### Easing Functions
Create smooth motion instead of linear:
```python theme={null}
from core.easing import interpolate
# Progress from 0.0 to 1.0
t = i / (num_frames - 1)
# Apply easing
y = interpolate(start=0, end=400, t=t, easing='ease_out')
# Available: linear, ease_in, ease_out, ease_in_out,
# bounce_out, elastic_out, back_out
```
Easing functions make animations feel natural and professional. Use `ease_out` for objects coming to rest, `ease_in` for objects starting to move.
### Frame Helpers
Convenience functions for common needs:
```python theme={null}
from core.frame_composer import (
create_blank_frame, # Solid color background
create_gradient_background, # Vertical gradient
draw_circle, # Helper for circles
draw_text, # Simple text rendering
draw_star # 5-pointed star
)
```
## Animation Concepts
Offset object position with oscillation:
* Use `math.sin()` or `math.cos()` with frame index
* Add small random variations for natural feel
* Apply to x and/or y position
```python theme={null}
import math
offset_x = math.sin(i * 0.5) * 3
offset_y = math.cos(i * 0.7) * 2
```
Scale object size rhythmically:
* Use `math.sin(t * frequency * 2 * math.pi)` for smooth pulse
* For heartbeat: two quick pulses then pause (adjust sine wave)
* Scale between 0.8 and 1.2 of base size
```python theme={null}
scale = 1.0 + 0.2 * math.sin(t * 2 * math.pi)
```
Object falls and bounces:
* Use `interpolate()` with `easing='bounce_out'` for landing
* Use `easing='ease_in'` for falling (accelerating)
* Apply gravity by increasing y velocity each frame
Rotate object around center:
* PIL: `image.rotate(angle, resample=Image.BICUBIC)`
* For wobble: use sine wave for angle instead of linear
```python theme={null}
angle = i * 30 # 30 degrees per frame
rotated = image.rotate(angle, resample=Image.BICUBIC)
```
Gradually appear or disappear:
* Create RGBA image, adjust alpha channel
* Or use `Image.blend(image1, image2, alpha)`
* Fade in: alpha from 0 to 1
* Fade out: alpha from 1 to 0
Move object from off-screen to position:
* Start position: outside frame bounds
* End position: target location
* Use `interpolate()` with `easing='ease_out'` for smooth stop
* For overshoot: use `easing='back_out'`
Scale and position for zoom effect:
* Zoom in: scale from 0.1 to 2.0, crop center
* Zoom out: scale from 2.0 to 1.0
* Can add motion blur for drama (PIL filter)
Create particles radiating outward:
* Generate particles with random angles and velocities
* Update each particle: `x += vx`, `y += vy`
* Add gravity: `vy += gravity_constant`
* Fade out particles over time (reduce alpha)
Combine concepts for unique effects: bouncing + rotating, pulsing + sliding, fade + zoom. Use PIL's full capabilities creatively.
## Optimization Strategies
Only optimize when file size is too large:
1. **Fewer frames**: Lower FPS (10 instead of 20) or shorter duration
2. **Fewer colors**: `num_colors=48` instead of 128
3. **Smaller dimensions**: 128x128 instead of 480x480
4. **Remove duplicates**: `remove_duplicates=True` in save()
5. **Emoji mode**: `optimize_for_emoji=True` auto-optimizes
```python theme={null}
# Maximum optimization for emoji
builder.save(
'emoji.gif',
num_colors=48,
optimize_for_emoji=True,
remove_duplicates=True
)
```
Start with these optimizations for emoji GIFs. For message GIFs, you can use higher quality settings (more colors, higher FPS).
## Philosophy
This skill provides:
* **Knowledge**: Slack's requirements and animation concepts
* **Utilities**: GIFBuilder, validators, easing functions
* **Flexibility**: Create animation logic using PIL primitives
It does NOT provide:
* Rigid animation templates or pre-made functions
* Emoji font rendering (unreliable across platforms)
* A library of pre-packaged graphics
If users upload an image, use PIL to load and work with it. Interpret based on their request whether they want it used directly or just as inspiration.
## Dependencies
Required Python packages:
```bash theme={null}
pip install pillow imageio numpy
```
## Example: Creating a Pulsing Star Emoji
```python theme={null}
from core.gif_builder import GIFBuilder
from core.frame_composer import draw_star, create_blank_frame
from core.easing import interpolate
from PIL import ImageDraw
import math
builder = GIFBuilder(width=128, height=128, fps=15)
for i in range(30): # 2 second animation at 15 FPS
t = i / 29.0
# Create frame with gradient background
frame = create_blank_frame(128, 128, (20, 20, 40))
draw = ImageDraw.Draw(frame)
# Pulse effect
scale = 1.0 + 0.15 * math.sin(t * 4 * math.pi)
size = int(50 * scale)
# Draw pulsing star
draw_star(draw, 64, 64, size, fill=(255, 215, 0), outline=(255, 140, 0), width=3)
builder.add_frame(frame)
builder.save('pulsing_star.gif', num_colors=48, optimize_for_emoji=True)
```
## Related Skills
* **Canvas Design**: For creating static graphics that can be animated
* **Algorithmic Art**: For generative patterns to use in animations