✓ Verified 💻 Development ✓ Enhanced Data

Horse Sticker Maker

Create and deploy a festive Chinese New Year (Year of the Horse 2026) animated GIF sticker maker web

Rating: 3.8 (105 reviews)
Downloads: 573 downloads
Version: 1.0.0

Overview

Create and deploy a festive Chinese New Year (Year of the Horse 2026) animated GIF sticker maker web app.

✨Key Features

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)

Complete Documentation

View Source →

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:

bash

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

Run locally:

bash

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

Deploy to Vercel:

bash

vercel --prod --yes

Project Structure

text

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

json

{
  "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: [email protected] (loaded at runtime for client-side GIF encoding)

Installation

Terminal bash


openclaw install horse-sticker-maker

Copied!

💻Code Examples

└── tailwind.config.ts

-tailwindconfigts.txt

## 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

example.sh

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

example.txt

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

example.json

{
  "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"
}