有没有前端大佬，帮我看一下这个网站底部的粒子动画怎么做的。

https://brm.io/matter-js/demo/#mixed 这个？

@gaoryrt 看起来好像，我研究研究，谢谢大佬

参考这个吧，原理都差不多，都是通过压力流速图画的，具体也没看懂
https://paveldogreat.github.io/WebGL-Fluid-Simulation/

我猜是这两个的结合
https://vue-bits.dev/backgrounds/liquid-ether
https://brm.io/matter-js/demo/#mixed

翻了几个页面，效果炫酷了。原本因为 ai 导致的对前端的轻视，荡然无存，道心破碎了

这个页面做得太过于酷炫了

看的我头都大了

好 tm 炫酷

电脑卡爆了。。。

这个是什么网站，好酷炫

这流体效果比较难搞

@andyskaura 找到一个 shadertoy 的流体效果，可以抄到 webgl shader 中去 https://www.shadertoy.com/view/tsKXR3

@andyskaura #12 主要是底部那个粒子 跟水一样，不是简单的碰撞，难搞

直接偷

有现成的分享一下吗?

demo:
https://tympanus.net/Tutorials/MouseInstancing/

代码:
https://tympanus.net/codrops/2023/12/13/creating-an-interactive-mouse-effect-with-instancing-in-three-js/

拿这个魔改吧

Firefox 不能加载，chrome 打开卡卡的，你学他干嘛？

我丢，这网站动效这么吊吗

试了下 gemini 还原度 80%

@aino 真的假的，动效也还原了吗

@aino 求 prompt

@kokerkov 我这边 firefox 也是可以打开的，没什么区别 版本 107

@aino cursor 里面用吗

https://www.reactbits.dev/text-animations/split-text 我印象这里有，但是不想自己找了

@zhongchunfeng #22 估计是有什么插件拦截了。我另一台电脑的 firefox 确实没问题

@supuwoerc https://www.reactbits.dev/animations/splash-cursor 这个很像

@otakustay 是的，这个确实很不错，但是最重要的是底部那个粒子效果难弄。

@supuwoerc https://www.reactbits.dev/backgrounds/ballpit 这个也很像那个粒子

真酷炫啊，后端表示惊叹

真酷，第一次见，牛皮

惊叹

你挑了这个网站中最简单的效果

这网站真牛逼

打开了一会没关，突然电脑风扇呼呼响，用了一年多的 mbp 这是第一次，m3 芯片 16gb 内存

确实酷炫 amazing

这个网站不同的页面有不同的配乐，音乐与网页动画结合的非常好，并且有非常强的反馈效果，做的真好啊

怎么把这个网站前台源码偷了兄弟们，给个开源地址

动起来后，GPU 上升，风扇启动了。。。。。。

我用的 chrome 最新版打开非常卡

右上角，about US 的页面，好好看！！！这是前端能做到的么

后端表示，酷炫的一批

apple 官网的首页是不是也用到类似的 酷炫吊炸天

@jackleeforce3615 苹果官网很多是视频

一眼 three-js

orz 炸天啊

别说后端了，前端都目瞪狗呆

真的牛逼

这也太炫了

有点炫的，厉害

@dsb2468 Chrome Experiments 里有超级多炸天的前端作品

看到开头的进度条我就知道不简单
但是这也太花了，有点受不了

用的 Three.js

代码
https://lusion.co/_astro/hoisted.06a00660.js

相关的几个类
flipSim
FlipAnimation

贴图
https://lusion.dev/assets/textures/flip_texture.png

特效炫酷是一回事，设计感也是一流，十年老前端都目瞪口呆

真是炫酷啊

太酷啦

M4 Pro 48G 内存，chrome 打开很丝滑

@dsb2468 是的，点击不放还会进入子弹时间，帅得。

前端表示自己太菜了

确实帅啊这网页

像这种网站，前端功力只占三成，七成还是靠顶流 UX 设计师。

认识几个顶流设计师，各种 WebGL shader 信手拈来，各种 3D 引擎都会一点。就算看代码可能觉得水平一般，不懂软件工程，图形学半吊子，但写出来的东西真的是漂亮。

太强了，
比现在那些泛滥的 AI 生成网页（高饱和紫色、大圆角、毛玻璃、霓虹灯特效）不知道高到哪里去了

TEAM 007 还有一只猫

几年前写的 prototype/demo 可以参考一下，关键词：2d particle based fluid ，核心算法是 Double Density Relaxation:
https://codepen.io/mutoo/pen/zdgJoP

Team 页真炫酷啊，这种团队介绍方式亮瞎眼

op 说的特效都是简单的了，首页往下拉有一个太空人，真给我看呆了....
https://lusion.co/

这么牛吗，要做这种效果

@youyouzi 该换电脑了，我的很流畅

看了下技术栈，ssg 用的是 astro ，特效是 three.js ，不得不说非常有设计感

@bowencool 没办法啊，公司不给自带电脑，给的还是集显破联想~~~

@jackleeforce3615 不是，这个是 three.js canvas 实现的，苹果官网好多是 css 的 matrix 实现的

这个网站显卡差一点的都打不开，鼠标可以一直滚，页面会跟着换。点击链接的时候整个页面的动画都在变。关键是还有返回的动画。

手机访问时，陀螺仪还可以影响动效……

看了下那个网站，效果还真挺特别的，鼠标划了一阵。顺便看了下 cpu ，这台电脑还可以，cpu 占用提高了点，但影响不大。

@yurenfeijing 说错了，这个也有好多 css 实现的，about us 页面就有好多 transform3d

我的天 这网站太炫酷了

好酷炫的网站，有点爽啊

看到这个效果，真的太炫酷了。

很炫，但手机上很卡

主页往下滑有个太空人，太炫酷了

@andyskaura #11
看了半天 3 楼的，shader 看不明白，反正抄过来了
op 可以借鉴一下 https://kuraa.cc/upload/testPhy.html

按住左键不松还有别的效果。。。

https://www.yuichiroharai.com/experiments/fluid/
看看

https://edankwan.com/experiments/hyper-mix/
宇航员头上的粒子

@Xinu https://activetheory.net/ 感受一下这个

设计、创意、美感都很棒，得是一个很懂设计的前端大神才能实现，缺一不可。

@andyskaura 哈哈，点多了会掉渣明显

这前端，不学也罢！

@dsb2468 #87 是的 所以原网页实例还有超出数量上限后自动将 y 坐标最小的移除的优化

about 页面的那个山谷宇航员的效果真不错

膜拜

太空人那个效果是真不错

@Xinu 不用破碎，这很多方面都超出前端的范畴了。。对图形学没有两把刷子，整不出来

react-bits, vue-bits?

虽然很炫酷，但是电脑直接卡死了

https://lusion.co/about
这里用滚轮交互真的太帅了

我在手机上看的，这也太牛逼了

@aino 太空人那里也能还原吗

我日，好几把炫酷