# text-playground

**Repository Path**: hongmaple/text-playground

## Basic Information

- **Project Name**: text-playground
- **Description**: 用glm-5v 模型做的 文字特效试验场 特别酷炫, 耗时4个多小时，横向对比国内其他模型，耗时最长效果最好
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: https://z10ws2vsrez1-d.space.z.ai/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-05
- **Last Updated**: 2026-04-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# Text Playground

一个富有创意的文本交互式动画 playground，支持多种独特的文字动画模式。

## 功能特点

### 核心模式

| 模式 | 描述 |
|------|------|
| **Wave** 🌊 | 波浪效果 - 文字随光标移动产生波浪动画 |
| **Typewriter** ⌨️ | 打字机效果 - 逐字显示文本 |
| **Matrix** 💾 | 矩阵效果 - 经典黑客帝国数字雨 |
| **Neon** 💫 | 霓虹效果 - 发光文字动画 |
| **Aurora** 🌌 | 极光效果 - 流动的极光文字 |
| **Kaleidoscope** 🔮 | 万花筒效果 - 镜像对称动画 |
| **Chain** 🔗 | 链条效果 - 文字间产生连接线 |
| **Magnetic** 🧲 | 磁力效果 - 文字被光标吸引 |
| **Vortex** 🌀 | 漩涡效果 - 文字被吸入漩涡 |
| **Light** 💡 | 光照效果 - 文字产生光晕 |
| **Dissolve** ✨ | 溶解效果 - 文字逐渐消散 |
| **Gravity** ⬇️ | 重力效果 - 文字受重力下落 |
| **Elastic** 🪄 | 弹性效果 - 文字弹性拉伸 |
| **Quantum** ⚛️ | 量子效果 - 量子态文字变化 |
| **Scatter** 🎯 | 散射效果 - 文字随机散落 |

### 其他功能

- **FPS 性能监控** - 实时显示帧率
- **Canvas 录制** - 导出 WebM 视频
- **文本历史** - 支持撤销
- **多主题支持** - 内置多种色彩方案
- **声音效果** - Web Audio API 音效
- **Firefly 粒子** - idle 状态下的萤火虫效果
- **Ripple 点击效果** - 点击波纹动画

## 技术栈

- **Framework**: Next.js (App Router)
- **Language**: TypeScript
- **Styling**: Tailwind CSS + CSS Variables
- **UI Components**: Radix UI + Shadcn UI
- **Database**: Prisma + SQLite
- **Build**: Bun

## 演示截图
![输入图片说明](docs/imgs/image.png)
## 快速开始

### 安装依赖

```bash
bun install
```

### 启动开发服务器

```bash
bun run dev
```

### 构建生产版本

```bash
bun run build
```

## 项目结构

```
├── src/
│   ├── app/              # Next.js App Router
│   │   ├── api/         # API 路由
│   │   ├── globals.css   # 全局样式
│   │   ├── layout.tsx   # 根布局
│   │   └── page.tsx    # 首页
│   ├── components/        # React 组件
│   │   ├── text-playground.tsx  # 核心组件
│   │   └── ui/         # UI 组件库
│   ├── hooks/           # 自定义 Hooks
│   └── lib/            # 工具函数
├── prisma/
│   └── schema.prisma   # 数据库 Schema
├── public/             # 静态资源
└── skills/           # AI Skills (如果项目需要)
```

## 使用说明

1. 在文本框中输入文字
2. 选择不同的模式体验各种动画效果
3. 使用键盘快捷键快速切换：
   - `?` 或 `/` - 显示帮助面板
   - `Cmd/Ctrl + S` - 切换声音
   - `Cmd/Ctrl + R` - 开始录制
4. 点击 Canvas 可以录制导出 WebM 视频

## License

MIT