Loading video...

Video Failed to Load

Go Home

🤯 纯 CSS 实现 3D 叶片翻转效果 不用浪费 Token 逐帧复刻，接下来会开源

thecuvii's profile picture

Cuvii

1,265 subscribers

17,303 views • 2 months ago •via X (Twitter)

Science & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

4 Comments

J Y's profile picture
J Y1 month ago

Very cool

Cuvii's profile picture
Cuvii1 month ago

ty!

张与有's profile picture
张与有2 months ago

这下不得不关注了😺

ShellYeahhhhhh's profile picture
ShellYeahhhhhh1 month ago

似乎有点卡？

Related Videos

WorkBuddy+Renoise MCP , 生成具有Opus 5.5效果的动效视频 1/4 下面这条炫酷的动效视频，我是用AI工具一句话生成的，一帧都没有手动剪辑！ 这是 Opus 5.5 做的吗？不是，其实我是用workbuddy加Renoise MCP实现的。 Codex、豆包工作、WorkBuddy 等任意 AI Agent 接上 Renoise MCP，就能实现同款成片效果！ 不必再去费力折腾Claude账号了。
0:47

WorkBuddy+Renoise MCP , 生成具有Opus 5.5效果的动效视频 1/4 下面这条炫酷的动效视频，我是用AI工具一句话生成的，一帧都没有手动剪辑！ 这是 Opus 5.5 做的吗？不是，其实我是用workbuddy加Renoise MCP实现的。 Codex、豆包工作、WorkBuddy 等任意 AI Agent 接上 Renoise MCP，就能实现同款成片效果！ 不必再去费力折腾Claude账号了。

马识途

17,417 views • 5 days ago

一篇老文了，今天想做一个 Liquid Glass 效果的组件的时候又翻到了，如果你想用 CSS + SVG 实现 Liquid Glass 的效果，那么就收藏这篇文章： 这是原理/实现/最终效果都实现的最好的，如果自己懒得看，直接喂给 AI，让它帮你实现就好。效果可以看 Demo，已经可以和原生的媲美
0:28

一篇老文了，今天想做一个 Liquid Glass 效果的组件的时候又翻到了，如果你想用 CSS + SVG 实现 Liquid Glass 的效果，那么就收藏这篇文章： 这是原理/实现/最终效果都实现的最好的，如果自己懒得看，直接喂给 AI，让它帮你实现就好。效果可以看 Demo，已经可以和原生的媲美

Viking

27,247 views • 6 months ago

复刻差不多了，给大家分享教程并开源代码，先看看我的录屏效果如何，主要看前两个，后面还没做😂 首先特别感谢下原作者Dilum Sanjaya，创造出如此美妙的项目，让我大受震撼👍 【手把手教程】 1️⃣ 直接将原作者视频发给coex，让其复刻视频的网站。codex 会截图、抽帧、生图然后进行默默复刻 2️⃣ 网站复刻很简单，一般十几分钟就OK了，然后我们有了初级形态，细胞效果这时候会用Three.js 程序化 3D展示，但是要达到作者的效果Three.js 肯定是不够的。我尝试用GPT image 2 堆不同角度去实现，但是效果不佳，于是进行第三步 3️⃣图生3D，让GPT image 2 生成细胞精美的主视图、左/右视图、背面。然后找个可生成3D模型，这里我们用的是tripo。生成好后就可以下载下来给codex，让其换成真3D文件 项目开源见评论👇 ps：时间有限我们只做了前两个3D效果，后面好实用的three.js堆的，还没改，我们后续再去维护，我已经想到一些更好玩的，想要去尝试🐶 晚点我再补一个在线体验地址给大家～
0:29

复刻差不多了，给大家分享教程并开源代码，先看看我的录屏效果如何，主要看前两个，后面还没做😂 首先特别感谢下原作者Dilum Sanjaya，创造出如此美妙的项目，让我大受震撼👍 【手把手教程】 1️⃣ 直接将原作者视频发给coex，让其复刻视频的网站。codex 会截图、抽帧、生图然后进行默默复刻 2️⃣ 网站复刻很简单，一般十几分钟就OK了，然后我们有了初级形态，细胞效果这时候会用Three.js 程序化 3D展示，但是要达到作者的效果Three.js 肯定是不够的。我尝试用GPT image 2 堆不同角度去实现，但是效果不佳，于是进行第三步 3️⃣图生3D，让GPT image 2 生成细胞精美的主视图、左/右视图、背面。然后找个可生成3D模型，这里我们用的是tripo。生成好后就可以下载下来给codex，让其换成真3D文件 项目开源见评论👇 ps：时间有限我们只做了前两个3D效果，后面好实用的three.js堆的，还没改，我们后续再去维护，我已经想到一些更好玩的，想要去尝试🐶 晚点我再补一个在线体验地址给大家～

岚叔

274,775 views • 5 months ago

这些组件的效果让opus/fable/gpt 从零实现是很难的，但是如果给 AI 源码，他们可以很好的复刻出来，应用到你自己的项目上。 所以我们这些组件都开源了，还做了 mcp。 另外，你也可以去 appstore 下载 demo app，这样方便挑组件效果。
0:29

