正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

🤯 免费“白嫖”这套动画组件，让你的 Shadcn UI “骚”到飞起！(开源、可定制，杀死静态界面!) Animate UI，一套基于 TypeScript / Tailwind CSS / Motion 构建的免费、开源 React 动画组件库，简直是为 Shadcn UI 量身定做（当然也能单独用）！✨ 链接见评论👇

MapleShaw

21,948 subscribers

21,269 次观看 • 1 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

4 条评论

币安交易所注册服务 (Parody) 的头像

币安交易所注册服务 (Parody)1 年前

太棒了

Indie Maker OK! 的头像

Indie Maker OK!1 年前

不错

Prk 🦋@imprk.me 的头像

Prk 🦋@imprk.me1 年前

Shadcn Vue 怎么办

MapleShaw 的头像

MapleShaw1 年前

暂时还没有，得看他们后续支不支持了

相关视频

提供 shadcn/ui 和 Base UI 组件库，带落地页、背景、网格三个可视化构建器，让开发者少写代码就能搭出现代 Web 界面。 UI TripleD 是一组 shadcn/ui 和 Base UI 组件，加了 Framer Motion 动画。里面有三个工具：拖拽拼落地页、调着色器做 Aurora 动效背景、点几下生成 Tailwind 网格布局。单仓用 Turborepo + pnpm 管理，跑在 Next.js 16、React 19、TypeScript 上。

提供 shadcn/ui 和 Base UI 组件库，带落地页、背景、网格三个可视化构建器，让开发者少写代码就能搭出现代 Web 界面。 UI TripleD 是一组 shadcn/ui 和 Base UI 组件，加了 Framer Motion 动画。里面有三个工具：拖拽拼落地页、调着色器做 Aurora 动效背景、点几下生成 Tailwind 网格布局。单仓用 Turborepo + pnpm 管理，跑在 Next.js 16、React 19、TypeScript 上。

Geek Lite

24,937 次观看 • 3 个月前

如果你用这些网站，做不出顶级UI前端。我让在座的一人搞一次，立贴为证。 1️⃣在线 3D / 交互设计编辑器入口。链接： 2️⃣UI 设计灵感收集网。链接： 3️⃣一个面向前端和 AI 编程助手的 React UI 组件 / 模板 / 主题平台。链接： 4️⃣一个设计资源导航站 / 工具目录 / 灵感资源库。链接： 5️⃣一套开源的 React 组件，包含动画、交互式和完全可定制的组件。链接：

如果你用这些网站，做不出顶级UI前端。我让在座的一人搞一次，立贴为证。 1️⃣在线 3D / 交互设计编辑器入口。链接： 2️⃣UI 设计灵感收集网。链接： 3️⃣一个面向前端和 AI 编程助手的 React UI 组件 / 模板 / 主题平台。链接： 4️⃣一个设计资源导航站 / 工具目录 / 灵感资源库。链接： 5️⃣一套开源的 React 组件，包含动画、交互式和完全可定制的组件。链接：

领哥LingGe🙏

19,712 次观看 • 1 个月前

昨日看到 Stephen Haney 开源 Paper Shaders，同时 Alex Barashkov 也推出了一套 UI 组件库，于是我将两者整合，搭建了一个支持全屏预览、参数可自定义配置的在线网页。你可直接上传 Logo，快速生成质感精致的动态动画效果。

Paidax

66,196 次观看 • 1 个月前

刚逛shadcn的注册表，发现Kokonut UI的这一系列AI组件还挺不错的，非常适合用来做AI Chat相关的产品开发，推荐给大家。 shadcn的注册表中的组件也都可以使用shadcn MCP引入，如果不知道的可以看我的MCP那期课程，课程地址见评论区👇👇👇

刚逛shadcn的注册表，发现Kokonut UI的这一系列AI组件还挺不错的，非常适合用来做AI Chat相关的产品开发，推荐给大家。 shadcn的注册表中的组件也都可以使用shadcn MCP引入，如果不知道的可以看我的MCP那期课程，课程地址见评论区👇👇👇

Yihui

12,110 次观看 • 10 个月前

