跳到正文
AYi· @AYi_AInotes · X·· 1 小时前精选AI 评分65
AI 导读

@p4nthera_ 建了一个持续更新的动态图形画廊 prompt-motion.com,收录 226 个用 Claude Opus 5.5 生成的动效,全部开源并标注创作者来源。每个案例附生成它的完整提示词或 skill 及技术栈(HTML + Playwright / SVG 动画),支持一键复制代码,覆盖按钮加载器等 UI 状态动效到流体变换、粒子律动等复杂效果。

推荐理由

画廊把每个动效对应的完整提示词和技术栈一并列出,前端开发者可以直接复用这些结构去生成类似动效。

正文

卧槽,神了啊,Opus 5.5动效抄作业神器来了!
Claude 打造的 226 个动态图形画廊全部开源了!!

这绝对是近期全网最值得每一个前端工程师、UI 设计师和独立开发者无脑收藏的动态图形神器,

提示词、源码一网打尽,支持一键复制,做网页和 App 开发的兄弟建议立即收藏。

作者 @p4nthera_ 把 X 上全网用 Claude Opus 跑出来的顶尖动效案例,直接做成了一个完全开源且持续更新的动态图形画廊(http://prompt-motion.com)。
目前已经收录了整整 226 个高难度动态效果,
最爽的是每一个动效旁边,都把生成它的完整提示词、技术栈架构(HTML + Playwright / SVG 动画)和创作者来源扒得一清二楚,
支持一键复制代码,导入就能直接跑。
平时做前端、做 App 动效或者网页 UI 的兄弟,应该都懂那种绝望感:
脑子里想做个呼吸变形的加载按钮、灵动的状态切换开关、或者科技感拉满的数据图表,
自己手写 CSS 和数学公式要抠一整天,直接让 AI 写又经常生成出一堆僵硬死板的平庸代码。
这个画廊之所以让全网疯狂收藏,是因为它直接把目前最顶尖的一线动效代码库全部明牌端到了你眼前:
从基础的 UI 状态流转(按钮、加载器、滑块、音量条、状态标签),
到复杂的多维图形渐变、流体拓扑变换与粒子律动,
每一个案例都是实打实在浏览器里跑通的高水准成品。
你不需要从零去琢磨提示词怎么写,直接照着画廊里的结构抄作业:
先给状态列表,再给单色或强调色规范,最后限定无版权音频节奏(如 120 BPM),
Claude 瞬间就能用纯代码手搓出丝滑到极致的动态视觉。
这背后其实撕开了一个关于现代前端开发的巨大代际红利:
过去需要资深动效设计师在 AE 里一帧一帧磨、再由前端工程师费劲导成 Lottie 的复杂动效,
现在配合大模型的代码与空间理解能力,已经彻底变成了单文件 HTML 和纯代码的即时生成。
代码不用你重写,灵感不用你干憋。
把这个 226 个案例的军火库存在书签栏里,以后任何页面需要加动效,随手翻翻直接复制,效率瞬间拉升十倍。
体验网址和关键分类全整理在一楼了,建议所有做产品和开发的朋友立即收藏备用。

大家平时在做网页或 App 时,最头疼的是哪类动效的实现?是复杂的粒子变形、流体过渡,还是交互时的状态微动效呢?

引用p4n@p4nthera_
I built a growing gallery of motion graphics made with Claude Opus 5.5, each shown next to the prompt or skill that made it. 226 so far, all pulled from posts here and credited to their creators. https://prompt-motion.com
在 X 查看被引用的帖子

来源:AYi · x.com