horse-sticker-maker

name

horse-sticker-maker

description

Create and deploy a festive Chinese New Year (Year of the Horse 2026) animated GIF sticker maker web app. Use when the user wants to generate custom horse-themed blessing stickers, deploy a sticker generator H5 page, or create WeChat-compatible animated GIF stickers with gold horse animation on red background. Supports custom text input, 6-frame gold horse galloping animation, Canvas-based client-side GIF rendering via gif.js, and Vercel deployment.

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

1. Copy the template project:

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

2. Run locally:

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

3. 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