从具体交互开始
先选择一段实际交互,再比较调整前和调整后的变化。按钮按压、菜单展开、卡片形变、文字扰动等示例各自保留自己的触发规则,参数用于控制当前效果。
TuneShape 让预览、动效说明、Motion 参数和 JSON 配置来自同一份配置。观察倍速用于看清过程,不会写进导出的动画时长。
预览、调整,再带走
选一个有用的效果
从目录选中动效,用鼠标、键盘或播放按钮体验它怎样进入、退出和响应操作。
比较参数变化
调整时长、缓动或当前效果支持的参数,观察前后差异;使用说明和配置确认变化来自哪里。
保存或用于项目
复制描述词,或导出 JSON、动效规格、离线 HTML 和独立复刻工程。将导出结果放进自己的项目后,再检查实际样式与输入方式。
确认项目入口
本项目的正式英文名是 TuneShape,中文名是「随形」,取意“随物赋形”。工具入口是 tuneshape.kai-nex.com/,公开基础示例仓库是 github.com/orocoa/TuneShape。
GitHub 仓库公开按钮、Tab 和页内对话框三个可运行的 React/Motion 基础示例及对应配置和 Prompt,另有 Canvas ASCII 鱼群示例。完整网站、目录、编辑器面板和高级效果由独立工程维护,不能把这个示例仓库当成整站源码。
页面里发生什么
交互动效和参数计算在浏览器里运行。工具页面本身不调用 AI;如果需要 AI 生成实现,可以把复制出的描述词交给自己选择的编程助手。
需要保留一次调整时,请导出 JSON 配置。可运行工程、Prompt 和离线 HTML 有不同用途,使用指南会说明怎样选择与验收。
关于 TuneShape 的常见问题
搜索 TurnShape 时,怎样确认是这个项目?
如果你输入 TurnShape 或 turnshape 想寻找这里的 UI 动效工具,请核对正式拼写 TuneShape,以及本页列出的官网和 orocoa/TuneShape 仓库。TurnShape 没有被用作本项目的正式名称。
TuneShape 是 AI 动画生成服务吗?
TuneShape 提供浏览器内的交互预览、参数调整和导出。复制实现 Prompt 后,可在你自己的编程工具中使用;网页本身不发送 AI 生成请求。
GitHub 上有完整网站源码吗?
公开仓库的范围是三个 React/Motion 基础示例、配套配置和 Prompt,以及 Canvas ASCII 鱼群示例。完整网站、编辑器与高级效果实现不在这个公开基础示例包里。