这个 AI UI 网站火了，我见过最好的UI设计😃😲 Beautiful UI 是 Shane Levine 做的一套专门给 AI 原生产品设计的 UI 组件库。以前 shadcn/ui 解决的是按钮、表格、弹窗这些传统网页组件，而 Beautiful UI 开始解决 AI 产品真正需要的东西。里面已经做了 19 类组件：AI Thinking、流式回答、Tool Call、任务执行状态、Agent 操作前审批、引用来源、上下文卡片、AI 修改 Diff、代码生成、Prompt 输入框等等。如果你做 Agent、AI SaaS、Claude/Cursor 类产品，很多交互几乎可以直接参考甚至复制过去。想要网站的同学，评论区吱声……

这个 AI UI 网站火了，我见过最好的UI设计😃😲 Beautiful UI 是 Shane Levine 做的一套专门给 AI 原生产品设计的 UI 组件库。以前 shadcn/ui 解决的是按钮、表格、弹窗这些传统网页组件，而 Beautiful UI 开始解决 AI 产品真正需要的东西。里面已经做了 19 类组件：AI Thinking、流式回答、Tool Call、任务执行状态、Agent 操作前审批、引用来源、上下文卡片、AI 修改 Diff、代码生成、Prompt 输入框等等。如果你做 Agent、AI SaaS、Claude/Cursor 类产品，很多交互几乎可以直接参考甚至复制过去。想要网站的同学，评论区吱声……

比特币橙子Trader

20,305 次观看 • 15 天前

今年最强的前端 UI 动效组件库，没有之一，强烈推荐 - 看中的组件直接复制 - 经济实用还特么漂亮这种组件库，任何人，随便玩玩就可出道，比坤快亮点 • AI UI Builder：通过 AI 生成 UI 界面（Magic MCP / Magic Chat 等） • 组件市场：提供丰富的 UI 元素（按钮、导航栏、卡片、动画等） • 模板与组合包：整页模板、界面合集、一键打包使用 • 创作者系统：支持用户上传作品、参与挑战、查看排行榜 • 互动功能：支持点赞、收藏、复制代码、嵌入至项目中同时，这个组件库也是评论区各位前端老湿极力推荐，必须分享一波。Anthony 热烤奶官网

今年最强的前端 UI 动效组件库，没有之一，强烈推荐 - 看中的组件直接复制 - 经济实用还特么漂亮这种组件库，任何人，随便玩玩就可出道，比坤快亮点 • AI UI Builder：通过 AI 生成 UI 界面（Magic MCP / Magic Chat 等） • 组件市场：提供丰富的 UI 元素（按钮、导航栏、卡片、动画等） • 模板与组合包：整页模板、界面合集、一键打包使用 • 创作者系统：支持用户上传作品、参与挑战、查看排行榜 • 互动功能：支持点赞、收藏、复制代码、嵌入至项目中同时，这个组件库也是评论区各位前端老湿极力推荐，必须分享一波。Anthony 热烤奶官网

艾略特

18,617 次观看 • 1 年前

分享一个前端和 UI 设计师绝对不能错过的宝藏库！🎨 Anime.js 一个轻量级但功能强大的 JavaScript 动画引擎。 📌 它是干嘛的？简单说，它能帮你轻松实现各种丝滑的 UI 动效。不管是 CSS 属性、SVG、DOM 还是 JS 对象，都能 animate 起来。 📌 为什么强推？ ✅功能全：时间线 (Timeline)、缓动、布局动画、错位动画 (Stagger) 等等，你想要的效果这里基本都有。 ✅文档太友好了：这是最赞的一点！每个动画示例旁边直接附带代码，一键复制就能用。 ✅支持二创：可以直接跳转到 CodePen 在线修改代码，调试非常方便。 ✅完全免费：GitHub 67.1k Star 的开源项目，闭眼冲。不管是做网页特效还是交互动画，这个库都能极大提升效率，每位 Web 开发者都值得收藏！🚀 项目地址放评论区了👇

分享一个前端和 UI 设计师绝对不能错过的宝藏库！🎨 Anime.js 一个轻量级但功能强大的 JavaScript 动画引擎。 📌 它是干嘛的？简单说，它能帮你轻松实现各种丝滑的 UI 动效。不管是 CSS 属性、SVG、DOM 还是 JS 对象，都能 animate 起来。 📌 为什么强推？ ✅功能全：时间线 (Timeline)、缓动、布局动画、错位动画 (Stagger) 等等，你想要的效果这里基本都有。 ✅文档太友好了：这是最赞的一点！每个动画示例旁边直接附带代码，一键复制就能用。 ✅支持二创：可以直接跳转到 CodePen 在线修改代码，调试非常方便。 ✅完全免费：GitHub 67.1k Star 的开源项目，闭眼冲。不管是做网页特效还是交互动画，这个库都能极大提升效率，每位 Web 开发者都值得收藏！🚀 项目地址放评论区了👇

