claude-code-templates 1.21.13 → 1.21.14

package/cli-tool/components/skills/creative-design/slack-gif-creator/templates/pulse.py

@@ -0,0 +1,268 @@
+#!/usr/bin/env python3
+"""
+Pulse Animation - Scale objects rhythmically for emphasis.
+
+Creates pulsing, heartbeat, and throbbing effects.
+"""
+
+import sys
+from pathlib import Path
+import math
+
+sys.path.append(str(Path(__file__).parent.parent))
+
+from PIL import Image
+from core.gif_builder import GIFBuilder
+from core.frame_composer import create_blank_frame, draw_emoji_enhanced, draw_circle
+from core.easing import interpolate
+
+
+def create_pulse_animation(
+    object_type: str = 'emoji',
+    object_data: dict | None = None,
+    num_frames: int = 30,
+    pulse_type: str = 'smooth',  # 'smooth', 'heartbeat', 'throb', 'pop'
+    scale_range: tuple[float, float] = (0.8, 1.2),
+    pulses: float = 2.0,
+    center_pos: tuple[int, int] = (240, 240),
+    frame_width: int = 480,
+    frame_height: int = 480,
+    bg_color: tuple[int, int, int] = (255, 255, 255)
+) -> list[Image.Image]:
+    """
+    Create pulsing/scaling animation.
+
+    Args:
+        object_type: 'emoji', 'circle', 'text'
+        object_data: Object configuration
+        num_frames: Number of frames
+        pulse_type: Type of pulsing motion
+        scale_range: (min_scale, max_scale) tuple
+        pulses: Number of pulses in animation
+        center_pos: Center position
+        frame_width: Frame width
+        frame_height: Frame height
+        bg_color: Background color
+
+    Returns:
+        List of frames
+    """
+    frames = []
+
+    # Default object data
+    if object_data is None:
+        if object_type == 'emoji':
+            object_data = {'emoji': '❤️', 'size': 100}
+        elif object_type == 'circle':
+            object_data = {'radius': 50, 'color': (255, 100, 100)}
+
+    min_scale, max_scale = scale_range
+
+    for i in range(num_frames):
+        frame = create_blank_frame(frame_width, frame_height, bg_color)
+        t = i / (num_frames - 1) if num_frames > 1 else 0
+
+        # Calculate scale based on pulse type
+        if pulse_type == 'smooth':
+            # Simple sinusoidal pulse
+            scale = min_scale + (max_scale - min_scale) * (
+                0.5 + 0.5 * math.sin(t * pulses * 2 * math.pi - math.pi / 2)
+            )
+
+        elif pulse_type == 'heartbeat':
+            # Double pump like a heartbeat
+            phase = (t * pulses) % 1.0
+            if phase < 0.15:
+                # First pump
+                scale = interpolate(min_scale, max_scale, phase / 0.15, 'ease_out')
+            elif phase < 0.25:
+                # First release
+                scale = interpolate(max_scale, min_scale, (phase - 0.15) / 0.10, 'ease_in')
+            elif phase < 0.35:
+                # Second pump (smaller)
+                scale = interpolate(min_scale, (min_scale + max_scale) / 2, (phase - 0.25) / 0.10, 'ease_out')
+            elif phase < 0.45:
+                # Second release
+                scale = interpolate((min_scale + max_scale) / 2, min_scale, (phase - 0.35) / 0.10, 'ease_in')
+            else:
+                # Rest period
+                scale = min_scale
+
+        elif pulse_type == 'throb':
+            # Sharp pulse with quick return
+            phase = (t * pulses) % 1.0
+            if phase < 0.2:
+                scale = interpolate(min_scale, max_scale, phase / 0.2, 'ease_out')
+            else:
+                scale = interpolate(max_scale, min_scale, (phase - 0.2) / 0.8, 'ease_in')
+
+        elif pulse_type == 'pop':
+            # Pop out and back with overshoot
+            phase = (t * pulses) % 1.0
+            if phase < 0.3:
+                # Pop out with overshoot
+                scale = interpolate(min_scale, max_scale * 1.1, phase / 0.3, 'elastic_out')
+            else:
+                # Settle back
+                scale = interpolate(max_scale * 1.1, min_scale, (phase - 0.3) / 0.7, 'ease_out')
+
+        else:
+            scale = min_scale + (max_scale - min_scale) * (
+                0.5 + 0.5 * math.sin(t * pulses * 2 * math.pi)
+            )
+
+        # Draw object at calculated scale
+        if object_type == 'emoji':
+            base_size = object_data['size']
+            current_size = int(base_size * scale)
+            draw_emoji_enhanced(
+                frame,
+                emoji=object_data['emoji'],
+                position=(center_pos[0] - current_size // 2, center_pos[1] - current_size // 2),
+                size=current_size,
+                shadow=object_data.get('shadow', True)
+            )
+
+        elif object_type == 'circle':
+            base_radius = object_data['radius']
+            current_radius = int(base_radius * scale)
+            draw_circle(
+                frame,
+                center=center_pos,
+                radius=current_radius,
+                fill_color=object_data['color']
+            )
+
+        elif object_type == 'text':
+            from core.typography import draw_text_with_outline
+            base_size = object_data.get('font_size', 50)
+            current_size = int(base_size * scale)
+            draw_text_with_outline(
+                frame,
+                text=object_data.get('text', 'PULSE'),
+                position=center_pos,
+                font_size=current_size,
+                text_color=object_data.get('text_color', (255, 100, 100)),
+                outline_color=object_data.get('outline_color', (0, 0, 0)),
+                outline_width=3,
+                centered=True
+            )
+
+        frames.append(frame)
+
+    return frames
+
+
+def create_attention_pulse(
+    emoji: str = '⚠️',
+    num_frames: int = 20,
+    frame_size: int = 128,
+    bg_color: tuple[int, int, int] = (255, 255, 255)
+) -> list[Image.Image]:
+    """
+    Create attention-grabbing pulse (good for emoji GIFs).
+
+    Args:
+        emoji: Emoji to pulse
+        num_frames: Number of frames
+        frame_size: Frame size (square)
+        bg_color: Background color
+
+    Returns:
+        List of frames optimized for emoji size
+    """
+    return create_pulse_animation(
+        object_type='emoji',
+        object_data={'emoji': emoji, 'size': 80, 'shadow': False},
+        num_frames=num_frames,
+        pulse_type='throb',
+        scale_range=(0.85, 1.15),
+        pulses=2,
+        center_pos=(frame_size // 2, frame_size // 2),
+        frame_width=frame_size,
+        frame_height=frame_size,
+        bg_color=bg_color
+    )
+
+
+def create_breathing_animation(
+    object_type: str = 'emoji',
+    object_data: dict | None = None,
+    num_frames: int = 60,
+    breaths: float = 2.0,
+    scale_range: tuple[float, float] = (0.9, 1.1),
+    frame_width: int = 480,
+    frame_height: int = 480,
+    bg_color: tuple[int, int, int] = (240, 248, 255)
+) -> list[Image.Image]:
+    """
+    Create slow, calming breathing animation (in and out).
+
+    Args:
+        object_type: Type of object
+        object_data: Object configuration
+        num_frames: Number of frames
+        breaths: Number of breathing cycles
+        scale_range: Min/max scale
+        frame_width: Frame width
+        frame_height: Frame height
+        bg_color: Background color
+
+    Returns:
+        List of frames
+    """
+    if object_data is None:
+        object_data = {'emoji': '😌', 'size': 100}
+
+    return create_pulse_animation(
+        object_type=object_type,
+        object_data=object_data,
+        num_frames=num_frames,
+        pulse_type='smooth',
+        scale_range=scale_range,
+        pulses=breaths,
+        center_pos=(frame_width // 2, frame_height // 2),
+        frame_width=frame_width,
+        frame_height=frame_height,
+        bg_color=bg_color
+    )
+
+
+# Example usage
+if __name__ == '__main__':
+    print("Creating pulse animations...")
+
+    builder = GIFBuilder(width=480, height=480, fps=20)
+
+    # Example 1: Smooth pulse
+    frames = create_pulse_animation(
+        object_type='emoji',
+        object_data={'emoji': '❤️', 'size': 100},
+        num_frames=40,
+        pulse_type='smooth',
+        scale_range=(0.8, 1.2),
+        pulses=2
+    )
+    builder.add_frames(frames)
+    builder.save('pulse_smooth.gif', num_colors=128)
+
+    # Example 2: Heartbeat
+    builder.clear()
+    frames = create_pulse_animation(
+        object_type='emoji',
+        object_data={'emoji': '💓', 'size': 100},
+        num_frames=60,
+        pulse_type='heartbeat',
+        scale_range=(0.85, 1.2),
+        pulses=3
+    )
+    builder.add_frames(frames)
+    builder.save('pulse_heartbeat.gif', num_colors=128)
+
+    # Example 3: Attention pulse (emoji size)
+    builder = GIFBuilder(width=128, height=128, fps=15)
+    frames = create_attention_pulse(emoji='⚠️', num_frames=20)
+    builder.add_frames(frames)
+    builder.save('pulse_attention.gif', num_colors=48, optimize_for_emoji=True)
+
+    print("Created pulse animations!")

package/cli-tool/components/skills/creative-design/slack-gif-creator/templates/shake.py

@@ -0,0 +1,127 @@
+#!/usr/bin/env python3
+"""
+Shake Animation Template - Creates shaking/vibrating motion.
+
+Use this for impact effects, emphasis, or nervous/excited reactions.
+"""
+
+import sys
+import math
+from pathlib import Path
+
+sys.path.append(str(Path(__file__).parent.parent))
+
+from core.gif_builder import GIFBuilder
+from core.frame_composer import create_blank_frame, draw_circle, draw_emoji, draw_text
+from core.easing import ease_out_quad
+
+
+def create_shake_animation(
+    object_type: str = 'emoji',
+    object_data: dict = None,
+    num_frames: int = 20,
+    shake_intensity: int = 15,
+    center_x: int = 240,
+    center_y: int = 240,
+    direction: str = 'horizontal',  # 'horizontal', 'vertical', or 'both'
+    frame_width: int = 480,
+    frame_height: int = 480,
+    bg_color: tuple[int, int, int] = (255, 255, 255)
+) -> list:
+    """
+    Create frames for a shaking animation.
+
+    Args:
+        object_type: 'circle', 'emoji', 'text', or 'custom'
+        object_data: Data for the object
+        num_frames: Number of frames
+        shake_intensity: Maximum shake displacement in pixels
+        center_x: Center X position
+        center_y: Center Y position
+        direction: 'horizontal', 'vertical', or 'both'
+        frame_width: Frame width
+        frame_height: Frame height
+        bg_color: Background color
+
+    Returns:
+        List of frames
+    """
+    frames = []
+
+    # Default object data
+    if object_data is None:
+        if object_type == 'emoji':
+            object_data = {'emoji': '😱', 'size': 80}
+        elif object_type == 'text':
+            object_data = {'text': 'SHAKE!', 'font_size': 50, 'color': (255, 0, 0)}
+
+    for i in range(num_frames):
+        frame = create_blank_frame(frame_width, frame_height, bg_color)
+
+        # Calculate progress
+        t = i / (num_frames - 1) if num_frames > 1 else 0
+
+        # Decay shake intensity over time
+        intensity = shake_intensity * (1 - ease_out_quad(t))
+
+        # Calculate shake offset using sine wave for smooth oscillation
+        freq = 3  # Oscillation frequency
+        offset_x = 0
+        offset_y = 0
+
+        if direction in ['horizontal', 'both']:
+            offset_x = int(math.sin(t * freq * 2 * math.pi) * intensity)
+
+        if direction in ['vertical', 'both']:
+            offset_y = int(math.cos(t * freq * 2 * math.pi) * intensity)
+
+        # Apply offset
+        x = center_x + offset_x
+        y = center_y + offset_y
+
+        # Draw object
+        if object_type == 'emoji':
+            draw_emoji(
+                frame,
+                emoji=object_data['emoji'],
+                position=(x - object_data['size'] // 2, y - object_data['size'] // 2),
+                size=object_data['size']
+            )
+        elif object_type == 'text':
+            draw_text(
+                frame,
+                text=object_data['text'],
+                position=(x, y),
+                font_size=object_data['font_size'],
+                color=object_data['color'],
+                centered=True
+            )
+        elif object_type == 'circle':
+            draw_circle(
+                frame,
+                center=(x, y),
+                radius=object_data.get('radius', 30),
+                fill_color=object_data.get('color', (100, 100, 255))
+            )
+
+        frames.append(frame)
+
+    return frames
+
+
+# Example usage
+if __name__ == '__main__':
+    print("Creating shake GIF...")
+
+    builder = GIFBuilder(width=480, height=480, fps=24)
+
+    frames = create_shake_animation(
+        object_type='emoji',
+        object_data={'emoji': '😱', 'size': 100},
+        num_frames=30,
+        shake_intensity=20,
+        direction='both'
+    )
+
+    builder.add_frames(frames)
+    builder.save('shake_test.gif', num_colors=128)

package/cli-tool/components/skills/creative-design/slack-gif-creator/templates/slide.py

@@ -0,0 +1,291 @@
+#!/usr/bin/env python3
+"""
+Slide Animation - Slide elements in from edges with overshoot/bounce.
+
+Creates smooth entrance and exit animations.
+"""
+
+import sys
+from pathlib import Path
+
+sys.path.append(str(Path(__file__).parent.parent))
+
+from PIL import Image
+from core.gif_builder import GIFBuilder
+from core.frame_composer import create_blank_frame, draw_emoji_enhanced
+from core.easing import interpolate
+
+
+def create_slide_animation(
+    object_type: str = 'emoji',
+    object_data: dict | None = None,
+    num_frames: int = 30,
+    direction: str = 'left',  # 'left', 'right', 'top', 'bottom'
+    slide_type: str = 'in',  # 'in', 'out', 'across'
+    easing: str = 'ease_out',
+    overshoot: bool = False,
+    final_pos: tuple[int, int] | None = None,
+    frame_width: int = 480,
+    frame_height: int = 480,
+    bg_color: tuple[int, int, int] = (255, 255, 255)
+) -> list[Image.Image]:
+    """
+    Create slide animation.
+
+    Args:
+        object_type: 'emoji', 'text'
+        object_data: Object configuration
+        num_frames: Number of frames
+        direction: Direction of slide
+        slide_type: Type of slide (in/out/across)
+        easing: Easing function
+        overshoot: Add overshoot/bounce at end
+        final_pos: Final position (None = center)
+        frame_width: Frame width
+        frame_height: Frame height
+        bg_color: Background color
+
+    Returns:
+        List of frames
+    """
+    frames = []
+
+    # Default object data
+    if object_data is None:
+        if object_type == 'emoji':
+            object_data = {'emoji': '➡️', 'size': 100}
+
+    if final_pos is None:
+        final_pos = (frame_width // 2, frame_height // 2)
+
+    # Calculate start and end positions based on direction
+    size = object_data.get('size', 100) if object_type == 'emoji' else 100
+    margin = size
+
+    if direction == 'left':
+        start_pos = (-margin, final_pos[1])
+        end_pos = final_pos if slide_type == 'in' else (frame_width + margin, final_pos[1])
+    elif direction == 'right':
+        start_pos = (frame_width + margin, final_pos[1])
+        end_pos = final_pos if slide_type == 'in' else (-margin, final_pos[1])
+    elif direction == 'top':
+        start_pos = (final_pos[0], -margin)
+        end_pos = final_pos if slide_type == 'in' else (final_pos[0], frame_height + margin)
+    elif direction == 'bottom':
+        start_pos = (final_pos[0], frame_height + margin)
+        end_pos = final_pos if slide_type == 'in' else (final_pos[0], -margin)
+    else:
+        start_pos = (-margin, final_pos[1])
+        end_pos = final_pos
+
+    # For 'out' type, swap start and end
+    if slide_type == 'out':
+        start_pos, end_pos = final_pos, end_pos
+    elif slide_type == 'across':
+        # Slide all the way across
+        if direction == 'left':
+            start_pos = (-margin, final_pos[1])
+            end_pos = (frame_width + margin, final_pos[1])
+        elif direction == 'right':
+            start_pos = (frame_width + margin, final_pos[1])
+            end_pos = (-margin, final_pos[1])
+        elif direction == 'top':
+            start_pos = (final_pos[0], -margin)
+            end_pos = (final_pos[0], frame_height + margin)
+        elif direction == 'bottom':
+            start_pos = (final_pos[0], frame_height + margin)
+            end_pos = (final_pos[0], -margin)
+
+    # Use overshoot easing if requested
+    if overshoot and slide_type == 'in':
+        easing = 'back_out'
+
+    for i in range(num_frames):
+        t = i / (num_frames - 1) if num_frames > 1 else 0
+        frame = create_blank_frame(frame_width, frame_height, bg_color)
+
+        # Calculate current position
+        x = int(interpolate(start_pos[0], end_pos[0], t, easing))
+        y = int(interpolate(start_pos[1], end_pos[1], t, easing))
+
+        # Draw object
+        if object_type == 'emoji':
+            size = object_data['size']
+            draw_emoji_enhanced(
+                frame,
+                emoji=object_data['emoji'],
+                position=(x - size // 2, y - size // 2),
+                size=size,
+                shadow=object_data.get('shadow', True)
+            )
+
+        elif object_type == 'text':
+            from core.typography import draw_text_with_outline
+            draw_text_with_outline(
+                frame,
+                text=object_data.get('text', 'SLIDE'),
+                position=(x, y),
+                font_size=object_data.get('font_size', 50),
+                text_color=object_data.get('text_color', (0, 0, 0)),
+                outline_color=object_data.get('outline_color', (255, 255, 255)),
+                outline_width=3,
+                centered=True
+            )
+
+        frames.append(frame)
+
+    return frames
+
+
+def create_multi_slide(
+    objects: list[dict],
+    num_frames: int = 30,
+    stagger_delay: int = 3,
+    frame_width: int = 480,
+    frame_height: int = 480,
+    bg_color: tuple[int, int, int] = (255, 255, 255)
+) -> list[Image.Image]:
+    """
+    Create animation with multiple objects sliding in sequence.
+
+    Args:
+        objects: List of object configs with 'type', 'data', 'direction', 'final_pos'
+        num_frames: Number of frames
+        stagger_delay: Frames between each object starting
+        frame_width: Frame width
+        frame_height: Frame height
+        bg_color: Background color
+
+    Returns:
+        List of frames
+    """
+    frames = []
+
+    for i in range(num_frames):
+        frame = create_blank_frame(frame_width, frame_height, bg_color)
+
+        for idx, obj in enumerate(objects):
+            # Calculate when this object starts moving
+            start_frame = idx * stagger_delay
+            if i < start_frame:
+                continue  # Object hasn't started yet
+
+            # Calculate progress for this object
+            obj_frame = i - start_frame
+            obj_duration = num_frames - start_frame
+            if obj_duration <= 0:
+                continue
+
+            t = obj_frame / obj_duration
+
+            # Get object properties
+            obj_type = obj.get('type', 'emoji')
+            obj_data = obj.get('data', {'emoji': '➡️', 'size': 80})
+            direction = obj.get('direction', 'left')
+            final_pos = obj.get('final_pos', (frame_width // 2, frame_height // 2))
+            easing = obj.get('easing', 'back_out')
+
+            # Calculate position
+            size = obj_data.get('size', 80)
+            margin = size
+
+            if direction == 'left':
+                start_x = -margin
+                end_x = final_pos[0]
+                y = final_pos[1]
+            elif direction == 'right':
+                start_x = frame_width + margin
+                end_x = final_pos[0]
+                y = final_pos[1]
+            elif direction == 'top':
+                x = final_pos[0]
+                start_y = -margin
+                end_y = final_pos[1]
+            elif direction == 'bottom':
+                x = final_pos[0]
+                start_y = frame_height + margin
+                end_y = final_pos[1]
+            else:
+                start_x = -margin
+                end_x = final_pos[0]
+                y = final_pos[1]
+
+            # Interpolate position
+            if direction in ['left', 'right']:
+                x = int(interpolate(start_x, end_x, t, easing))
+            else:
+                y = int(interpolate(start_y, end_y, t, easing))
+
+            # Draw object
+            if obj_type == 'emoji':
+                draw_emoji_enhanced(
+                    frame,
+                    emoji=obj_data['emoji'],
+                    position=(x - size // 2, y - size // 2),
+                    size=size,
+                    shadow=False
+                )
+
+        frames.append(frame)
+
+    return frames
+
+
+# Example usage
+if __name__ == '__main__':
+    print("Creating slide animations...")
+
+    builder = GIFBuilder(width=480, height=480, fps=20)
+
+    # Example 1: Slide in from left with overshoot
+    frames = create_slide_animation(
+        object_type='emoji',
+        object_data={'emoji': '➡️', 'size': 100},
+        num_frames=30,
+        direction='left',
+        slide_type='in',
+        overshoot=True
+    )
+    builder.add_frames(frames)
+    builder.save('slide_in_left.gif', num_colors=128)
+
+    # Example 2: Slide across
+    builder.clear()
+    frames = create_slide_animation(
+        object_type='emoji',
+        object_data={'emoji': '🚀', 'size': 80},
+        num_frames=40,
+        direction='left',
+        slide_type='across',
+        easing='ease_in_out'
+    )
+    builder.add_frames(frames)
+    builder.save('slide_across.gif', num_colors=128)
+
+    # Example 3: Multiple objects sliding in
+    builder.clear()
+    objects = [
+        {
+            'type': 'emoji',
+            'data': {'emoji': '🎯', 'size': 60},
+            'direction': 'left',
+            'final_pos': (120, 240)
+        },
+        {
+            'type': 'emoji',
+            'data': {'emoji': '🎪', 'size': 60},
+            'direction': 'right',
+            'final_pos': (240, 240)
+        },
+        {
+            'type': 'emoji',
+            'data': {'emoji': '🎨', 'size': 60},
+            'direction': 'top',
+            'final_pos': (360, 240)
+        }
+    ]
+    frames = create_multi_slide(objects, num_frames=50, stagger_delay=5)
+    builder.add_frames(frames)
+    builder.save('slide_multi.gif', num_colors=128)
+
+    print("Created slide animations!")