OpenClaw · Skill
GIF Encoding
Generate a web app that creates custom animated GIF stickers for Chinese New Year (Year of the Horse 2026).
Install
Start with the primary install command. Alternate entrypoints are included below for ClawHub and OpenClaw CLI users.
Primary command
clawhub install jiafar/horse-sticker-makerClawHub installer
npx clawhub@latest install jiafar/horse-sticker-makerOpenClaw CLI
openclaw skills install jiafar/horse-sticker-makerDirect OpenClaw install
openclaw install jiafar/horse-sticker-makerWhat this skill does
Generate a web app that creates custom animated GIF stickers for Chinese New Year (Year of the Horse 2026).
Why it matters
GIF encoding runs entirely client-side via gif.js, so no server processing or file upload is needed and the output is immediately WeChat-compatible.
Typical use cases
- Sending personalized horse-year blessing stickers in WeChat
- Deploying a holiday sticker generator page for a team or community
- Customizing the bottom slogan text for different gift or greeting contexts
- Sharing animated GIFs in group chats during Lunar New Year
- Generating branded festive stickers for a 2026 campaign
Source instructions
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.jsloaded via CDN (Scriptfrom 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
Imageelements, drawn viadrawImage
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
'立马加薪'insticker/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)