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

[zhongchunfeng]

https://lusion.co/projects/ 我想做一个差不多，threejs 有没有 demo

[gaoryrt]

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

[zhongchunfeng]

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

[realJamespond]

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

[asdjgfr]

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

[Xinu]

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

[Terry05]

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

[zhongchunfeng]

看的我头都大了

[corcre]

好 tm 炫酷

[youyouzi]

电脑卡爆了。。。

[novaren]

这个是什么网站，好酷炫

[andyskaura]

这流体效果比较难搞

[andyskaura]

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

[zhongchunfeng]

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

[huihushijie1996]

直接偷

[crocoBaby]

有现成的分享一下吗?

[akakidz]

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

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

拿这个魔改吧

[kokerkov]

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

[qwqqwq]

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

[aino]

试了下 gemini 还原度 80%

[zhongchunfeng]

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

[anivie]

@aino 求 prompt

[zhongchunfeng]

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

[ZettarYuFan]

@aino cursor 里面用吗

[otakustay]

https://inspira-ui.com/docs/components/cursors/fluid-cursor

[supuwoerc]

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

[kokerkov]

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

[zhongchunfeng]

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

[zhongchunfeng]

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

[zhongchunfeng]

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

[Greendays]

真酷炫啊，后端表示惊叹

[jnliyan1]

真酷，第一次见，牛皮

[shuhsio]

惊叹

[Yaavi]

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

[wuxidixi]

这网站真牛逼

[cwliang]

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

[Ramoncjs]

确实酷炫 amazing

[Ramoncjs]

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

[JimLee0921]

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

[dsb2468]

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

[LongTimeNoSee]

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

[dsb2468]

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

[L0L]

后端表示，酷炫的一批

[jackleeforce3615]

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

[dsb2468]

@jackleeforce3615 苹果官网很多是视频

[qiaobeier]

一眼 three-js

[journalistFromHK]

orz 屌炸天啊

[zinco]

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

[living9696]

真的牛逼

[Heeee]

这也太炫了

[leibaio]

有点炫的，厉害

[keithwhisper]

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

[p1gd0g]

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

[rabbbit]

用的 Three.js

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

相关的几个类
flipSim
FlipAnimation

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

[zhw2590582]

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

[NineTree]

真是炫酷啊

[woodchen]

太酷啦

[wellbeing]

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

[DualVectorFoil]

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

[yigefanqie]

前端表示自己太菜了

[zedking]

确实帅啊这网页

[jsq2627]

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

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

[AV1]

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

[ps3chinamj]

TEAM 007 还有一只猫

[Mutoo]

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

[XLeopard]

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

[DreamingCTW]

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

[MEIerer]

这么牛吗，要做这种效果

[bowencool]

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

[skallz]

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

[youyouzi]

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

[yurenfeijing]

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

[0900301432]

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

[twomoe]

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

[v2048]

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

[yurenfeijing]

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

[hugozach]

我的天 这网站太炫酷了

[tequ1lAneio]

好酷炫的网站，有点爽啊

[cuixiaolu]

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

[kongkxyang]

很炫，但手机上很卡

[SWBMESSI]

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

[andyskaura]

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

[WashFreshFresh]

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

[willbing]

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

[willbing]

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

[zhj0326]

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

[Luffy0o]

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

[dsb2468]

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

[x86]

这前端，不学也罢！

[andyskaura]

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

[Quarter]

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

[glzcc520]

膜拜

[sakae010]

太空人那个效果是真不错

[paloalto]

https://cursor-trail-hazel.vercel.app/

[t783072156]

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

[MzM2ODkx]

react-bits, vue-bits?

[Magicdove]

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

[DYINA]

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

[iShao]

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

[linkopeneyes]

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

[v2AKS]

我日，好几把炫酷