Vincent

15,166 次观看 • 3 个月前

发现一个能赚钱的开源工具： pixel2motion — 上传静态Logo → AI自动生成矢量动画这意味着什么？在闲鱼/淘宝搜「Logo动画制作」，单价200-800元不等。以前接这种单需要：会AE + 会矢量设计 + 花2天做一个现在：上传图片 → AI生成 → 微调导出半小时搞定，收费不变。开源免费，成本为零。这就是2026年最典型的AI副业逻辑：用免费工具做别人不知道能自动化的事，赚的是信息差的钱。关键是：这个工具效果真不错。它不是普通描边，是AI做矢量路径建模 + 迪士尼动画法则优化。质量能打。

发现一个能赚钱的开源工具： pixel2motion — 上传静态Logo → AI自动生成矢量动画这意味着什么？在闲鱼/淘宝搜「Logo动画制作」，单价200-800元不等。以前接这种单需要：会AE + 会矢量设计 + 花2天做一个现在：上传图片 → AI生成 → 微调导出半小时搞定，收费不变。开源免费，成本为零。这就是2026年最典型的AI副业逻辑：用免费工具做别人不知道能自动化的事，赚的是信息差的钱。关键是：这个工具效果真不错。它不是普通描边，是AI做矢量路径建模 + 迪士尼动画法则优化。质量能打。

Vincent

37,447 次观看 • 1 个月前

兄弟们，分享 5 个宝藏网站，专治 AI 写的网站没设计感，也没质感👇 1、Motion Sites（ 100 多个动效网站的现成 AI 提示词，复制丢给 AI 编程工具就能一键复刻，国产大模型和 Codex 都能用 2、React Bits（ 3、Uiverse（多个免费开源的 UI 元素，随便挑一个源代码直接拿走 4、Anime.js（上 7 万多星的动画库，弹簧、拖拽、滚动联动都能做，复制代码就能 1:1 复刻 5、Aceternity UI（多个现成的高级组件，源代码一键复制 VibeCoding 的兄弟们可以先收藏，写页面的时候翻出来照着抄就行~

兄弟们，分享 5 个宝藏网站，专治 AI 写的网站没设计感，也没质感👇 1、Motion Sites（ 100 多个动效网站的现成 AI 提示词，复制丢给 AI 编程工具就能一键复刻，国产大模型和 Codex 都能用 2、React Bits（ 3、Uiverse（多个免费开源的 UI 元素，随便挑一个源代码直接拿走 4、Anime.js（上 7 万多星的动画库，弹簧、拖拽、滚动联动都能做，复制代码就能 1:1 复刻 5、Aceternity UI（多个现成的高级组件，源代码一键复制 VibeCoding 的兄弟们可以先收藏，写页面的时候翻出来照着抄就行~

鱼总聊AI

37,821 次观看 • 16 天前

视频制作的范式要被推翻了！😍 Remotion，一个能让你用 React 代码直接生成 MP4 视频的库。动效、数据可视化、甚至是个性化短视频，都可以用你最熟悉的组件化思维来开发和复用。在 AI 的加持下，Vibe Video Making 也可以出圈了！😜 源码见评论👇

视频制作的范式要被推翻了！😍 Remotion，一个能让你用 React 代码直接生成 MP4 视频的库。动效、数据可视化、甚至是个性化短视频，都可以用你最熟悉的组件化思维来开发和复用。在 AI 的加持下，Vibe Video Making 也可以出圈了！😜 源码见评论👇

MapleShaw

43,246 次观看 • 1 年前

