Toolkit for creating animated GIFs optimized for Slack, with validators for size constraints and composable animation primitives. This skill applies when users request animated GIFs or emoji animations for Slack from descriptions like "make me a GIF for Slack of X doing Y".
A toolkit for creating animated GIFs optimized for Slack. Provides validators for Slack's constraints, composable animation primitives, and optional helper utilities. Apply these tools however needed to achieve the creative vision.
Slack's Requirements
Slack has specific requirements for GIFs based on their use:
Message GIFs:
Max size: ~2MB
Optimal dimensions: 480x480
Typical FPS: 15-20
Color limit: 128-256
Duration: 2-5s
Emoji GIFs:
Max size: 64KB (strict limit)
Optimal dimensions: 128x128
Typical FPS: 10-12
Color limit: 32-48
Duration: 1-2s
Emoji GIFs are challenging - the 64KB limit is strict. Strategies that help:
Limit to 10-15 frames total
Use 32-48 colors maximum
Keep designs simple
Avoid gradients
Validate file size frequently
Toolkit Structure
This skill provides three types of tools:
Validators - Check if a GIF meets Slack's requirements
Animation Primitives - Composable building blocks for motion (shake, bounce, move, kaleidoscope)
Helper Utilities - Optional functions for common needs (text, colors, effects)
Complete creative freedom is available in how these tools are applied.
Core Validators
To ensure a GIF meets Slack's constraints, use these validators:
from core.gif_builder import GIFBuilder
# After creating your GIF, check if it meets requirements
builder = GIFBuilder(width=128, height=128, fps=10)
# ... add your frames however you want ...
# Save and check size
info = builder.save('emoji.gif', num_colors=48, optimize_for_emoji=True)
# The save method automatically warns if file exceeds limits
# info dict contains: size_kb, size_mb, frame_count, duration_seconds
File size validator:
from core.validators import check_slack_size
# Check if GIF meets size limits
passes, info = check_slack_size('emoji.gif', is_emoji=True)
# Returns: (True/False, dict with size details)
Dimension validator:
from core.validators import validate_dimensions
# Check dimensions
passes, info = validate_dimensions(128, 128, is_emoji=True)
# Returns: (True/False, dict with dimension details)
Complete validation:
from core.validators import validate_gif, is_slack_ready
# Run all validations
all_pass, results = validate_gif('emoji.gif', is_emoji=True)
# Or quick check
if is_slack_ready('emoji.gif', is_emoji=True):
print("Ready to upload!")
Animation Primitives
These are composable building blocks for motion. Apply these to any object in any combination:
Shake
from templates.shake import create_shake_animation
# Shake an emoji
frames = create_shake_animation(
object_type='emoji',
object_data={'emoji': '😱', 'size': 80},
num_frames=20,
shake_intensity=15,
direction='both' # or 'horizontal', 'vertical'
)
Bounce
from templates.bounce import create_bounce_animation
# Bounce a circle
frames = create_bounce_animation(
object_type='circle',
object_data={'radius': 40, 'color': (255, 100, 100)},
num_frames=30,
bounce_height=150
)
from templates.move import create_move_animation
# Linear movement
frames = create_move_animation(
object_type='emoji',
object_data={'emoji': '🚀', 'size': 60},
start_pos=(50, 240),
end_pos=(430, 240),
motion_type='linear',
easing='ease_out'
)
# Arc movement (parabolic trajectory)
frames = create_move_animation(
object_type='emoji',
object_data={'emoji': '⚽', 'size': 60},
start_pos=(50, 350),
end_pos=(430, 350),
motion_type='arc',
motion_params={'arc_height': 150}
)
# Circular movement
frames = create_move_animation(
object_type='emoji',
object_data={'emoji': '🌍', 'size': 50},
motion_type='circle',
motion_params={
'center': (240, 240),
'radius': 120,
'angle_range': 360 # full circle
}
)
# Wave movement
frames = create_move_animation(
motion_type='wave',
motion_params={
'wave_amplitude': 50,
'wave_frequency': 2
}
)
# Or use low-level easing functions
from core.easing import interpolate, calculate_arc_motion
for i in range(num_frames):
t = i / (num_frames - 1)
x = interpolate(start_x, end_x, t, easing='ease_out')
# Or: x, y = calculate_arc_motion(start, end, height, t)
Kaleidoscope Effect
from templates.kaleidoscope import apply_kaleidoscope, create_kaleidoscope_animation
# Apply to a single frame
kaleido_frame = apply_kaleidoscope(frame, segments=8)
# Or create animated kaleidoscope
frames = create_kaleidoscope_animation(
base_frame=my_frame, # or None for demo pattern
num_frames=30,
segments=8,
rotation_speed=1.0
)
# Simple mirror effects (faster)
from templates.kaleidoscope import apply_simple_mirror
mirrored = apply_simple_mirror(frame, mode='quad') # 4-way mirror
# modes: 'horizontal', 'vertical', 'quad', 'radial'
To compose primitives freely, follow these patterns:
# Example: Bounce + shake for impact
for i in range(num_frames):
frame = create_blank_frame(480, 480, bg_color)
# Bounce motion
t_bounce = i / (num_frames - 1)
y = interpolate(start_y, ground_y, t_bounce, 'bounce_out')
# Add shake on impact (when y reaches ground)
if y >= ground_y - 5:
shake_x = math.sin(i * 2) * 10
x = center_x + shake_x
else:
x = center_x
draw_emoji(frame, '⚽', (x, y), size=60)
builder.add_frame(frame)
Helper Utilities
These are optional helpers for common needs. Use, modify, or replace these with custom implementations as needed.
GIF Builder (Assembly & Optimization)
from core.gif_builder import GIFBuilder
# Create builder with your chosen settings
builder = GIFBuilder(width=480, height=480, fps=20)
# Add frames (however you created them)
for frame in my_frames:
builder.add_frame(frame)
# Save with optimization
builder.save('output.gif',
num_colors=128,
optimize_for_emoji=False)
Key features:
Automatic color quantization
Duplicate frame removal
Size warnings for Slack limits
Emoji mode (aggressive optimization)
Text Rendering
For small GIFs like emojis, text readability is challenging. A common solution involves adding outlines:
from core.typography import draw_text_with_outline, TYPOGRAPHY_SCALE
# Text with outline (helps readability)
draw_text_with_outline(
frame, "BONK!",
position=(240, 100),
font_size=TYPOGRAPHY_SCALE['h1'], # 60px
text_color=(255, 68, 68),
outline_color=(0, 0, 0),
outline_width=4,
centered=True
)
To implement custom text rendering, use PIL's ImageDraw.text() which works fine for larger GIFs.
Color Management
Professional-looking GIFs often use cohesive color palettes:
from core.color_palettes import get_palette
# Get a pre-made palette
palette = get_palette('vibrant') # or 'pastel', 'dark', 'neon', 'professional'
bg_color = palette['background']
text_color = palette['primary']
accent_color = palette['accent']
To work with colors directly, use RGB tuples - whatever works for the use case.
builder = GIFBuilder(480, 480, 20)
# Phase 1: Object falls
for i in range(15):
frame = create_gradient_background(480, 480, (240, 248, 255), (200, 230, 255))
t = i / 14
y = interpolate(0, 350, t, 'ease_in')
draw_emoji_enhanced(frame, '⚽', position=(220, int(y)), size=80)
builder.add_frame(frame)
# Phase 2: Impact + flash
for i in range(8):
frame = create_gradient_background(480, 480, (240, 248, 255), (200, 230, 255))
# Flash on first frames
if i < 3:
frame = create_impact_flash(frame, (240, 350), radius=120, intensity=0.6)
draw_emoji_enhanced(frame, '⚽', position=(220, 350), size=80)
# Text appears
if i > 2:
draw_text_with_outline(frame, "GOAL!", position=(240, 150),
font_size=60, text_color=(255, 68, 68),
outline_color=(0, 0, 0), outline_width=4, centered=True)
builder.add_frame(frame)
builder.save('goal.gif', num_colors=128)
Combining Primitives (Move + Shake)
from templates.shake import create_shake_animation
# Create shake animation
shake_frames = create_shake_animation(
object_type='emoji',
object_data={'emoji': '😰', 'size': 70},
num_frames=20,
shake_intensity=12
)
# Create moving element that triggers the shake
builder = GIFBuilder(480, 480, 20)
for i in range(40):
t = i / 39
if i < 20:
# Before trigger - use blank frame with moving object
frame = create_blank_frame(480, 480, (255, 255, 255))
x = interpolate(50, 300, t * 2, 'linear')
draw_emoji_enhanced(frame, '🚗', position=(int(x), 300), size=60)
draw_emoji_enhanced(frame, '😰', position=(350, 200), size=70)
else:
# After trigger - use shake frame
frame = shake_frames[i - 20]
# Add the car in final position
draw_emoji_enhanced(frame, '🚗', position=(300, 300), size=60)
builder.add_frame(frame)
builder.save('scare.gif')
Philosophy
This toolkit provides building blocks, not rigid recipes. To work with a GIF request:
Understand the creative vision - What should happen? What's the mood?
Design the animation - Break it into phases (anticipation, action, reaction)