这些组件的效果让opus/fable/gpt 从零实现是很难的，但是如果给 AI 源码，他们可以很好的复刻出来，应用到你自己的项目上。 所以我们这些组件都开源了，还做了 mcp。 另外，你也可以去 appstore 下载 demo app，这样方便挑组件效果。

John Wayne

86,394 views • 3 months ago

必须逐帧学习！这个动效太牛了！！ 内容也很牛！ 数学是最有魅力的学科之一！ 尝试用Opus 5.5复刻一下动画…
3:45

必须逐帧学习！这个动效太牛了！！ 内容也很牛！ 数学是最有魅力的学科之一！ 尝试用Opus 5.5复刻一下动画…

沐阳

39,961 views • 21 days ago

使用 Claude fable 5 开发截图工具有点儿酷。 一下就实现旋转、倾斜等景深效果，还有边缘模糊、背景噪点等。 这在以前简直难以想象。 看看接下来它会进化成什么样子。
0:39

使用 Claude fable 5 开发截图工具有点儿酷。 一下就实现旋转、倾斜等景深效果，还有边缘模糊、背景噪点等。 这在以前简直难以想象。 看看接下来它会进化成什么样子。

Zayn Hao

11,707 views • 4 months ago

不知道用 Fable 5干什么的，直接让其复刻网站就行，最好是你会开会员的网站 下面是我用 Fable 5复刻的 Notion，这么大的工程已经复刻了几乎70%了，太牛逼了
0:38

不知道用 Fable 5干什么的，直接让其复刻网站就行，最好是你会开会员的网站 下面是我用 Fable 5复刻的 Notion，这么大的工程已经复刻了几乎70%了，太牛逼了

Sac

221,448 views • 4 months ago

分享一个很多做视频博主用AI做视频的开源项目，效果非常好：auto-motion 这个开源项目做出来的效果，比 Opus5.5 本身特调几遍提示词的效果都好很多 🔗 效果如下，基本一句提示词直接出来的
4:32

分享一个很多做视频博主用AI做视频的开源项目，效果非常好：auto-motion 这个开源项目做出来的效果，比 Opus5.5 本身特调几遍提示词的效果都好很多 🔗 效果如下，基本一句提示词直接出来的

雪踏乌云

20,612 views • 1 day ago

让 K3 用 three js 实现了 Nuphy Node 键盘的 3D 模型与打字效果～
0:33

让 K3 用 three js 实现了 Nuphy Node 键盘的 3D 模型与打字效果～

耳朵

18,775 views • 3 months ago

今天又学了一个新的 css 属性：field-sizing 是我最近学到的最有用的属性了，可以实现根据输入的 content 实现可变宽高的 textarea，当我写了半天 js 实现对应的效果，发现 CSS 可以很轻松的实现对应的效果了。 而且针对响应性设计使用这个属性会非常的方便。
0:35

今天又学了一个新的 css 属性：field-sizing 是我最近学到的最有用的属性了，可以实现根据输入的 content 实现可变宽高的 textarea，当我写了半天 js 实现对应的效果，发现 CSS 可以很轻松的实现对应的效果了。 而且针对响应性设计使用这个属性会非常的方便。

Viking

52,715 views • 2 years ago

Aiuni：最佳图生3D来了？！ 清北00后团队开发，产品效果非常好，细节比较到位，也能脑补出图片中没有展示出的内容。支持图片生成3D模型和图片生成3D场景（天空盒），适用于游戏和影视场景。下方视频是我用DALL·E生成图片，然后转成3D的效果。 官网：
0:58

Aiuni：最佳图生3D来了？！ 清北00后团队开发，产品效果非常好，细节比较到位，也能脑补出图片中没有展示出的内容。支持图片生成3D模型和图片生成3D场景（天空盒），适用于游戏和影视场景。下方视频是我用DALL·E生成图片，然后转成3D的效果。 官网：

Gorden Sun

32,879 views • 2 years ago

想复刻下 MacBook Pro 的 PROLED XDR 的壁纸，于是用 WebGL 出了一个 Playground，让它动了起来。 做着做着，想着要不吧 26 个字母都做了吧，再来点预设、渐变...... 又觉得这种效果很适合放在网站首屏 Hero Section，于是又预置了几个效果：光环、黑洞、莫比乌斯环、隧道。 干脆开源、建仓库，感兴趣的朋友可以直接交给 AI 学习。 我只能说，作为设计师，AI 实在帮我实现了太多小小的梦想，尤其是 Opus 5.5，不吝赞美。 开源免费，链接在评论区 👇
0:52

想复刻下 MacBook Pro 的 PROLED XDR 的壁纸，于是用 WebGL 出了一个 Playground，让它动了起来。 做着做着，想着要不吧 26 个字母都做了吧，再来点预设、渐变...... 又觉得这种效果很适合放在网站首屏 Hero Section，于是又预置了几个效果：光环、黑洞、莫比乌斯环、隧道。 干脆开源、建仓库，感兴趣的朋友可以直接交给 AI 学习。 我只能说，作为设计师，AI 实在帮我实现了太多小小的梦想，尤其是 Opus 5.5，不吝赞美。 开源免费，链接在评论区 👇

