设计资源
动效
整理自动效相关的周刊收录（100–219 期），共 64 条：网页动效、交互动画与 Motion 设计灵感。
会用 MCP 的动效组件库：Motion UI
Motion UI 是 Motion 团队新推出的 React 动效组件库，提供可以直接组合到页面里的 Hero、通知、页面过渡和数字动画等组件。它可以通过 Motion+ MCP、AI 适配提示或 shadcn CLI 安装，比较适合已经在使用 React、Tailwind 和 shadcn/ui 的项目。 它没有把动效当成散落在各个组件里的参数，而是提供
极简动画图表组件集合：Mono Charts
Mono Charts 是 Amicro 里的一组 React 动画图表组件，主打简洁的视觉风格和轻量的交互反馈。它提供折线图、柱状图、面积图、环形图、雷达图、热力图、漏斗图、散点图、KPI 卡片等多种常见图表，适合后台、数据产品和营销页面中的信息展示。 现在可以通过 Amicro 的 CLI 把图表直接添加到自己的项目里，例如： 组件会以代码的形式进入项目
图标与 SVG 形变动效：morphicons / Bloub
morphicons 是一个专门处理图标形变的轻量级库，可以让一个描边图标通过流畅的弹簧动画转换成另一个图标。它会自动计算形状之间的对齐和旋转关系，不需要为每一对图标手动编写 from/to 路径或额外的旋转规则。 在 React 中，只要改变 MorphIcon 的 icon 属性，就可以让 Menu 变成 X、Play 变成 Pause、Chevron
AI 思考状态加载动画组件库：Thinking Orbs
Thinking Orbs 是一套专为 AI 聊天和 Agent 界面设计的开源加载动画组件，用灵动的点阵球体呈现 working、searching、solving、listening、composing 和 shaping 六种工作状态，比普通的转圈 Loading 更能传达 AI 当前正在做什么。组件提供适合头像区域的 64px 与行内状态的 20px
UI 设计组件、动效词典
帮你提升 Vibe Coding 前端交互设计水平的网站，在跟 AI 编码交流时，因为不知道某个组件或微动效的专业英文名称而难以描述时，Name That UI 就像一个 UI 元素的视觉词典。你只需用自己的日常语言模糊描述想要的效果，它就能帮你精准识别出对应的专业术语、API 标识，甚至提供直接可用的 Prompt，大幅提升你与 AI 协同开发的效率。 h
面向 AI 的动画组件库：OriginKit
OriginKit 是一款专为现代网页量身打造的精美动画组件库，它提供了大量开箱即用的前端交互组件与动效，完美适配 Framer 与 React 生态。更棒的是，它原生支持 Model Context Protocol (MCP)，这使得 Claude 等 AI 编码助手可以直接获取其组件库上下文，让你通过简单的对话就能自动编写和生成高质量的动效页面。 官网
复古像素风图表库：Dither Kit
Dither Kit 是一款极具复古像素美学风格的图表及 UI 组件库。它基于超轻量的 Canvas 引擎构建，不需要依赖繁重的 Recharts。组件库包含了折线图、柱状图、饼图、雷达图以及生成式头像和渐变色块等，其特有的有序抖动（ordered-dither）填充在亮色和暗色模式下均有极佳的视觉表现，且自带细腻的入场动效和滑动 Tooltip，是打造个性
动效 SVG 图标库：AnimateIcons
如果常规的静态图标已经无法满足你的交互要求，那不妨试试 AnimateIcons。这是一个专为现代网页微交互（Micro-interactions）打造的开源动效 SVG 图标库。它提供了一大批包含内置悬停（hover）和循环（loop）动画的精美 SVG 图标，非常适合与主流的 shadcn/ui 或 motion/react 等前端框架配合使用。直接复制
Jitter 动态图形模板库
Jitter 是一款网页动画编辑工具。今天为大家推荐的是它的官方模板库，这里提供了海量免费且高质感的动态图形模板（如 UI 交互动画、社交媒体动效、图标微动效等）。你可以直接将这些模板复制到你的 Jitter 工作区中，快速替换自己的文字与素材，并支持一键导出为 GIF 或高画质视频，非常适合需要快速产出精美动效的设计师和运营人员。 https://jitt
17 个创意加载动画
17 个创意十足的加载动画（Loader），包括抖动网格、变形形状、牛顿摆、DNA 双螺旋、以及专为 AI 代理设计的盲文加载器等。你可以直接复制粘贴到 BeUI 中使用，从此告别枯燥的常规 Spinner。 https://beui.dev/components/motion/loader
动画词汇对照表
很多时候，设计师与开发沟通动效时，纯文字往往不够直观。有开发者基于 animations.dev 的动效词汇表，用 GSAP 做了一个视觉对照站点。在这里，你可以直接点击词汇查看对应的动效展示，让沟通更高效。 官网地址：https://vocabulary.vikingz.me X 推文：https://x.com/vikingmute/status/207
点阵加载器（网站 Loding 动画）
每个应用程序都需要矩阵加载器，55+个免费且开源的加载器，基于React、TypeScript、Tailwind CSS和shadcn构建。安装一个，复制代码，然后将其变成属于你自己的作品。 https://dotmatrix.zzzzshawn.cloud/
静态Logo 直接变成矢量动画的开源工具
丢一张 PNG 或 JPG 进去，它先用 AI 把像素图转成矢量路径，然后自动生成动画效果，输出无损的 SVG 注意它不是一个独立的App，是一个 Agent skill 也就是说你在 Claude Code 或者 Codex 里加载这个技能之后，直接跟 AI 说"把这个 logo 变成动画"就行 它的工作流大概是这样的： -AI 分析你的像素图，识别图形结
书籍网站欣赏
书籍分享网站，直接将书大面积展示在视觉中间，切换动画丝滑 https://press.stripe.com/
在线像素编辑器
一个像素艺术工具，其中每个像素都是代码，而不是光栅，可以导出代码、生成动画、绘画编辑等功能 https://newt.sh/
2个实用 Base UI 组件库
React、Tailwind CSS 和 Base UI 构建的现代组件库，特点是界面风格现代，组件细节精致，包含大量现成的按钮、表单、弹窗、表格、日历、Drawer 等组件，适合快速搭建 SaaS、后台、AI 产品和现代 Web 应用。相比传统组件库，它更强调视觉质感、动画细节和设计一致性。既能直接复制代码使用，也适合拿来当 UI 灵感库参考 https:
数学极客风动效库
math-curve-loaders 开源库，完全是用数学公式生成的动效。玫瑰曲线、李萨如曲线这些数学图形，动效极其优雅。纯 HTML+CSS 实现，零第三方依赖，体积极小。 自带可视化调试面板。粒子数、轨迹、速度、颜色，拖拽滑块就能实时预览。 调好参数，一键复制完整代码，粘贴到项目里就能跑。 Github：https://github.com/Paidax
APP 设计灵感、细节
一个专门收集优秀 UI 细节与微交互灵感的网站，里面汇总了很多让产品“更有灵魂”的设计小彩蛋，比如动画反馈、按钮效果、转场、拟物细节、404 页面创意等 https://designspells.com/
最具创意的 React 动画组件库
React Bits 是一套开源的创意前端组件库，包含动画、交互式和完全可定制的组件，用于构建网站。超过 110 种免费、可自定义的文本、背景和 UI 动画 https://reactbits.dev/backgrounds/orb https://github.com/DavidHDev/react-bits
高质量动态图标库
一系列流畅、高质量的动画图标，可用于您的下一个项目。直接复制粘贴到您的应用中即可。包含 260+ 个自然高质量的动态图标 https://www.itshover.com/icons
Github 的小章鱼动画
在 AI 泛滥的时代，我们中的一些人仍然在手工制作东西，GitHub Copilot 应用的 Octocat 是在 Blender 中建模、绑定和动画化的 https://x.com/CameronFoxly/status/2054976947806241214
AI 生成 SVG 工具
通过 AI 生成可编辑的 SVG 图形、插画，并且支持添加动画效果 https://quiver.ai/
在线的 SVG 形状转 3D小工具
你只需放入任何 SVG，它就能将其转化为一个可交互的 3D 对象，你可以对其进行动画制作，并导出为 4K 图像或视频。 完全免费，比如上传单色的 LOGO 可以很方便转为3D的并且可以有简单动画 https://3dsvg.design/
开源图标库
MingCute 是一套简约精致的开源图标库。无论您是设计师还是开发者，它都非常适合用于 Web 和移动端项目，同时提供了 Figma 插件能够更便捷的在设计过程中使用，以及动画图标库、UI组件库、天气图标等不同场景的素材 网站：https://www.mingcute.com/ Figma插件：https://www.figma.com/community
100+个开源免费的 SVG 加载动画
你可以使用这些基于 SVG 的加载图标来直观地指示内容正在加载或数据或正在获取。 这些动画来自多种来源，均采用MIT许可证。因此，它们可以无限制地用于商业用途，且无需署名。 https://magecdn.com/tools/svg-loaders
高颜值高质量组件库
HeroUI 是一个基于Tailwind CSS v4和React Aria Components构建的 React 组件库。每个组件都拥有流畅的动画、精致的细节和内置的辅助功能——即开即用，且完全可定制。 https://heroui.com/ 组件：https://heroui.com/docs/react/components
动态组件效果合集 Motion Core
基于 GSAP 和 Three.js 的动画 Svelte 组件库。提供适用于动态设计、3D 画布和交互式动画的即插即用解决方案 这是一个开源的项目，旨为 Svelte 生态系统带来高质量、富有表现力的动态效果。它是一个精心挑选的动态组件集合，其灵感主要来自实验性网页、独特的设计工程作品以及充满创意的编程社区。 https://motion-core.dev
图片混合成动效：一键导出 MP4
把你上传的一张或多张图片像写规则一样进行混合编排——可调颜色、混合模式和叠加关系，还能在此基础上直接添加动画效果，最后一键导出为 MP4。适合快速做氛围向动效、概念视觉实验、以及为海报/短视频生成可循环的动态素材。这是一款 vibe coding 的视觉创作工具 https://www.perplexity.ai/ https://x.com/RypeArt
开源录屏工具
Recordly 是一款可替代 Screen Studio 的开源录屏工具，用来制作更精致、专业感更强的屏幕录制视频。它在“录完就能用”的基础上，补齐了更完整的动效与渲染能力：包括光标动画/渲染管线、更贴近 Screen Studio 的缩放动画、光标循环、以及更顺滑的平移/跟随表现。 同时它提供 macOS / Windows 原生录制能力，并支持 Win
Rive 交互动画收集站
设计群里小伙伴做的汇集 X（原 Twitter）上优质的交互动画案例，覆盖角色动画、图标动效、加载反馈、导航交互、数据可视化、插画等多种应用场景。所有内容已完成分类整理，支持快速检索，真正做到“随用随找”；同时加载轻量、访问顺畅，对网络环境更友好。 https://rive.cool/
Rive 中文汉化插件
设计群里小伙伴自己搞的，Rive 丝滑原生的中文界面，使用 Rive 做动画的不要错过这款插件。 像回老家一样的丝滑中文感受 支持更换自定义字体 https://chromewebstore.google.com/detail/rivecn/nhjgmafflpekbjcoljhjlajabjjdmmfa
精美动态图标库
这是一个开源（MIT 许可证）的图标库，包含 316 个流畅的动画图标，可用于您的项目 https://www.heroicons-animated.com/
开源动画图标库
一套开源的流畅动画图标，可用于您的项目。 https://lucide-animated.com/
现代 Web 动效库：Motion.dev
是一款为现代 Web 打造的高性能动画库，主打 轻量、流畅、易上手。通过简洁直观的 API，即可快速实现界面过渡、交互动效、滚动动画和物理弹性效果，适用于原生 JS、React、Vue 等多种场景。 适合希望用更少代码，做出更自然动效的前端开发者与设计师。 https://motion.dev/
网站欣赏
Shopify 每次有重大更新时，都会做一个超级夸张的介绍网站。整站的每个 Section 都用了 Three.js 和 WebGL2 来做渲染，而且每个部分都有自己独立的彩蛋（Easter Egg）。 其中有一个很有意思的交互：点亮一把“钥匙”之后，这把钥匙似乎“知道”对应的“锁”在哪里，并能触发彼此的互动效果。现在猜测他们应该是用 BroadcastCh
鼠标效果素材
适合冬季节日场景的鼠标特效，雪花会在光标移动时动态生成并跟随轨迹，带来轻松又灵动的交互体验 https://cursify.vercel.app/components/snowflake-cursor
Ricoui – 作品集模板
一个基于 Astro 构建的现代化、高性能设计师个人作品集网站模板。采用复古蓝色主题，支持暗色模式，具有精美的动画效果和优秀的用户体验。 https://www.figma.com/community/file/1570102065468722827
国内首个 Rive 动效零基础入门到实践课程
课程作者创建了RiveCN 中文站，长期翻译并整理 Rive 官方文档，结合实践经验打造这套从基础到实战的中文课程，旨在帮助设计师与开发者快速上手 Rive，理解其核心逻辑与动效原理，轻松完成视觉与交互的动效设计。 Rive 是当下最完整、最省心的动效交付方案——这门课程将带你快速入门，全面提升视觉与交互质量。 https://flowus.cn/rivec
Lander Studio 设计作品集
专注于科技创业公司的设计工作室，已完成 110+ 项目，作品涵盖网站、移动应用、仪表盘等多个领域，设计风格现代精致，动效细腻流畅。他们使用 Framer、Webflow、Next.js 进行开发，并擅长集成 Rive、Spline 等工具创造复杂的 2D/3D 动画效果。 https://lander.studio/
Lotties 文件编辑器
来自国内的开发者，快速修改 JSON 文件中动画图层的颜色，并轻松删除不需要的图层。让动画编辑变得轻松高效，同时上传你的 Json 动画可以将不需要的元素删除重新导出 Json 动画，目前完全免费 投稿人：Alban-白 https://lottieeditorx.cfd/
LottieLab 水印去除工具
超简洁的 LottieLab 去水印工具，上传你的文件自动去掉水印信息 投稿人：Alban-白 https://volodymyr-malishevskyi.github.io/lwrt/ Lottie 类型的动画文件无法本地预览效果，可以将 JSON 动画文件上传到月维中进行预览，发给团队或者开发者，开发者可以在月维进行资源下载和使用
AI 聊天 UI 设计界面文件
这是一套 AI 聊天界面设计系统，包含移动端和桌面端界面，支持深浅色模式与响应式布局，包含多种组件变体（如输入框、气泡、加载动画） https://www.figma.com/community/file/1542107977345030340/ai-chat-ui-systemcommunity
基于React 的光标动画库
使用React、TypeScript、Tailwind CSS 和 Framer Motion 构建的开源动画光标组件，可以让你的网站更有特色 https://cursify.vercel.app/
前端动效 Demo 库
群里的设计师：霂明·坊，把日常工作中常用的各种效果整理成了一个 Demo 合集/效果库，方便大家参考和使用。 https://mumingfang.com/
网页设计欣赏
设计非常有特色的网站，轮播效果滑动时有丰富的动画展示，设计风格非常鲜明 https://smooothy.federic.ooo
Origami Design 交互原型设计工具
由 Facebook 设计团队开发的免费交互原型设计工具，它基于Quartz Composer 构建，通过简化界面和提供丰富的自定义控件（如弹性动画、滚动、转场、交互响应模块等），显著降低了原型制作的技术门槛，适合移动应用和复杂交互场景的设计。 https://origami.design/
APP 设计灵感网站
网站中各类APP的视频录屏，视觉、交互，都能直观预览。 https://appmotion.design/
设计师的灵感网站
https://www.motionimo.xyz/
网页设计欣赏
Anime.js 是一个轻量、强大且易用的 JavaScript 动画引擎，适用于网页上的各种动画需求。它提供了一个统一的 API，可以用来控制 HTML、CSS、SVG、JavaScript 对象等的动画效果。网站动画丝滑，赶紧试试 https://animejs.com/
动画编辑工具：Phase
面向产品设计师的简单动画编辑工具，易于学习 - Lottie 动画和微交互。 https://www.phase.com/
UI UX 交互案例欣赏
实用的组件动画交互 https://khagwal.com/interactions/
React 动画库
为开发者提供 React 动画库集合，包含文本动画、组件动画、背景动画等非常丰富的动画案例库，复制代码就可以直接使用啦 https://www.reactbits.dev/
在线文字排版（动画）工具
非常灵活的文字动画排版工具，有非常丰富的参数可以调整，生成的动画支持导出 Gif 格式到本地。 https://spacetypegenerator.com/
Spinner CSS 加载动画集合
包含常用的旋转、滚动、翻转等动画效果合集，支持方便复制 CSS 代码复用。 投稿人：Jay Edison https://css-loaders.com/spinner/
Lottie JSON 动画编辑器
群里设计师朋友使用 Cursor 做了一个 Lottie JSON 动画编辑器，上传 JSON 动画可以快速删除不需要的图层、修改图层的颜色；主打一个快速编辑，即开即用！ https://lottieeditorx.cfd/
开源的动态图标库: Pqoqubbw/Icons
开源流畅动画图标集合，可用于您的项目。开源且免费可以随意使用它们， 使用 framer-motion 和 lucide 构建 https://icons.pqoqubbw.dev/
SVG 动画图案生成器
在线设计、制作 SVG 图案动画并导出为矢量图、png、视频或 GIF。作者描述其中 95% 是由 Claude AI 编码的 https://svg.designcode.io/ 作者：https://x.com/mengto/status/1815748175317098776
设计师个人作品网站欣赏
元素动效以及网页 UI 细节非常棒 https://sepide.design/
Animata 好看的交互按钮组件库
来自互联网的手工制作的交互动画和效果可复制代码到项目中直接使用，除了按钮还有其他设计精美的组件。 https://animata.design/docs/button
数据库平台网站
网站中使用到的视频、动画效果都非常惊艳，和前几期介绍的 花费 89000美元的网站是同一家设计工作室的作品。 NEON 网站：https://neon.tech/ 工作室网站：https://pixelpoint.io/
开源的超级笔记工具：Huly
Huly 是一个开源工具，可以作为 Linear、Jira、Slack 和 Notion 的一体化替代品。最近比较出名的是花费 89000美元设计的官网，动画、动效确实非常惊艳。 https://huly.io/
免费高质量网页动效组件库
高质量的网页动效组件，可以直接拷贝代码使用，组件效果质量很高放在网站很出效果。 投稿人：Anton💠 https://ui.aceternity.com/components
实现主题切换从未如此简单
这是一系列很棒的、易于使用的动画切换；专为在明暗模式之间切换而设计。它是一个模块化库，旨在根据需要提供充足的定制。可直接复制代码使用适用于 CSS 框架，例如 Tailwindcss。 投稿人：Summer_夏沫汐 https://toggles.dev/
动画灵感网站
网站中采集了logo、网站转场、图标等动画灵感。 投稿人：Witto https://www.rebrand.gallery/
共 64 条
内容整理自 Moonvy《设计素材周刊》，版权归原作者所有