Xian | 弦

10 Years UX Designer
Building products with AI
Sharing real AI experiments

[Xian | 弦 @Xian0063]

好喜欢，我去

[Marcio Lima 利真 マルシオ 💎 @Preda2005]

想像力を解き放って、思いっきり楽しもう。

[Xian | 弦 @Xian0063]

@yihui_indie 不算个东西

[Xian | 弦 @Xian0063]

我一开始订阅49的不能用k3，我升级99后才可以用k3.但是我开票为啥不给开99的票呢～去哪找客户啊 @Kimi_Moonshot

[Xian | 弦 @Xian0063]

@yanliudreamer 这几个图好有质感啊，就让我想到了学画画的时候

[Xian | 弦 @Xian0063]

@cnyzgkc 好牛啊

[Xian | 弦 @Xian0063]

@bbkirstry 简短，但是悟出了哲理

[Xian | 弦 @Xian0063]

西门太棒了👏真实，接地气

[西门聪明蛋XD @xmmxovo]

故事还远远没有结束，继续加油。

感谢 @gkxspace 头号大弟子的push
感谢 @Astronaut_1216 阿杭前几天写的复盘帖给我带来的启发让我顿悟
感谢 @dontbesilent 的毒奶，啊哈哈哈哈哈哈

[Xian | 弦 @Xian0063]

@Jackywine 好搞笑啊

[Xian | 弦 @Xian0063]

今天继续改我的在线画廊～
现在走近梵高、毕加索、莫奈等 10 位艺术家的作品，可以切换「笔触深度扫描」和「持续转场＋厚涂光」。

[Xian | 弦 @Xian0063]

今日idear~【此刻在馆】：如果线上看展，不是滑图片，而是真的能在展厅里“偶遇”一个人呢？

[Xian | 弦 @Xian0063]

@marina_uiux 好漂亮

[Xian | 弦 @Xian0063]

@shuthefuckup300 很酷，我也喜欢，看看能不能用到我们新的产品思路上～

[Xian | 弦 @Xian0063]

❤️ 现在的网页，越来越像游戏引擎了。
整理了 5 个非常有设计感的浏览器视觉案例：
1、Three.js + GPGPU + GLSL
模型由大量粒子组成，鼠标经过时会被打散，再缓慢聚合回原来的形状。
2、WebGPU + WGSL
直接在浏览器中实时模拟水体碰撞、飞溅、变形与重新聚集。
3、Three.js + WebGPU + TSL
文字沿着噪声边缘逐渐消失，同时化成灰尘和旋转的花瓣。
4、Three.js + WebGPU + TSL
鼠标可以拉扯、破坏文字网格，并产生带有弹性的回弹效果。
5、Three.js + Rapier + GSAP
视频从平面像素变成 3D 体素，再受重力影响坠落、碰撞和散开。
真正高级的网页特效，不是元素越多，而是每个效果都有明确用途。
你最喜欢哪一个？
案例地址放在回复区👇

[Xian | 弦 @Xian0063]

❤总结了常用的技术手法，非常有设计感的案例：

1、Next.js + React Three Fiber + GSAP
React Three Fiber 官方案例
包含3D商品、卡片、粒子、模型交互等，而且更方便研究实现方式。
https://t.co/rNhkXBHihl
2、Vite + Three.js + GLSL Shader
Shader 溶解与粒子效果
模型逐渐碎裂、溶解成粒子，特别适合做页面转场和IP角色消散。
https://t.co/ehk82ZqzkM
React Three Fiber 创意案例合集
虽然部分使用R3F，但核心视觉仍然是Three.js和Shader，质量普遍很高。
https://t.co/PxEgCKQdN1
3、PixiJS + GSAP + Matter.js
适合看：2D网页小游戏、可爱角色、拖拽和物理碰撞。
PixiJS 官方作品展
里面有《Subway Surfers》、Cartoon Network游戏、互动作品等完整案例。
4、 WebGPU + Three.js TSL / WGSL
适合看：几十万粒子、流体模拟、大型生成式视觉。
50万粒子实时模拟
直观看WebGPU处理大量粒子的能力。
https://t.co/wxNG3PwyOg

[Xian | 弦 @Xian0063]

@heyfuxixi 谢谢弗西西丁老师，哈哈哈哈

[Xian | 弦 @Xian0063]

今日idear~【此刻在馆】：如果线上看展，不是滑图片，而是真的能在展厅里“偶遇”一个人呢？

[Xian | 弦 @Xian0063]

