What is Horse Sticker Maker?

A web app that generates WeChat-compatible animated GIF stickers featuring a 6-frame gold horse galloping animation for Chinese New Year Year of the Horse 2026, with user-input blessing text.

What are the technical requirements?

Client-side GIF encoding via gif.js, Canvas-based rendering, 240×240px GIFs, 18 frames (6 frames × 3 cycles), 85ms per frame, and assets in public/horse-frame-[1-6].png; output must be ≤500KB.

How do I deploy and share?

Run locally with npm run dev, then deploy to Vercel (vercel --prod --yes) and share the sticker output via WeChat.

Horse Sticker Maker

Scanned

@jiafar

npx machina-cli add skill @jiafar/horse-sticker-maker --openclaw

Files (1)

SKILL.md

3.3 KB

Horse Sticker Maker

Generate a web app that creates custom animated GIF stickers for Chinese New Year (Year of the Horse 2026).

What It Does

Users input custom blessing text (1-8 chars)
Client-side Canvas renders a 240px animated GIF with:
- Red gradient background with gold sparkle particles
- 6-frame gold horse galloping animation (transparent PNG)
- User's custom text in gold calligraphy at top
- "立马加薪" bottom text with color-cycling effect
Output is WeChat sticker compatible (≤500KB, 240px)

Quick Start

Copy the template project:

cp -r <skill_dir>/assets/horse-blessing-template ./horse-blessing
cd horse-blessing
npm install

Run locally:

npm run dev
# Open http://localhost:3000/sticker

Deploy to Vercel:
```
vercel --prod --yes
```

Project Structure

horse-blessing/
├── app/
│   ├── page.tsx          # Main page (AI-generated blessing with poem)
│   ├── sticker/page.tsx  # Sticker maker (Canvas GIF generator)
│   ├── api/generate/     # AI poem + image generation API
│   ├── api/sticker/      # Sticker API
│   └── layout.tsx        # Root layout (red theme)
├── public/
│   ├── horse-frame-[1-6].png  # 6-frame transparent gold horse
│   ├── horse-transparent.png  # Static horse fallback
│   └── gif.worker.js          # gif.js web worker
├── package.json
└── tailwind.config.ts

Key Technical Details

GIF Generation (Client-Side)

Uses gif.js loaded via CDN (Script from next/script)
18 frames (6 horse frames × 3 cycles), 85ms delay per frame
Canvas size: 240×240px for WeChat sticker compatibility
Horse frames loaded as Image elements, drawn via drawImage

Horse Frame Assets

6 transparent PNG frames in public/horse-frame-[1-6].png
Generated via AI image model, backgrounds removed with sharp
Removal technique: pixels with R>210, G>210, B>210 → alpha=0

Customization Points

Bottom text: Edit '立马加薪' in sticker/page.tsx
GIF size: Change const size = 240 (keep ≤240 for WeChat)
Frame count: Change const frames = 18
Horse images: Replace public/horse-frame-*.png
Background: Modify the radial gradient colors
Sparkle count: Adjust sparkle array size (default 30)

WeChat Sticker Compatibility

Max 500KB file size
Max 240px recommended dimension
GIF format required
Save → WeChat chat → emoji panel → "+" → select from gallery

Dependencies

{
  "next": "^14.0.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "sharp": "latest",
  "gif-encoder-2": "^1.0.5",
  "html2canvas-pro": "^1.6.7"
}

External CDN: gif.js@0.2.0 (loaded at runtime for client-side GIF encoding)

Source

git clone https://clawhub.ai/jiafar/horse-sticker-makerView on GitHub

Overview

Generates a festive Chinese New Year animated GIF sticker for Year of the Horse 2026. It renders a 240px GIF with a red gradient background, gold sparkle, and a 6-frame gold horse galloping animation, plus user text at the top and a color-cycling bottom caption. Output is WeChat-compatible and under 500KB.

How This Skill Works

The app uses client-side Canvas rendering and gif.js to encode a 240×240 GIF in the browser. It loads 6 transparent horse frames and composes 18 frames (6 frames × 3 cycles) at 85ms per frame, adding user-provided gold calligraphy text on top and a color-shifting '立马加薪' caption at the bottom.

When to Use It

Create custom Year of the Horse blessing stickers for Chinese New Year
Deploy a standalone sticker generator H5 page for events
Generate WeChat-compatible animated GIF stickers (≤500KB, 240px)
Personalize blessing text (1–8 characters) on the sticker
Produce festive marketing assets for CNY campaigns

Quick Start

Step 1: Copy the template project: cp -r <skill_dir>/assets/horse-blessing-template ./horse-blessing; cd horse-blessing
Step 2: Install and run locally: npm install; npm run dev (Open http://localhost:3000/sticker)
Step 3: Deploy to Vercel: vercel --prod --yes

Best Practices

Limit blessing text to 1–8 characters for readability
Keep GIF at 240×240px and under 500KB for WeChat
Use the 6-frame horse set and an 18-frame total with 85ms delay
Ensure horse frames are transparent PNGs and correctly alpha-enabled
Swap assets in public/horse-frame-*.png to localize or rebrand

Example Use Cases

Personal Year of the Horse blessing sticker pack shared with friends on WeChat
WeChat emoji panel stickers generated from the H5 page
Corporate CNY campaign page offering customizable horse stickers
Event landing page with an integrated sticker generator
Brand holiday assets adapted for other animals or themes

Frequently Asked Questions

Add this skill to your agents