Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

开源一个商业级，滚动交互网页Skill

lxfater's profile picture

铁锤人

105,403 subscribers

13,845 görüntüleme • 2 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

这个交互效果很好啊 可以直接在电商网站商用 🫡
0:33

这个交互效果很好啊 可以直接在电商网站商用 🫡

小互

29,825 görüntüleme • 10 ay önce

搓了一个超级酷的网页赛车游戏 拿去玩吧，把坦克开到右边竞速就行了： 大概花60%的 codex 20x 的周额度 给我点个赞互动一下不过分吧
1:09

搓了一个超级酷的网页赛车游戏 拿去玩吧，把坦克开到右边竞速就行了： 大概花60%的 codex 20x 的周额度 给我点个赞互动一下不过分吧

奶牛叔

12,719 görüntüleme • 17 gün önce

惊喜分享，居然有人把小米SU7的官网给开源了 ！免费试用 它用 Three.js + WebGL + GLSL Shader，复刻了类似小米 SU7 官网的沉浸式滚动动画。 滚动页面时，画面、光影、镜头会同步变化，像一支可以控制进度的产品宣传片。 这个项目主要适合学习 3D 网页、Shader 和滚动动效 也可以交给 Codex 分析，改造成汽车、数码产品或品牌展示页。变成自己的 3D 展示网站 项目源码可以免费查看和本地运行
0:39

惊喜分享，居然有人把小米SU7的官网给开源了 ！免费试用 它用 Three.js + WebGL + GLSL Shader，复刻了类似小米 SU7 官网的沉浸式滚动动画。 滚动页面时，画面、光影、镜头会同步变化，像一支可以控制进度的产品宣传片。 这个项目主要适合学习 3D 网页、Shader 和滚动动效 也可以交给 Codex 分析，改造成汽车、数码产品或品牌展示页。变成自己的 3D 展示网站 项目源码可以免费查看和本地运行

Mi1997_ 🧡 ｜买美股上币安

10,265 görüntüleme • 2 ay önce

设计师必备 Design Skill 推荐，整理了我日常高频在用的 5 款实用 Skill，亲测实用性拉满 1、Text to Lottie Skill 上传 SVG + 填写动画描述，快速生成可编辑 Lottie 动画文件。 2、GSAP Skill 一键生成专业网页交互动效，自动输出高性能代码，支持 SVG 动画、鼠标跟随、滚动视差文字等效果。 3、three-scope-map-skill 输入地区即可生成数据大屏 3D 交互地图，多款配色主题，支持缩放、平移、点位、飞线等大屏常用特效，开箱即用。 4、Web to Design md 输入网址一键扒取网页配色、字体、CSS、动效等全套设计规范，输出可被 AI 使用的 design.md 文档。 5、Shadcn/ui Skill 适配前端项目，自动对齐项目配置、统一组件规范、支持多主题，一键生成规整后台页面，省去大量调试工作。
1:06

设计师必备 Design Skill 推荐，整理了我日常高频在用的 5 款实用 Skill，亲测实用性拉满 1、Text to Lottie Skill 上传 SVG + 填写动画描述，快速生成可编辑 Lottie 动画文件。 2、GSAP Skill 一键生成专业网页交互动效，自动输出高性能代码，支持 SVG 动画、鼠标跟随、滚动视差文字等效果。 3、three-scope-map-skill 输入地区即可生成数据大屏 3D 交互地图，多款配色主题，支持缩放、平移、点位、飞线等大屏常用特效，开箱即用。 4、Web to Design md 输入网址一键扒取网页配色、字体、CSS、动效等全套设计规范，输出可被 AI 使用的 design.md 文档。 5、Shadcn/ui Skill 适配前端项目，自动对齐项目配置、统一组件规范、支持多主题，一键生成规整后台页面，省去大量调试工作。

Paidax

83,968 görüntüleme • 3 ay önce

开源 Skills 的商业模式｜第 2 集
3:36

开源 Skills 的商业模式｜第 2 集

dontbesilent

24,248 görüntüleme • 2 ay önce

哈，发现了一个牛逼的 AI 视频生成动画的开源 skill 经常看到网站首页上有宠物盯着鼠标转头的动画，现在 oil 作者把它做成了 skill, 利用 AI首尾帧完成基础建模，太聪明了
0:35

哈，发现了一个牛逼的 AI 视频生成动画的开源 skill 经常看到网站首页上有宠物盯着鼠标转头的动画，现在 oil 作者把它做成了 skill, 利用 AI首尾帧完成基础建模，太聪明了

黄赟

22,796 görüntüleme • 1 ay önce

开源一个我的数据可视化动画库， 让工作展示+内容制作高级10倍！ 包含11个高级数据可视化效果， 项目的代码+自己的数据丢给AI， 直接做出属于你的专业数据可视化动画！ 项目开源地址：
8:28

开源一个我的数据可视化动画库， 让工作展示+内容制作高级10倍！ 包含11个高级数据可视化效果， 项目的代码+自己的数据丢给AI， 直接做出属于你的专业数据可视化动画！ 项目开源地址：

