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:
CODEBLOCK0
- 2. Run locally:
CODEBLOCK1
- 3. Deploy to Vercel:
CODEBLOCK2
Project Structure
CODEBLOCK3
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 INLINECODE3
Horse Frame Assets
- - 6 transparent PNG frames in INLINECODE4
- Generated via AI image model, backgrounds removed with INLINECODE5
- Removal technique: pixels with R>210, G>210, B>210 → alpha=0
Customization Points
- - Bottom text: Edit
'立马加薪' in INLINECODE7 - GIF size: Change
const size = 240 (keep ≤240 for WeChat) - Frame count: Change INLINECODE9
- Horse images: Replace INLINECODE10
- 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
CODEBLOCK4
External CDN: gif.js@0.2.0 (loaded at runtime for client-side GIF encoding)
骏马贴纸生成器
生成一个可创建2026年马年春节自定义动画GIF贴纸的网页应用。
功能说明
- - 用户输入自定义祝福文字（1-8个字符）
- 客户端Canvas渲染240px动画GIF，包含：
- 红色渐变背景配金色闪光粒子
- 6帧金色骏马奔跑动画（透明PNG）
- 顶部用户自定义金色书法文字
- 底部立马加薪文字带颜色循环效果
快速开始
- 1. 复制模板项目：
bash
cp -r
/assets/horse-blessing-template ./horse-blessing
cd horse-blessing
npm install
- 2. 本地运行：
bash
npm run dev
# 打开 http://localhost:3000/sticker
- 3. 部署到Vercel：
bash
vercel --prod --yes
项目结构
horse-blessing/
├── app/
│ ├── page.tsx # 主页面（AI生成祝福语配诗）
│ ├── sticker/page.tsx # 贴纸制作器（Canvas GIF生成器）
│ ├── api/generate/ # AI作诗+图片生成API
│ ├── api/sticker/ # 贴纸API
│ └── layout.tsx # 根布局（红色主题）
├── public/
│ ├── horse-frame-[1-6].png # 6帧透明金色骏马
│ ├── horse-transparent.png # 静态骏马备用图
│ └── gif.worker.js # gif.js web worker
├── package.json
└── tailwind.config.ts
关键技术细节
GIF生成（客户端）
- - 使用通过CDN加载的gif.js（Script from next/script）
- 18帧（6帧骏马×3个循环），每帧延迟85ms
- Canvas尺寸：240×240px，兼容微信贴纸
- 骏马帧作为Image元素加载，通过drawImage绘制
骏马帧资源
- - 6个透明PNG帧，位于public/horse-frame-[1-6].png
- 通过AI图像模型生成，使用sharp去除背景
- 去除技术：R>210、G>210、B>210的像素→alpha=0
自定义点
- - 底部文字：编辑sticker/page.tsx中的立马加薪
- GIF尺寸：修改const size = 240（微信保持≤240）
- 帧数：修改const frames = 18
- 骏马图片：替换public/horse-frame-*.png
- 背景：修改径向渐变颜色
- 闪光数量：调整闪光数组大小（默认30）
微信贴纸兼容性
- - 最大文件大小500KB
- 推荐最大尺寸240px
- 需要GIF格式
- 保存→微信聊天→表情面板→+→从相册选择
依赖项
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
}
外部CDN：gif.js@0.2.0（运行时加载，用于客户端GIF编码）