枯白啃设计

12,188 views • 3 days ago

继续开源起来吧！！ 更新了评论区呼声最高的「史前洞穴风」，预览效果如下。 同时优化了 Skill 的细节，用 Codex 生成的效果会越来越好～ 至于其它风格，接下来几天也会陆续更新 🫡 记得点 STAR 🌟：
0:30

继续开源起来吧！！ 更新了评论区呼声最高的「史前洞穴风」，预览效果如下。 同时优化了 Skill 的细节，用 Codex 生成的效果会越来越好～ 至于其它风格，接下来几天也会陆续更新 🫡 记得点 STAR 🌟：

疯狂的烤妹儿 🩵

70,561 views • 22 days ago

说真的最近 token真的不够用，GPT-5.6 Sol 和 Claude Fable5 用来搞项目真的消耗的非常快，动不动很快就用光了。于是我在想该怎么样来省省token呢？ 刚好看到了蚂蚁百灵Ant Ling 最近刚发布的 Ling-3.0-flash 这个高效 Flash 模型，以快速响应和稳定工具调用为核心优势，定位为「高速执行模型」。成本也较低，而且现阶段在OpenRouter上免费体验，免费时间截止到8月3日。 于是我叫 Claude Code 来封装了一个skill，这个skill就是使用 Ling-3.0-flash 来去执行任务，主Agent只用来规划，这样就能节省很大一部分的token用量。 本次测试的demo就是上传一张图片（一把手枪），然后使用开源的img2threejs skill 将图片转换为动态的3D效果。主agent只用来规划，而skill中调用另一个AI终端cc-ling 去执行，也就是使用Ling-3.0-flash。 时间很多，整个执行就结束了，看视频效果，我是完全没想到，这效果真的太赞了，那也就说明了，使用 ling-3.0-flash 模型来执行某些任务是毫无压力，而且效果还这么赞，速度快还省token，简直不要太爽了，接下来就打开了思路了，省token的道路上有了经验，继续优化。 来看看视频效果，并接着看看我的实现过程如下
0:39

说真的最近 token真的不够用，GPT-5.6 Sol 和 Claude Fable5 用来搞项目真的消耗的非常快，动不动很快就用光了。于是我在想该怎么样来省省token呢？ 刚好看到了蚂蚁百灵Ant Ling 最近刚发布的 Ling-3.0-flash 这个高效 Flash 模型，以快速响应和稳定工具调用为核心优势，定位为「高速执行模型」。成本也较低，而且现阶段在OpenRouter上免费体验，免费时间截止到8月3日。 于是我叫 Claude Code 来封装了一个skill，这个skill就是使用 Ling-3.0-flash 来去执行任务，主Agent只用来规划，这样就能节省很大一部分的token用量。 本次测试的demo就是上传一张图片（一把手枪），然后使用开源的img2threejs skill 将图片转换为动态的3D效果。主agent只用来规划，而skill中调用另一个AI终端cc-ling 去执行，也就是使用Ling-3.0-flash。 时间很多，整个执行就结束了，看视频效果，我是完全没想到，这效果真的太赞了，那也就说明了，使用 ling-3.0-flash 模型来执行某些任务是毫无压力，而且效果还这么赞，速度快还省token，简直不要太爽了，接下来就打开了思路了，省token的道路上有了经验，继续优化。 来看看视频效果，并接着看看我的实现过程如下

AI少年

16,195 views • 3 months ago

无需blender等专业工具，现在你完全可以借助threejs纯代码手搓出视频同款的惊艳3D效果 这才是普通3D建模的合理打开方式，效果好、token消耗少，什么场景都硬上blender也算是杀鸡用牛刀了 下面是我花一天时间用threejs搓出来的秦淮河夜游场景，大家来品品😎
1:31

无需blender等专业工具，现在你完全可以借助threejs纯代码手搓出视频同款的惊艳3D效果 这才是普通3D建模的合理打开方式，效果好、token消耗少，什么场景都硬上blender也算是杀鸡用牛刀了 下面是我花一天时间用threejs搓出来的秦淮河夜游场景，大家来品品😎

Sac

20,566 views • 1 month ago

完全免费的 TTS 文字转语音来了！ 再也不用被国内外各种语音合成割韭菜了。 试了下，确实是不限次数，不限语种，完全免费， 效果就是微软 TTS 的效果，重要的是免费啊。 做个抖音、视频号之类的是完全够用了。 地址在下面 👇
0:30

完全免费的 TTS 文字转语音来了！ 再也不用被国内外各种语音合成割韭菜了。 试了下，确实是不限次数，不限语种，完全免费， 效果就是微软 TTS 的效果，重要的是免费啊。 做个抖音、视频号之类的是完全够用了。 地址在下面 👇

奥丁

95,196 views • 2 years ago