Big Banana Emoji Maker

A browser-based tool for creating and processing Google Big Banana GIF animations. All processing is done locally in your browser - no data is uploaded to any server.

中文版

Features

• GIF Frame Extraction - Extract individual frames from GIF animations and download as ZIP
• Sprite Sheet Slicer - Slice sprite sheets into individual frames by rows and columns
• Emoji Composer - Create GIF animations from sprite sheets with customizable FPS, dimensions, and loop settings

Tech Stack

• React 19 + TypeScript
• Vite 7
• Tailwind CSS 4
• Zustand (State Management)
• gif.js (GIF Generation)
• gifuct-js (GIF Parsing)
• JSZip (Batch Downloads)

Getting Started

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

Usage

GIF Frame Extraction

1. Upload a GIF file
2. View extracted frames
3. Download all frames as ZIP

Sprite Sheet Slicer

1. Upload a sprite sheet image (PNG/JPG)
2. Set rows and columns to define the grid
3. Preview the slicing grid
4. Export slices and download as ZIP

Emoji Composer

1. Upload a sprite sheet image
2. Set rows and columns for slicing
3. Click "Slice" to generate frames
4. Adjust GIF settings (FPS, dimensions, loop count)
5. Preview the animation
6. Generate and download the GIF

License

MIT

---

中文版

一个基于浏览器的工具，用于创建和处理 Google Big Banana GIF 动图。所有处理均在浏览器本地完成，不会上传任何数据到服务器。

功能特性

• 动作提取 - 从 GIF 动图中提取单独的帧并打包下载
• 精灵图切片 - 按行列切割精灵图为单独的帧
• 表情合成 - 从精灵图创建 GIF 动画，支持自定义帧率、尺寸和循环设置

技术栈

• React 19 + TypeScript
• Vite 7
• Tailwind CSS 4
• Zustand（状态管理）
• gif.js（GIF 生成）
• gifuct-js（GIF 解析）
• JSZip（批量下载）

快速开始

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 预览生产版本
pnpm preview

使用说明

动作提取

1. 上传 GIF 文件
2. 查看提取的帧
3. 下载所有帧（ZIP 格式）

精灵图切片

1. 上传精灵图（PNG/JPG）
2. 设置行数和列数定义网格
3. 预览切片网格
4. 导出切片并下载（ZIP 格式）

表情合成

1. 上传精灵图
2. 设置行数和列数进行切片
3. 点击"切片"生成帧
4. 调整 GIF 设置（帧率、尺寸、循环次数）
5. 预览动画效果
6. 生成并下载 GIF

许可证

MIT