木子不写代码

29,938 görüntüleme • 6 ay önce

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

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

领哥LingGe🙏

20,030 görüntüleme • 2 ay önce

想让 AI 做出专业级动画，你得先学会怎么跟它描述 Linear 设计工程师 Emil Kowalski 整理了 90+ 个动画术语，涵盖弹性动画、交互反馈等 12 个分类。做网站、做视频动画都能用 为了方便理解每个术语的实际效果，我用 Claude 做了一个双语预览站 👇
0:45

想让 AI 做出专业级动画，你得先学会怎么跟它描述 Linear 设计工程师 Emil Kowalski 整理了 90+ 个动画术语，涵盖弹性动画、交互反馈等 12 个分类。做网站、做视频动画都能用 为了方便理解每个术语的实际效果，我用 Claude 做了一个双语预览站 👇

Sac

23,263 görüntüleme • 3 ay önce

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

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

爱丽丝呀！

59,078 görüntüleme • 3 ay önce

乱套了比想象中严重❗️这不是单纯倒查补税，而是不按实际营业额拿虚高价格收税。记住2025年10月，中共对 #电商 #外卖 发动互联网版六四大屠杀，瞪眼被杀无处可逃。本来就没利润，还要亏着交税，不开玩笑说所有电商外卖一个都活不了，商户都哭了。外卖员、快递员、厂家一串企业全会绝迹，动摇政权一仗！
0:44

乱套了比想象中严重❗️这不是单纯倒查补税，而是不按实际营业额拿虚高价格收税。记住2025年10月，中共对 #电商 #外卖 发动互联网版六四大屠杀，瞪眼被杀无处可逃。本来就没利润，还要亏着交税，不开玩笑说所有电商外卖一个都活不了，商户都哭了。外卖员、快递员、厂家一串企业全会绝迹，动摇政权一仗！

无王无帝（澳喜特战旅）🔥

272,342 görüntüleme • 11 ay önce

刚写了一个Skill，自动剪辑影视片段学常用英语表达。 还需迭代，后续看搞定后开源。
0:57

刚写了一个Skill，自动剪辑影视片段学常用英语表达。 还需迭代，后续看搞定后开源。

向阳乔木

38,600 görüntüleme • 2 ay önce

兄弟们 这个创意牛P啊 Google推出一个实验性应用：Disco 它可以把你打开的网页 + 你的意图 → 转化成一个专属AI工具 比如 在Chrome里同时打开了： 一篇旅游攻略 Google Map 酒店预订网站 天气查询页 Disco自动识别到你可能正在做旅游攻略，它会根据你打开的网页帮你自动生成一个旅游规划应用。 你告诉 Disco：“我想规划一次去京都的旅行。” 这时，它就会用 AI 自动帮你生成一个： ✨“京都旅行规划应用”✨ 这个应用会把你打开的网页信息整合在一起 例如行程路线、酒店比较、天气信息、预算表，全都放在一个交互界面里。 你不用自己来回切页面，AI 帮你组合好了。 Disco 的目标就是： 让 AI 自动理解你开着的这些网页，知道你在干什么、想做什么 然后帮你把这些网页整合成一个专属工具或应用。
1:42

兄弟们 这个创意牛P啊 Google推出一个实验性应用：Disco 它可以把你打开的网页 + 你的意图 → 转化成一个专属AI工具 比如 在Chrome里同时打开了： 一篇旅游攻略 Google Map 酒店预订网站 天气查询页 Disco自动识别到你可能正在做旅游攻略，它会根据你打开的网页帮你自动生成一个旅游规划应用。 你告诉 Disco：“我想规划一次去京都的旅行。” 这时，它就会用 AI 自动帮你生成一个： ✨“京都旅行规划应用”✨ 这个应用会把你打开的网页信息整合在一起 例如行程路线、酒店比较、天气信息、预算表，全都放在一个交互界面里。 你不用自己来回切页面，AI 帮你组合好了。 Disco 的目标就是： 让 AI 自动理解你开着的这些网页，知道你在干什么、想做什么 然后帮你把这些网页整合成一个专属工具或应用。

小互

41,924 görüntüleme • 9 ay önce

🔥 前端动画界的老大 GSAP，又扔出了一颗炸弹：gsap-skills！ 90% 的网页动效只是乏味的淡入淡出，但 Apple 风滚动、数据可视化动画、沉浸式产品页背后的秘密，全在 GSAP。 GSAP 官方直接放出 gsap-skills： 支持 Cursor、Claude Code、Copilot、Google Antigravity、Windsurf 等几乎所有主流 Agent，自动识别。 神亮点： - 25+ 高级动画实战案例，一键学会 Timeline、ScrollTrigger、Ease 等核心技能 - 让 AI 或开发者都能瞬间生成丝滑、专业、高级感爆棚的动效 - 免费开源，商业项目直接用 - 性能极致流畅，复杂动画也不卡顿 - 跨框架支持：React、Vue、Svelte、原生 JS 全覆盖 - 官方教程 + 实战案例 = 动效学习最快捷径 GSAP 本身已全部免费（原 Club 高级插件全部白送），现在再加上这套官方 skill，装完直接甩需求给 AI，感受 Apple 级动效秒出的爽感！
0:52

