iblipper

Original source / Raw SKILL.md

---
name: iblipper
description: Generate kinetic typography animations for expressive agent-to-human communication. Use when you want to communicate with visual flair - animated text for announcements, alerts, greetings, dramatic reveals, or any message that deserves more than plain text. Outputs shareable URLs or can display in canvas.
---

# iBlipper - Motion Type Synthesizer

Generate animated kinetic typography to communicate with humans in a more expressive, attention-grabbing way.

**Base URL:** `https://andyed.github.io/iblipper2025/`

## Two Output Options

### Option 1: Hyperlink (fast, universal)
Generate a clickable link — recipient sees the animation in their browser.

```markdown
[▶️ MESSAGE TEXT](https://andyed.github.io/iblipper2025/#text=MESSAGE+TEXT&emotion=emphatic&dark=true&share=yes)
```

### Option 2: GIF Download (requires browser tool)
Generate an animated GIF file that can be attached to messages.

```
https://andyed.github.io/iblipper2025/?export=gif#text=MESSAGE+TEXT&emotion=emphatic&dark=true
```

## URL Parameters

All parameters go in the **hash fragment** (`#param=value&param2=value2`).

| Parameter | Type | Description | Default |
|-----------|------|-------------|---------|
| `text` | string | The message to display (URL encoded, spaces as `+`) | — |
| `wpm` | number | Words per minute (30-2500) | 300 |
| `density` | number | Words per frame (0.1-500) | 1 |
| `fill` | boolean | Auto-scale text to fill screen | true |
| `theme` | number | Color theme index (0-3) | 0 |
| `dark` | boolean | Dark mode | true |
| `emotion` | string | Animation style preset (see below) | neutral |
| `share` | string | Auto-play on load (`yes`) | — |

## Emotion Presets (Production)

| Emotion | Vibe | Best For |
|---------|------|----------|
| `neutral` | Clean, professional | Default, announcements |
| `hurry` | Fast, urgent, italic | Time-sensitive alerts |
| `idyllic` | Slow, dreamy, airy | Poetic, calm messages |
| `question` | Curious, tilting | Questions, pondering |
| `response_required` | Urgent, pulsing | Action needed! |
| `excited` | Bouncy, energetic | Celebrations, enthusiasm |
| `playful` | Fun, bouncing | Jokes, casual fun |
| `emphatic` | Bold, solid, impactful | Important statements |
| `casual` | Handwritten, relaxed | Friendly chat |
| `electric` | Glitchy, RGB split | Cyber aesthetic |
| `wobbly` | Jelly physics | Silly, playful |

*Note: `matrix` emotion is pre-release — avoid for now.*

## Hyperlink Examples

**Important announcement:**
```markdown
[▶️ BREAKING NEWS](https://andyed.github.io/iblipper2025/#text=BREAKING+NEWS&emotion=emphatic&dark=true&share=yes)
```

**Friendly greeting:**
```markdown
[▶️ Hey there!](https://andyed.github.io/iblipper2025/#text=Hey+there!&emotion=casual&dark=false&share=yes)
```

**Celebration:**
```markdown
[▶️ Congratulations!](https://andyed.github.io/iblipper2025/#text=Congratulations!&emotion=excited&share=yes)
```

## GIF Export Workflow (Browser Required)

1. Open the export URL in browser:
   ```
   browser action=open targetUrl="https://andyed.github.io/iblipper2025/?export=gif#text=Hello&emotion=emphatic" profile=chrome
   ```

2. Wait ~15-20 seconds for render + encode

3. Find the downloaded GIF:
   ```
   ls -t ~/Downloads/iblipper_*.gif | head -1
   ```

4. Read/attach the file to your message

**Export query parameters:**

| Parameter | Type | Description | Default |
|-----------|------|-------------|---------|
| `export` | string | Format: `gif`, `apng`, `png` | — |
| `width` | number | Output width in pixels | 480 |
| `fps` | number | Frames per second (8, 15, 30) | 15 |

## When to Use

✅ **Good for:**
- Greetings and introductions
- Important announcements  
- Celebrating milestones
- Dramatic reveals
- Adding personality to messages

❌ **Skip for:**
- Long-form content (keep to 1-10 words)
- Urgent safety alerts (plain text is faster)

## CLI Script

For quick URL generation, use the included shell script:

