✨ Avatar FX Studio

动态头像粒子特效与视频转 GIF 工作台。支持上传图片或 GIF 制作头像动效，也支持用浏览器原生 video 解码把视频片段导出为 GIF。

在线体验：https://ddddx.github.io/avatar/

功能

• 🎨 47 种动态特效：闪电、火焰、炫光、环形粒子、能量护盾、冰霜、水波纹、花瓣雨、星尘、棱镜光、旋风、烟花、金粉、旋转、加载中、等待圈、矩阵雨、气泡、极光、萤火虫、雨、星门脉冲、光盘、Google One 环、双色环、闪烁环、LinxuDo、弹跳头像、收缩四色环、双轴圆环、霓虹彗星环、拖尾光点、引力井、全息裂解、星尘重构、液态金属、像素坍缩、图块裂变、热成像脉冲、数据切片、频谱环、魔法阵、赛博 HUD、CRT 故障、传送门、万花筒、多形变换
• 📷 支持静态图片和 GIF 动图导入
• 🔄 无图模式：不传图片也能玩特效
• 📐 圆形 / 圆角矩形裁切，实时预览
• 🪞 支持左右镜像、上下镜像
• 🔁 多种环类 / 几何特效支持正转 / 反转：星门脉冲、光盘、Google One 环、双色环、霓虹彗星环、拖尾光点等
• 🎛️ 双色环支持密度调分段间距：从两半对切到高密度细分交替
• ✨ 闪烁环支持整圈主副色交替闪烁：强度控制环粗细，速度控制切换节奏
• 💫 拖尾光点支持数量、颜色、强度和拖尾大小调节
• 🌀 引力井 / 全息裂解 / 星尘重构 / 液态金属 / 像素坍缩 / 图块裂变 / 热成像脉冲 / 数据切片：多种确定性循环的原图本体变形特效，首尾帧相位一致，适合导出循环动图
• 🧪 预览与导出统一环渲染逻辑：减少环类特效的拼缝、脏点和首尾不一致问题
• 🎞️ 独立视频转 GIF：上传视频后可预览播放，设置开始 / 结束时间、裁剪区域、导出宽高、FPS、质量和循环参数，不依赖 ffmpeg.wasm
• 📊 可选访问与导出统计：配置 VITE_STATS_ENDPOINT 后显示访问次数、总导出次数、头像导出次数和视频 GIF 导出次数

导出格式

格式	动画	半透明	说明
WebM	✅	✅	视频格式，支持完整半透明
GIF	✅	❌	动图，头像特效和视频片段均使用 gif.js 导出
APNG	✅	✅	动画 PNG，原生 alpha 通道
WebP	✅	✅	动画 WebP，Chrome/Edge 支持

技术栈

• React + TypeScript + Vite
• PIXI.js — 大部分粒子特效的实时渲染
• Canvas 2D — 环类特效的统一预览与导出渲染
• Browser <video> — 视频转 GIF 的原生解码与逐帧抽取
• Cloudflare Worker Durable Object — 可选访问与导出次数统计
• omggif — GIF 解码
• gif.js — GIF 编码
• upng-js — APNG 编码
• wasm-webp — 动画 WebP 编码

本地开发

npm install
npm run dev

Vite 开发端口固定为 5174。

统计接口默认关闭。需要本地启用时创建 .env.local：

VITE_STATS_ENDPOINT=https://your-worker.workers.dev

构建

npm run build
npm run preview -- --host 0.0.0.0 --port 5174

访问与导出统计

统计服务在 stats-worker/，部署到 Cloudflare Worker 后，把 Worker URL 配置为 VITE_STATS_ENDPOINT。

wrangler login
cd stats-worker
wrangler deploy

线上 GitHub Pages 启用统计：在仓库 Settings -> Secrets and variables -> Actions -> Variables 新增 VITE_STATS_ENDPOINT，值填 Worker URL，然后重新运行 Pages 部署。

部署

项目通过 GitHub Actions 自动部署到 GitHub Pages。

友情链接

• Linux.do — 一个关于 Linux 和开源的技术社区