不依赖 Lottie，也不用 three.js。单个 HTML 文件，参照 GitHub 明星项目，把 GPU 着色器、流体模拟、创意编程与原生滚动动画装进一页。
01 — GPU 流体模拟
基于实时 Navier–Stokes 求解的离屏多 pass 渲染：平流 → 旋度 → 散度 → 压力求解 → 着色。全部跑在 GPU 上，移动端也流畅。技法参照 16k★ 的 WebGL-Fluid-Simulation。
02 — 创意编程 · 粒子星系
Canvas 2D 上的经典 generative art：粒子受光标引力扰动，邻近自动连线，形成流动的星座网。这是 p5.js 创意编程生态最具代表性的视觉母题。
03 — 原生 CSS · 零依赖
顶部进度条与每个区块的入场动画，全部由 animation-timeline: scroll()/view() 驱动——无需任何 JS 滚动监听。卡片描边是 @property 可动画角度 + 锥形渐变的玻璃拟态。
滚动驱动动画，原生时间线，性能远胜 JS 监听 scroll 事件。
元素进入视口即触发入场，无需 IntersectionObserver。
让渐变角度、颜色成为可补间的自定义属性。
真实毛玻璃层叠，配合锥形描边产生深度。
原生 App 般的形变转场 API，单页内即可丝滑切换。
04 — 滚动叙事
本页刻意使用浏览器原生滚动:它由合成器线程驱动,天然丝滑,且与上面的 scroll()/view() 时间线零冲突。需要商业级 scrollytelling 时,可在此基础上叠加 14k★ 的 Lenis 与 GSAP ScrollTrigger——但默认不劫持滚动,才是最稳的手感。