💗💗把 GitHub 项目交给 Codex、Claude Code 等工具：
先运行原效果，再替换文字、模型、视频和颜色，成功率会高很多。
1、模型粒子
https://t.co/4OMZ6TyXe7
2、实时水球
https://t.co/oja4cIVVw3
3、文字花瓣消散
https://t.co/sUNu3mmuDU
4、文字破坏
https://t.co/LXSMcATYb0
5、视频体素坠落
https://t.co/EH15oOAkRq
建议让 AI 先跑通原项目，再逐项修改；商用前记得检查源码与素材授权。

[Xian | 弦 @Xian0063]

视频的源码也整理出来了，顺序与视频一致👇
1、Skeleton Fluid Reveal
Three.js WebGPU + TSL 流体骨骼揭示
https://t.co/Qhr1DhTg9A
2、Benoît Wimart「Flux」作品集
https://t.co/voWXUjPZwI
暂未找到公开源码
3、Three.js 50 万粒子模拟
https://t.co/UaPUtFL6Nw
4、Emissive Dissolve Effect
Three.js + GLSL 模型溶解与粒子效果
https://t.co/1Kpuqu1ja7
5、Shopify Editions Spring ’26
https://t.co/YQXq7HnGNE
官方商业项目，暂未找到公开源码
❤️❤️：完整仓库交给 Codex 或 Claude Code，先让它运行并解释项目，再替换模型、文字、颜色和交互逻辑，比只看录屏从零复刻容易很多。使用前记得检查 LICENSE 和素材授权。

[Xian | 弦 @Xian0063]

❤总结了常用的技术手法，非常有设计感的案例：

1、Next.js + React Three Fiber + GSAP
React Three Fiber 官方案例
包含3D商品、卡片、粒子、模型交互等，而且更方便研究实现方式。
https://t.co/rNhkXBHihl
2、Vite + Three.js + GLSL Shader
Shader 溶解与粒子效果
模型逐渐碎裂、溶解成粒子，特别适合做页面转场和IP角色消散。
https://t.co/ehk82ZqzkM
React Three Fiber 创意案例合集
虽然部分使用R3F，但核心视觉仍然是Three.js和Shader，质量普遍很高。
https://t.co/PxEgCKQdN1
3、PixiJS + GSAP + Matter.js
适合看：2D网页小游戏、可爱角色、拖拽和物理碰撞。
PixiJS 官方作品展
里面有《Subway Surfers》、Cartoon Network游戏、互动作品等完整案例。
4、 WebGPU + Three.js TSL / WGSL
适合看：几十万粒子、流体模拟、大型生成式视觉。
50万粒子实时模拟
直观看WebGPU处理大量粒子的能力。
https://t.co/wxNG3PwyOg

[Xian | 弦 @Xian0063]

案例地址整理：
1、模型粒子打散与重组
https://t.co/TFBc9Ku4cQ
2、浏览器实时水体模拟
https://t.co/7ANJ0flHRI
3、文字消散成灰尘和花瓣
https://t.co/zYH6JZTDEo
4、交互式文字破坏效果
https://t.co/8s86tg7w5i
5、视频像素变成 3D 体素并坠落
https://t.co/L7bXKJ0XLU

[Xian | 弦 @Xian0063]

❤️ 现在的网页，越来越像游戏引擎了。
整理了 5 个非常有设计感的浏览器视觉案例：
1、Three.js + GPGPU + GLSL
模型由大量粒子组成，鼠标经过时会被打散，再缓慢聚合回原来的形状。
2、WebGPU + WGSL
直接在浏览器中实时模拟水体碰撞、飞溅、变形与重新聚集。
3、Three.js + WebGPU + TSL
文字沿着噪声边缘逐渐消失，同时化成灰尘和旋转的花瓣。
4、Three.js + WebGPU + TSL
鼠标可以拉扯、破坏文字网格，并产生带有弹性的回弹效果。
5、Three.js + Rapier + GSAP
视频从平面像素变成 3D 体素，再受重力影响坠落、碰撞和散开。
真正高级的网页特效，不是元素越多，而是每个效果都有明确用途。
你最喜欢哪一个？
案例地址放在回复区👇

[Xian | 弦 @Xian0063]

@lxfater 老铁，好厉害，你竟然在户外拍视频

[Xian | 弦 @Xian0063]

@aiseomastery 可以可以，我继续挖掘出来更好的，分享出来，感谢😀

[Xian | 弦 @Xian0063]

@kobe_acc 是的呢，表达的自然，准确

[Xian | 弦 @Xian0063]

@wangray 不敢相信哈哈哈哈哈哈哈