AI_Animation

项目详情摘要

AI Animation Skills 一套用 AI 生成炫酷 HTML 动画的 Agent Skills 集合 · A collection of skills for generating cool HTML animations with AI** 🌐 **English version**: `README_EN.md` 项目简介 本仓库是基于 WorkBuddy / Claude Code / Cursor 等 AI Agent 的**动效 Skill 集合**。每个 Skill 是一个自包含文件夹，包含 `SKILL.md`（Agent 执行指令）、`README.md`（人类文档）、`references/`（Prompt 参考）和 `assets/`（模板 HTML）。安装后，AI Agent 会根据你的描述自动激活对应 Skill，生成完整的单文件 HTML 动画。 一句话生成： 📊 **PPT 风格演示** — 科普、技术讲解、视频配套演示 📈 **流程图 / 原理演示** — 流程图、概念图、对比图、时序图、AI 模型可视化等 🌐 **网络协议可视化** — TCP/IP、IPv4、以太帧、路由、DHCP 等 🏗️ **动态架构图** — 系统架构、流程图、时序图、数据流图、状态机，带流动动画 + 多格式导出 📝 **学霸笔记** — 手写笔记本风格的精美 HTML 学习笔记，两种模板风格 🎴 **卡片剧场** — 侧边栏叙事 + 3D 卡片轮播，协议流程 / 产品特性 / 分步讲解的叙事感演示 🎬 **视频分镜演示** — 电影级"一个镜头一个 HTML"演示动画：29 种风格轮换、镜头推拉、WebAudio 音效、角色表情吐槽，全屏录屏即成片 📱 **手机系统 UI 演示** — 一台"真手机"的电影化编排录屏：锁屏通知、聊天、设置页、App 界面逐镜头呈现，HyperOS 级手感动效 + 3D 姿态手机演员 🗂️ **叠放数据卡** — 论点卡从底部依次弹入、旧卡左叠成牌堆：折线描边 / 数字滚动 / 环形仪表按毫秒级时间线级联入场，自动播放对齐口播，录屏即成片 👇 点击预览图查看各 Skill 详情** ppt-animation PPT 演示 / 翻页动画 flowchart 流程图 / 概念图 / 原理演示 network-protocol-viz 网络协议 / 数据包演示 dynamic-archify 动态架构图 / 流程图 / 时序图 scholar-notes 学霸笔记 / 手写笔记本风格 card-theater 卡片剧场 / 3D 卡片轮播 phone-ui-demos 手机系统 UI / 编排录屏动画 video-shot-demos 视频分镜演示 / 电影级镜头动画 stacked-data-cards 叠放数据卡 / 时间线论点动画 Skills Gallery `ppt-animation` 分类:** PPT 演示 / 翻页动画 适用于:** 视频录制、技术科普、教学演示、直播课件——需要"PPT 翻页 + 元素依次缓入"动画效果的场景。 `ppt-animation` 生成 PPT 风格的单文件 HTML 翻页演示。每次翻页后页面内元素依次缓入出现，支持暗色科技风、暖色报纸风、简约白色、赛博朋克红橙、渐变暗色等多套主题。键盘 / 滚轮 / 点击均可翻页，适配全屏播放和录屏。 亮点: 16:9 宽高比，适配全屏播放与录屏 每次翻页后元素依次缓入出现（细化到每行文字） 5 套内置主题：`dark-tech` / `warm-paper` / `clean-white` / `cyber-red` / `gradient-dark` 核心概念用图形化元素（图表、流程图、示意图）展示，不依赖外部图片 支持以已有模板为基础重构（`以 assets/xxx.html 为模板演示以上内容`） dark-tech 暗色科技风 warm-paper 暖色报纸风 clean-white 简约白色 cyber-red 赛博朋克红橙 gradient-dark 渐变暗色 ↑ 5 套主题一览 — 打开完整画廊 查看预览与适用场景。 Links: README · SKILL.md `flowchart`