Unclecheng-li/AI_Animation

Unclecheng-li/AI_Animation has 1,755 GitHub stars and 133 forks. GitHot measured +51 in 7 days. Last checked 2026-11-10 01:14 UTC. Last push 2026-10-26.

So werden diese Zahlen gemessen

Dieses Projekt sammelt KI-Prompts zur Erstellung eindrucksvoller animierter HTML-Webseiten. Sie decken verschiedene Kategorien ab, darunter Animationseffekte, 3D-Visualisierungen, Präsentationen im PowerPoint-Stil und Verbesserungen der Benutzeroberfläche.

1,755 Sterne 133 forks

Gemessener Sternzuwachs

in 24h: Aktualisierung verzögert
in 7 days: +51
in 15 days: Aktualisierung verzögert
in 1 month: Aktualisierung verzögert

Nettoänderungen in überlappenden Zeiträumen, keine Tagessummen. Fehlende Messwerte bleiben leer. Sterne zeigen Interesse, nicht Qualität.

README.md

Original

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 姿态手机演员
🗂️ 叠放数据卡 — 论点卡从底部依次弹入、旧卡左叠成牌堆：折线描边 / 数字滚动 / 环形仪表按毫秒级时间线级联入场，自动播放对齐口播，录屏即成片
🖥️ 仿 Win11 系统仿真 — 1:1 还原真电脑：资源管理器、开始菜单、系统弹窗、蓝屏修复逐镜头呈现，光标演出引导操作 + 教学标记层，全屏录屏即成片
📐 瑞士风格图表演示 — 纸底墨字发丝线的编辑部级排版：每页一张匹配内容的可视化图表（时间线/循环环/流程链/热力矩阵…20 种词汇），唯一强调橙，一镜一 HTML
🎞️ UI2V 动效库 — 1,262 个 GSAP 动效包全量离线镜像（ui2v.com/motions，641MB）：按镜头用途查件的索引 + paused 时间轴挂 cue 的接入配方，演示页画面层即插即用
🎥 代码渲染 MV 工程库 — 确定性音乐视频参考工程、90 秒数据纪录片实现与三套 Opus 导演/动态设计/审查工作流：帧 = f(时间)，预览与离线导出逐帧一致
🎨 Lemo-Opuscar 风格库 — 59 种代码导演视频风格：纪实、数据、手绘、东方、印刷、排版、卡通、游戏与 3D，也可定制个人风格
🖌️ Opus Video Skills — 水彩/水墨角色动画与逐字歌词 MV，以及动态排版 + WebGL 作品集/产品 Reel
🎞️ HyperFrames 渲染底座 — HTML / CSS / 媒体 / 可 seek 动画到确定性 MP4，支持 composition、Studio、变量批量与本地/云端渲染
✅ FrameProof 视频 QA — 空帧、冻结、字幕、音频、编码元数据与源码映射检查，Fix Packets 修复闭环 + baseline 回归门禁

👇 点击预览图查看各 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 _{叠放数据卡 / 时间线论点动画}	win11-ui-demos _{仿 Win11 系统仿真 / 光标演出动画}
swiss-shot-demos _{瑞士风格图表演示 / 编辑级排版动画}
ui2v-motions _{UI 动效素材库 / 1,262 个 GSAP 动效包}
code-mv-render _{代码渲染 MV 工程库 / 歌词 MV + 生成式 MV}
lemo-opuscar _{59 种代码导演风格 / 个人风格定制}	opus-video-skills _{手绘角色 MV / 动态排版 Reel}
hyperframes _{HTML → MP4 / 确定性渲染底座}	video-qa-frameproof _{生成后视频 QA / 修复与回归门禁}

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 套主题一览 — 打开完整画廊查看预览与适用场景。}


_{scroll-3d-tilt 滚动 3D 倾斜}	_{apple-aurora-track Apple 极光轨道}	_{coverflow-classic 经典 Coverflow}	_{coverflow-watermark 水印图标版}	_{coverflow-focus Focus 展开版}


_{锁屏通知手机 3D 登台}	_{App 打开标志性 morph 转场}	_{苏格拉底对话盖章 + 手机震动}	_{知识星云多级下钻图谱}	_{横屏仪表盘 rz:-90 转横}	_{熄屏收尾 3D 旋走落幕}


_{复古报纸头条震撼数字宣告}	_{嘉年华老虎机 ★镜头推进典范}	_{像素平台跳跃 ★镜头推进典范}	_{审讯室软木板证据链追查}	_{机场安检拦截与合规}


_{此电脑爆红光标双击开演}	_{开始菜单删除警告链}	_{蓝屏修复 WinRE 百分比}	_{根目录导览问号徽章悬念}	_{双窗对比并排资源管理器}	_{右键回收站桌面交互三步}


_{AI 循环环 shot-0-1 五幕范本}	_{恶化时间线四步逐级变深}	_{点阵对撞 15 → 50+ 翻倍}	_{嵌套剖视宿主机套客户机}	_{双列对照 CTF vs 靶场}	_{热力矩阵灰阶即数据}


_{hero-badge-earn 徽章赢得动画}	_{codex-workflow 工作流编排}	_{agent-screenflow 屏幕流演示}	_{claw-game-release 发布封面动画}	_{hero-deploy-pipeline 部署管线流动}	_{hero-chat-bubbles 聊天气泡编排}

#	方式	适用于	指定版本?
A	`skills` CLI (`npx`)	任意 Agent，一行安装，按需选择 Skill	✅ via tag URL
B	Git Clone + 手动复制	本地开发 / 魔改	✅ via commit
C	GitHub Releases `.zip`	CI / 生产环境固定版本	✅ via release tag

Agent / Runtime	Skill 存放路径	状态
WorkBuddy	`~/.workbuddy/skills/<name>/`	✅ 已测试
Claude Code	`.claude/skills/<name>/`	✅ 兼容
Cursor	`.agents/skills/<name>/`	✅ 兼容
Codex CLI	`.codex/skills/<name>/`	✅ 兼容
Gemini CLI	extension manifest	✅ 兼容

Gemessener Sternzuwachs

README.md

AI Animation Skills

项目简介

Skills Gallery

ppt-animation

flowchart

network-protocol-viz

dynamic-archify

scholar-notes

card-theater

phone-ui-demos

video-shot-demos

stacked-data-cards

win11-ui-demos

swiss-shot-demos

ui2v-motions

code-mv-render

lemo-opuscar

opus-video-skills

hyperframes

video-qa-frameproof

安装

Option A · skills CLI (npx)

Option B · Git Clone

Option C · GitHub Releases

兼容性

快速上手

目录结构

贡献与许可

Ähnliche Projekte entdecken

ytdl-org/youtube-dl

excalidraw/excalidraw

godotengine/godot

mrdoob/three.js

`ppt-animation`

`flowchart`

`network-protocol-viz`

`dynamic-archify`

`scholar-notes`

`card-theater`

`phone-ui-demos`

`video-shot-demos`

`stacked-data-cards`

`win11-ui-demos`

`swiss-shot-demos`

`ui2v-motions`

`code-mv-render`

`lemo-opuscar`

`opus-video-skills`

`hyperframes`

`video-qa-frameproof`

Option A · `skills` CLI (npx)