🔥 前端动画界的老大 GSAP，又扔出了一颗炸弹：gsap-skills！ 90% 的网页动效只是乏味的淡入淡出，但 Apple 风滚动、数据可视化动画、沉浸式产品页背后的秘密，全在 GSAP。 GSAP 官方直接放出 gsap-skills： 支持 Cursor、Claude Code、Copilot、Google Antigravity、Windsurf 等几乎所有主流 Agent，自动识别。 神亮点： - 25+ 高级动画实战案例，一键学会 Timeline、ScrollTrigger、Ease 等核心技能 - 让 AI 或开发者都能瞬间生成丝滑、专业、高级感爆棚的动效 - 免费开源，商业项目直接用 - 性能极致流畅，复杂动画也不卡顿 - 跨框架支持：React、Vue、Svelte、原生 JS 全覆盖 - 官方教程 + 实战案例 = 动效学习最快捷径 GSAP 本身已全部免费（原 Club 高级插件全部白送），现在再加上这套官方 skill，装完直接甩需求给 AI，感受 Apple 级动效秒出的爽感！

开发者Hailey

133,156 görüntüleme • 4 ay önce

兄弟们，分享 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 的兄弟们可以先收藏，写页面的时候翻出来照着抄就行~
2:07

兄弟们，分享 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

40,782 görüntüleme • 1 ay önce

很多品牌都想做苹果官网那种滚动网页： 鼠标滚轮一动，镜头就开始向前飞行，穿过一个又一个 3D 场景，产品、空间和故事在同一条镜头里连续展开。 问题是，这种效果通常需要 3D 设计师、动效师和 WebGL 开发者一起制作。 scroll-world 把整套流程做成了一个开源 Agent Skill。 你只需要告诉 Claude Code 或 Codex： “这是一个咖啡品牌。镜头从庄园出发，飞进烘焙工厂，穿过包装生产线，最后落在咖啡馆里。” 它就会自动生成统一风格的 3D 场景、场景之间的飞行镜头，以及由滚轮控制的完整网页。 更厉害的是，每段连接镜头都会读取前后两个场景的真实边界帧，确保镜头穿越时没有闪烁、跳帧和硬切，最终看起来就像一次没有中断的飞行。 生成结果可以直接放进 HTML、Next.js 或 Vue，手机端还能单独制作原生 9:16 版本。 安装只需一行： `npx skills add oso95/scroll-world` 以前你需要设计一张网页，现在你可以直接描述一个世界。
1:01

很多品牌都想做苹果官网那种滚动网页： 鼠标滚轮一动，镜头就开始向前飞行，穿过一个又一个 3D 场景，产品、空间和故事在同一条镜头里连续展开。 问题是，这种效果通常需要 3D 设计师、动效师和 WebGL 开发者一起制作。 scroll-world 把整套流程做成了一个开源 Agent Skill。 你只需要告诉 Claude Code 或 Codex： “这是一个咖啡品牌。镜头从庄园出发，飞进烘焙工厂，穿过包装生产线，最后落在咖啡馆里。” 它就会自动生成统一风格的 3D 场景、场景之间的飞行镜头，以及由滚轮控制的完整网页。 更厉害的是，每段连接镜头都会读取前后两个场景的真实边界帧，确保镜头穿越时没有闪烁、跳帧和硬切，最终看起来就像一次没有中断的飞行。 生成结果可以直接放进 HTML、Next.js 或 Vue，手机端还能单独制作原生 9:16 版本。 安装只需一行： `npx skills add oso95/scroll-world` 以前你需要设计一张网页，现在你可以直接描述一个世界。

柴郡🔔｜Crypto+AI Plus

15,377 görüntüleme • 2 ay önce

想做网站不是一天两天了， 最近看了不少网页案例，很喜欢那些丝滑炫酷的动画， 一个大神告诉我，新手做网页， 做动画最省事的方式，就是找个开源库， 选择喜欢的效果，然后自定义修改一下就行。 又发现一个，Reactbits，各种动画都分好类的， 几行代码就能用上，也太方便了！！
0:31

想做网站不是一天两天了， 最近看了不少网页案例，很喜欢那些丝滑炫酷的动画， 一个大神告诉我，新手做网页， 做动画最省事的方式，就是找个开源库， 选择喜欢的效果，然后自定义修改一下就行。 又发现一个，Reactbits，各种动画都分好类的， 几行代码就能用上，也太方便了！！

沐阳

72,652 görüntüleme • 3 ay önce

大千世界36：一年不开张，开张吃一年！#巨物 #野生鱼鹰 #鸟类 #飞翔 #周末快乐 视频来源于网络 #互关 #互fo
0:41

大千世界36：一年不开张，开张吃一年！#巨物 #野生鱼鹰 #鸟类 #飞翔 #周末快乐 视频来源于网络 #互关 #互fo

dian_gan_大痴(man)

47,514 görüntüleme • 2 yıl önce