前端和独立开发者终于有天花板级别的动效库了！告别千篇一律的组件库和生硬过场！分享一个超赞的 GitHub 开源项目 —— react-bits 专为追求极致视觉与交互细节的前端/独立开发者而生它把那些大厂/顶级创意网站上才能见到的高级感动效，全部封装成了开箱即用的 React 组件！像素动画、流体文字、超酷的背景粒子、3D卡片翻转、炫目悬停特效…… 全部基于 React + Tailwind CSS + Framer Motion 纯代码实现，零配置、轻量级、完全可定制。每个动效都附带精心设计的交互预览 + 实时参数调节面板而且直接一键复制代码，1秒直接搬进你的项目，让你的网页瞬间充满百万级的高级创意感！地址：

前端和独立开发者终于有天花板级别的动效库了！告别千篇一律的组件库和生硬过场！分享一个超赞的 GitHub 开源项目 —— react-bits 专为追求极致视觉与交互细节的前端/独立开发者而生它把那些大厂/顶级创意网站上才能见到的高级感动效，全部封装成了开箱即用的 React 组件！像素动画、流体文字、超酷的背景粒子、3D卡片翻转、炫目悬停特效…… 全部基于 React + Tailwind CSS + Framer Motion 纯代码实现，零配置、轻量级、完全可定制。每个动效都附带精心设计的交互预览 + 实时参数调节面板而且直接一键复制代码，1秒直接搬进你的项目，让你的网页瞬间充满百万级的高级创意感！地址：

爱丽丝呀！

59,078 次观看 • 1 个月前

前端开发从未变得如此简单 🤩 借助分钟开发完一个 React 组件。步骤： 1. 在上找到你要「学习」的 UI 2. 截图 -> 复制到 Devv 中实现 Prompt 需要指定输出到同一个 html file 中便于 preview（未来会优化）。预览没有问题就可以转化成 React 组件 copy 到自己的代码库中了。

前端开发从未变得如此简单 🤩 借助分钟开发完一个 React 组件。步骤： 1. 在上找到你要「学习」的 UI 2. 截图 -> 复制到 Devv 中实现 Prompt 需要指定输出到同一个 html file 中便于 preview（未来会优化）。预览没有问题就可以转化成 React 组件 copy 到自己的代码库中了。

Jiayuan (JY) Zhang

41,794 次观看 • 2 年前

如果你的网站或者APP接入的有AI功能，需要显示AI思考动画组件，给兄弟们推荐一个拿来即用的开源仓库一个基于 WebGPU 的实时液态玻璃球编辑器（Liquid Orb Editor），可自由定义在线直接调颜色、流动速度、折射率和外发光，内置 11 种预设，那个液态金属和色散玻璃质感拉满了，建议收藏以防用的时候找不到链接我放评论区了👇

如果你的网站或者APP接入的有AI功能，需要显示AI思考动画组件，给兄弟们推荐一个拿来即用的开源仓库一个基于 WebGPU 的实时液态玻璃球编辑器（Liquid Orb Editor），可自由定义在线直接调颜色、流动速度、折射率和外发光，内置 11 种预设，那个液态金属和色散玻璃质感拉满了，建议收藏以防用的时候找不到链接我放评论区了👇

码农暖爸

208,847 次观看 • 4 天前

有人用过这个 MagicUI 没有？是一个全新思路的组件库，主打一个 Landing page 上面的动画视觉效果，完美适配 shadcn/ui ，组件我全都感受了一遍，好喜欢的，如果大家想把页面的颜值上升一个等级，强烈建议试试看。Stars：9.3K 我很喜欢那个 Border Beam 的效果。一点小小的提升让我看了以后爽心悦目。

有人用过这个 MagicUI 没有？是一个全新思路的组件库，主打一个 Landing page 上面的动画视觉效果，完美适配 shadcn/ui ，组件我全都感受了一遍，好喜欢的，如果大家想把页面的颜值上升一个等级，强烈建议试试看。Stars：9.3K 我很喜欢那个 Border Beam 的效果。一点小小的提升让我看了以后爽心悦目。

Viking

131,478 次观看 • 1 年前

让 Mac 刘海变得更实用！ MewNotch 是一款免费开源的 macOS 应用，它能将屏幕刘海区域变成可定制的 HUD 显示界面，用于调节亮度、音量、电量等信息。设计简约美观，且尊重用户隐私。

让 Mac 刘海变得更实用！ MewNotch 是一款免费开源的 macOS 应用，它能将屏幕刘海区域变成可定制的 HUD 显示界面，用于调节亮度、音量、电量等信息。设计简约美观，且尊重用户隐私。

Geek

21,570 次观看 • 1 年前