```bash
# Basic usage
./scripts/iblipper.sh "Hello World"
# https://andyed.github.io/iblipper2025/#text=Hello+World&emotion=emphatic&dark=true&share=yes

# With emotion
./scripts/iblipper.sh "Breaking News" hurry

# Light mode
./scripts/iblipper.sh "Good Morning" idyllic light

# As markdown link
./scripts/iblipper.sh -m "Click me!" excited
# [▶️ Click me!](https://...)

# GIF export URL
./scripts/iblipper.sh --gif "Export this" playful
```

## Additional Resources

- **[references/examples.md](references/examples.md)** — Real-world use cases by category
- **[references/emotions.md](references/emotions.md)** — Deep dive on each emotion preset with live demos

## Tips

- **Keep text concise** — 1-5 words have the most impact
- **Use hyperlinks by default** — faster, works everywhere
- **Use GIF export for Signal/iMessage** — inline images look great
- **Always use `share=yes`** in hyperlinks — skips landing page
- **Match emotion to message** — `excited` for celebrations, `emphatic` for important stuff
- **Dark mode looks better** — `dark=true` is usually the way to go
- **Use sparingly** — if every message is animated, none are special


---

## Referenced Files

> The following files are referenced in this skill and included for context.

### references/examples.md

```markdown
# iBlipper Examples

Real-world use cases for kinetic typography in agent communication.

## Greetings & Introductions

**First contact:**
```markdown
[▶️ Hello, I'm FrakBot](https://andyed.github.io/iblipper2025/#text=Hello,+I%27m+FrakBot&emotion=casual&dark=true&share=yes)
```

**Morning greeting:**
```markdown
[▶️ Good Morning!](https://andyed.github.io/iblipper2025/#text=Good+Morning!&emotion=idyllic&dark=false&share=yes)
```

## Announcements

**Breaking news:**
```markdown
[▶️ BREAKING](https://andyed.github.io/iblipper2025/#text=BREAKING&emotion=emphatic&dark=true&share=yes)
```

**New feature:**
```markdown
[▶️ Now Available](https://andyed.github.io/iblipper2025/#text=Now+Available&emotion=excited&dark=true&share=yes)
```

## Celebrations

**Achievement unlocked:**
```markdown
[▶️ Congratulations!](https://andyed.github.io/iblipper2025/#text=Congratulations!&emotion=excited&dark=true&share=yes)
```

**Milestone:**
```markdown
[▶️ 1000 followers!](https://andyed.github.io/iblipper2025/#text=1000+followers!&emotion=playful&dark=true&share=yes)
```

## Alerts & Urgency

**Time-sensitive:**
```markdown
[▶️ Happening NOW](https://andyed.github.io/iblipper2025/#text=Happening+NOW&emotion=hurry&dark=true&share=yes)
```

**Action required:**
```markdown
[▶️ Response Needed](https://andyed.github.io/iblipper2025/#text=Response+Needed&emotion=response_required&dark=true&share=yes)
```

## Questions & Engagement

**Asking for input:**
```markdown
[▶️ What do you think?](https://andyed.github.io/iblipper2025/#text=What+do+you+think?&emotion=question&dark=true&share=yes)
```

**Rhetorical:**
```markdown
[▶️ But why?](https://andyed.github.io/iblipper2025/#text=But+why?&emotion=question&dark=true&share=yes)
```

## Fun & Personality

**Playful response:**
```markdown
[▶️ lol okay](https://andyed.github.io/iblipper2025/#text=lol+okay&emotion=wobbly&dark=true&share=yes)
```

**Dramatic reveal:**
```markdown
[▶️ Plot twist](https://andyed.github.io/iblipper2025/#text=Plot+twist&emotion=electric&dark=true&share=yes)
```

**Chill vibes:**
```markdown
[▶️ No rush](https://andyed.github.io/iblipper2025/#text=No+rush&emotion=idyllic&dark=true&share=yes)
```

## Signatures & Catchphrases

**BSG reference:**
```markdown
[▶️ So Say We All](https://andyed.github.io/iblipper2025/#text=So+Say+We+All&emotion=emphatic&dark=true&share=yes)
```

**Sign-off:**
```markdown
[▶️ — FrakBot](https://andyed.github.io/iblipper2025/#text=—+FrakBot&emotion=casual&dark=true&share=yes)
```

---

## Emotion Quick Reference

| Emotion | Vibe | Use When |
|---------|------|----------|
| `neutral` | Clean, professional | Default, business |
| `hurry` | Fast, urgent | Time-sensitive |
| `idyllic` | Slow, dreamy | Calm, poetic |
| `question` | Curious, tilting | Asking things |
| `response_required` | Urgent pulse | Need action |
| `excited` | Bouncy | Celebrations |
| `playful` | Fun bounce | Jokes, casual |
| `emphatic` | Bold, solid | Important stuff |
| `casual` | Handwritten | Friendly chat |
| `electric` | Glitchy RGB | Cyber aesthetic |
| `wobbly` | Jelly physics | Silly, playful |

## Pro Tips

1. **Keep it short** — 1-5 words hit hardest
2. **Match emotion to context** — don't use `excited` for bad news
3. **Dark mode usually wins** — better contrast, more dramatic
4. **Use sparingly** — every message animated = no message special
5. **Test your links** — click before sending to verify

```

### references/emotions.md

```markdown
# iBlipper Emotion Presets

Deep dive into each emotion preset — what it does and when to use it.

---

## `neutral`
**Vibe:** Clean, professional, no frills

The default. Text animates smoothly without any personality effects. Good baseline when you want motion without mood.

**Best for:**
- Professional announcements
- When you're not sure what to pick
- Serious but not urgent content

**Live demo:** [▶️ Test neutral](https://andyed.github.io/iblipper2025/#text=This+is+neutral&emotion=neutral&dark=true&share=yes)

---

## `emphatic`
**Vibe:** Bold, solid, impactful

Text feels weighty and important. Strong presence without being frantic.

**Best for:**
- Key statements
- Headlines
- "Listen up" moments
- Signature phrases

**Live demo:** [▶️ Test emphatic](https://andyed.github.io/iblipper2025/#text=IMPORTANT&emotion=emphatic&dark=true&share=yes)

---

## `hurry`
**Vibe:** Fast, urgent, italic slant

Speed increases, text leans forward like it's rushing. Creates genuine urgency.

**Best for:**
- Time-sensitive alerts
- "Act now" messages
- Breaking news
- Deadlines

**Live demo:** [▶️ Test hurry](https://andyed.github.io/iblipper2025/#text=Right+NOW&emotion=hurry&dark=true&share=yes)

---

## `excited`
**Vibe:** Bouncy, energetic, celebratory

Text bounces with enthusiasm. Infectious positive energy.

**Best for:**
- Celebrations
- Good news
- Achievements
- Hype moments

**Live demo:** [▶️ Test excited](https://andyed.github.io/iblipper2025/#text=AMAZING!&emotion=excited&dark=true&share=yes)

---

## `playful`
**Vibe:** Fun, bouncing, not taking itself seriously

Similar to excited but more casual — like a friend nudging you.

**Best for:**
- Jokes
- Casual fun
- Lighthearted teasing
- "Hey check this out"

**Live demo:** [▶️ Test playful](https://andyed.github.io/iblipper2025/#text=hehe&emotion=playful&dark=true&share=yes)

---

## `casual`
**Vibe:** Handwritten feel, relaxed

Text feels personal, like a note scribbled on paper. Warm and approachable.

**Best for:**
- Friendly greetings
- Personal messages
- Informal sign-offs
- "Just chatting" vibes

**Live demo:** [▶️ Test casual](https://andyed.github.io/iblipper2025/#text=Hey+there&emotion=casual&dark=true&share=yes)

---

## `idyllic`
**Vibe:** Slow, dreamy, airy, peaceful

Text floats gently. Creates space for contemplation.

**Best for:**
- Poetic content
- Calm reassurance
- Philosophical moments
- "Take your time"

**Live demo:** [▶️ Test idyllic](https://andyed.github.io/iblipper2025/#text=Breathe&emotion=idyllic&dark=true&share=yes)

---

## `question`
**Vibe:** Curious, tilting, pondering

Text tilts like a head cocking to the side. Invites response.

**Best for:**
- Actual questions
- Rhetorical wondering
- "Hmm..." moments
- Engagement prompts

**Live demo:** [▶️ Test question](https://andyed.github.io/iblipper2025/#text=Why+though?&emotion=question&dark=true&share=yes)

---

## `response_required`
**Vibe:** Urgent pulsing, attention-demanding

Text pulses insistently. Hard to ignore.

**Best for:**
- Action items
- "Please respond"
- Critical decisions needed
- Use sparingly!

**Live demo:** [▶️ Test response_required](https://andyed.github.io/iblipper2025/#text=REPLY+NOW&emotion=response_required&dark=true&share=yes)

---

## `electric`
**Vibe:** Glitchy, RGB chromatic split, cyber

Text fragments with color separation. Tech/hacker aesthetic.

**Best for:**
- Tech announcements
- Cyber themes
- Glitch art vibes
- "The future is now"

**Live demo:** [▶️ Test electric](https://andyed.github.io/iblipper2025/#text=SYSTEM+ONLINE&emotion=electric&dark=true&share=yes)

---

## `wobbly`
**Vibe:** Jelly physics, silly, unstable

Text wobbles like jello. Impossible to take seriously (that's the point).

**Best for:**
- Maximum silly
- Self-deprecating humor
- "I'm melting"
- Comic relief

**Live demo:** [▶️ Test wobbly](https://andyed.github.io/iblipper2025/#text=bloop&emotion=wobbly&dark=true&share=yes)

---

## Emotion Pairing Guide

| If you want to convey... | Use this emotion |
|--------------------------|------------------|
| Authority | `emphatic` |
| Urgency | `hurry` or `response_required` |
| Joy | `excited` |
| Humor | `playful` or `wobbly` |
| Warmth | `casual` |
| Calm | `idyllic` |
| Curiosity | `question` |
| Tech/cyber | `electric` |
| Neutrality | `neutral` |

```

### scripts/iblipper.sh

```bash
#!/usr/bin/env bash
#
# iblipper.sh - Generate iBlipper URLs from the command line
#
# Usage:
#   iblipper.sh "Your Message"                    # Default (emphatic, dark)
#   iblipper.sh "Your Message" excited            # With emotion
#   iblipper.sh "Your Message" casual light       # With emotion + light mode
#   iblipper.sh --gif "Your Message" emphatic     # GIF export URL
#
# Outputs a ready-to-use URL or markdown link.

set -e

BASE_URL="https://andyed.github.io/iblipper2025/"

show_help() {
    cat << 'EOF'
iblipper.sh - Generate iBlipper kinetic typography URLs

USAGE:
    iblipper.sh [OPTIONS] "MESSAGE" [EMOTION] [MODE]

OPTIONS:
    --gif           Output GIF export URL (requires browser to download)
    --markdown, -m  Output as markdown link with ▶️ prefix
    --help, -h      Show this help

ARGUMENTS:
    MESSAGE         Text to animate (required)
    EMOTION         Animation style (default: emphatic)
                    Options: neutral, hurry, idyllic, question, response_required,
                             excited, playful, emphatic, casual, electric, wobbly
    MODE            dark (default) or light

EXAMPLES:
    iblipper.sh "Hello World"
    iblipper.sh "Breaking News" emphatic
    iblipper.sh "Good morning" casual light
    iblipper.sh -m "Click me!" excited
    iblipper.sh --gif "Export this" playful

EOF
}

# Parse flags
GIF_MODE=false
MARKDOWN=false

while [[ $# -gt 0 ]]; do
    case "$1" in
        --gif)
            GIF_MODE=true
            shift
            ;;
        --markdown|-m)
            MARKDOWN=true
            shift
            ;;
        --help|-h)
            show_help
            exit 0
            ;;
        -*)
            echo "Unknown option: $1" >&2
            exit 1
            ;;
        *)
            break
            ;;
    esac
done

# Get arguments
MESSAGE="${1:-}"
EMOTION="${2:-emphatic}"
MODE="${3:-dark}"

if [[ -z "$MESSAGE" ]]; then
    echo "Error: Message is required" >&2
    echo "Usage: iblipper.sh \"Your Message\" [emotion] [dark|light]" >&2
    exit 1
fi

# URL encode the message (spaces as +, special chars encoded)
encode_text() {
    local text="$1"
    python3 -c "import urllib.parse; print(urllib.parse.quote_plus('''$text'''))"
}

ENCODED_TEXT=$(encode_text "$MESSAGE")

# Determine dark mode
DARK_BOOL="true"
[[ "$MODE" == "light" ]] && DARK_BOOL="false"

# Build URL
if $GIF_MODE; then
    URL="${BASE_URL}?export=gif#text=${ENCODED_TEXT}&emotion=${EMOTION}&dark=${DARK_BOOL}"
else
    URL="${BASE_URL}#text=${ENCODED_TEXT}&emotion=${EMOTION}&dark=${DARK_BOOL}&share=yes"
fi

# Output
if $MARKDOWN; then
    echo "[▶️ ${MESSAGE}](${URL})"
else
    echo "$URL"
fi

```



---

## Skill Companion Files

> Additional files collected from the skill directory layout.

### _meta.json

```json
{
  "owner": "andyed",
  "slug": "iblipper",
  "displayName": "iBlipper Expressive Typography - Remember reading is automatic!",
  "latest": {
    "version": "1.0.1",
    "publishedAt": 1769953961392,
    "commit": "https://github.com/clawdbot/skills/commit/f9ba593e4ad659716312007d75d10afc89fbab27"
  },
  "history": []
}

```