8 月 3 日—8 月 16 日前端创意精选：7 个 Demo 的共享输入与渲染边界
精选 2026 年 8 月 3 日至 16 日的 7 个前端创意 Demo，比较 DOM/CSS、GSAP、WebGL 与 WebGPU 在共享输入、GPU 实例化和内容导航上的分工，并给出可复用的工程拆解。
先看结论：这期的重点是把输入、结构和渲染分开
这期最值得复用的，不是某一个发光材质，而是几个项目都在处理同一个工程问题：滚动、指针、路由和内容状态，究竟由谁保存；DOM、GSAP 和 WebGL，又分别负责什么。
覆盖窗口是 2026 年 8 月 3 日至 8 月 16 日。我按 Awwwards 的 Site of the Day 日期和 Codrops 的文章发布日期收录了 7 个样本；它们来自同一个时间段，但技术路线很不一样：有的把 DOM 与 WebGL 放进同一帧，有的把 GPU 生成器做成可插拔模式，也有的只用网格、页面转场和少量文字动效，把内容路径做得更稳。
如果只打开三个：先看 HAOQI.DESIGN，它把 Lenis、React Three Fiber 和 DOM 放进同一条渲染时钟；再看 Geometry Painter，它把一次拖动拆成拾取、采样、实例化和 shader 生长；最后看 Chems.Studio，它提醒我们，作品集的高级感有时来自内容结构，而不是更重的效果。
7 个 Demo 一屏扫完
| Demo | 来源与日期 | 核心技术栈 | 先看什么 |
|---|---|---|---|
| HAOQI.DESIGN | Codrops，2026-08-15 1 | Next.js、React、Lenis、Three.js、React Three Fiber、Drei、自定义 shader、后处理 | DOM 与 WebGL 共用一帧滚动快照 |
| Interactive 3D Cluster | Codrops，2026-08-12 2 | Three.js、TSL、WebGPU、three-start、GSAP | icosahedron 面片实例化、噪声形变和 hover |
| Geometry Painter | Codrops，2026-08-11 3 | Three.js、WebGPU、TSL、three-mesh-bvh、实例化、自定义 shader | 一次拖动如何变成可切换的四种生长模式 |
| Chems.Studio | Codrops，2026-08-08 4 | Webflow、Swup.js、Vimeo API、自定义播放器 | 同一套三列网格如何切成首页、档案和横向详情 |
| SSTR | Awwwards SOTD，2026-08-16 5 | GSAP、Barba.js、Astro | 工程主题网站怎样用转场和 CMS 页面保持统一 |
| Revelatio Studio | Awwwards SOTD，2026-08-12 6 | WebGL、GSAP、Webflow | Hero、Work、Cities、Process 如何组成一条浏览路径 |
| No Art | Awwwards SOTD，2026-08-06 7 | GSAP、Shopify、3D、Webflow | 音乐、商品、活动和页面加载如何共用动效语言 |
1. HAOQI.DESIGN：先解决同一帧，再谈玻璃 shader
- Demo：HAOQI.DESIGN
- 来源与日期：Codrops，2026-08-15 1
- 技术栈：Next.js、React、Lenis、Motion、Three.js、React Three Fiber、Drei、Spline、自定义 shader 与后处理。1
这个站最值得看的地方不是玻璃材质，而是作者遇到的「一帧延迟」。最初 Lenis 和 React Three Fiber 各自维护
requestAnimationFrame，快速滚动时，DOM 已经到了新位置，WebGL 还在读上一帧的 scrollY。后来作者关闭 Lenis 的自动 RAF，让 R3F 通过 addEffect 调用 lenis.raf，再由 ScrollBus 保存当帧的滚动快照。之后的 useFrame 和 React 消费者都读同一个快照，两个世界才真正对齐。1这给创意站一个很实用的顺序：先统一时钟，再统一输入，最后才决定某个效果该放在 CSS 还是 shader 里。 站点让 DOM 和 CSS Grid 负责结构、响应式和可访问性，canvas 只镜像已经测量好的卡片矩形，并且只渲染靠近视口的图片。这样列数、间距和卡片比例仍由 CSS 控制，WebGL 不必接管页面布局。1
玻璃模型再往后才登场：作者用 FBO 先渲染背景，再让玻璃 shader 以不同方向采样这张纹理，做折射和色散；贴纸则放在同一张图集里，用
InstancedMesh 共享材质和一次 draw。可以直接带走的实现方式有三条：- 用一个
ScrollBus或类似快照对象保存当帧的scrollTop、速度和方向，别让每个组件自己读滚动值。 - 用 DOM 保存内容和可访问语义，WebGL 只读取矩形、进度和指针状态，做 CSS 难以表达的变形或折射。
- 给 canvas 设定视口附近的渲染预算；卡片离开视口时停止更新，而不是让整页的纹理一直跑。
2. Interactive 3D Cluster：把一个 icosahedron 拆成可组合的组件
- Demo：Interactive 3D Cluster
- 来源与日期：Codrops，2026-08-12 2
- 技术栈：Three.js、TSL、WebGPU、
three-start、GSAP；源码：codrops-tutorial-dark-cluster。2
效果本身很简单：一个旋转的 icosahedron，每个面向外挤出，再用噪声让面片缩放，最后叠加 dithering 后处理。真正有价值的是组织方式。
three-start 把渲染循环、相机、resize 等基础工作包起来，还把应用拆成全局模块与挂在 Object3D 上的组件；一个 Spin 组件可以接收轴和速度，也可以重复挂到同一个对象上。2作者没有把每个三角面当成一份独立的重型网格，而是根据面心生成实例几何，再把位置、法线和实例矩阵交给 WebGPU/TSL。指针交互也被拆成两步：GSAP 的
Observer 接收输入，Raycaster 找到命中的位置，再把命中点写入 uniform，让 shader 根据距离改变面片的大小。2复用时可以把它看成一条小流水线：输入事件只更新 uniform，组件负责对象行为，TSL 负责逐实例计算。 这样 hover 的强度、噪声速度和后处理参数都能独立调整；如果将来把三角面换成线段或点，也不必重写场景初始化。需要兼容 WebGL 的项目，则可以先保留同样的「实例数据 + uniform」边界，再替换 renderer 和材质实现。
3. Geometry Painter：让绘画模式插拔，而不是让代码越写越长
- Demo：Geometry Painter
- 来源与日期：Codrops，2026-08-11 3
- 技术栈：Three.js、WebGPU、TSL、
three-mesh-bvh、GPU 实例化、lil-gui、自定义 shader；源码：GeometryPainterThreeJS。3
拖动浮在空中的球面，表面会长出水晶、熔融裂缝、极光丝带或发光珊瑚。四种模式的视觉差异很大，但它们共用同一条前半段管线：射线拾取、路径重采样、撤销、轨道控制和生长进度。作者把差异收进一个「模式契约」，每个模式只需要根据同一组输入生成自己的实例和材质。3
这里有一个容易被忽略的坐标问题。拾取时得到的是 world space 坐标，但球体会旋转；如果把这个坐标直接留到动画结束，生成物就会停在旧位置。项目在拾取当下同时保存局部坐标、法线和切线基，再让后续模式在 anchor space 中生长。
three-mesh-bvh 的 firstHitOnly 还让射线在找到最近三角形后尽快结束，避免每次拖动都收集整棵树的命中结果。3性能上，项目先按最大数量分配实例，再通过 rank 和零缩放矩阵裁掉尚未出现的实例；滑块改变密度或颜色时，不重新生成整条笔画，而是改材质、uniform 和实例状态。四种模式因此都能实时预览，shader 只处理当前需要变化的部分。3
如果你在做粒子笔刷、路径生成器或数据雕塑，可以照着这个边界拆：
SurfaceSample只描述一次拾取得到的空间信息。StrokeInstance只描述沿路径生成的实例数据和 seed。- 每种视觉模式实现自己的
createStroke，不修改输入、撤销和交互代码。 - 先分配最大预算，再用 rank、距离或零缩放做 GPU 侧裁剪。
这比先写四套漂亮 shader 再想办法共用交互代码，更容易继续加第五种模式。
4. Chems.Studio：同一个网格，给不同内容不同节奏
- Demo：Chems.Studio
- 来源与日期：Codrops，2026-08-08 4
- 技术栈：Webflow、Swup.js、Vimeo API、自定义 Vimeo 播放器。4
Chems.Studio 没有把多年作品做成一张不断加特效的作品集，而是把它当成档案。核心结构只有三列：在首页，它变成整页的纵向序列；在 archive 页面，它变成三列项目集合；进入项目详情后，同一结构又变成横向展开的叙事。系统本身没有换，变化的是内容的节奏。4
Swup.js 负责让页面切换保持连续，Vimeo API 和自定义播放器则把影片留在站内的视觉系统里。文字很少，导航和界面只用少量 scramble text 提供反馈；作者明确把动效限制在导航、节奏和内容展开上，而不是让每个项目卡片持续循环。4
这对真实项目比一套新的 shader 更有普适性：先定义内容模型和布局节奏，再让路由转场把它们连接起来。若作品会持续增加，可以让 CMS 只负责项目资料，页面组件保持稳定；新内容进入时改变的是数据，而不是整套视觉身份。对于档案、案例库和媒体作品集，这条路径比「每个新项目都换一种首页」更能长期维护。
5. SSTR：把工业主题放进转场、CMS 和模块网格
- Demo：SSTR
- 来源与日期：Awwwards Site of the Day，2026-08-16 5
- 技术栈：Awwwards 详情页列出 GSAP、Barba.js、Astro；页面元素包括 Barba.js transitions、About company page、Cases CMS pages 和 Preloader。5
SSTR 是为石油钻井减摩擦的公司做的品牌、网站和 3D 项目。Awwwards 对它的描述很克制：模块化网格、贴近工程语言的编辑式排版，再用经过调校的运动把硬件主题串起来。5
这个案例的可复用点不在于照抄工业视觉，而在于把页面类型提前当成系统：About、Cases CMS、Products、Contacts 和 Footer 都是明确模块，Barba.js 负责模块之间的连续转场，GSAP 负责时间线细节。做 B2B、技术服务或产品型网站时，可以先为页面状态定义统一的进入、离开和预加载，再给不同内容类型保留自己的布局；这样动画会像网站的语法，而不是每页临时加上的片段。
6. Revelatio Studio：WebGL 只做入口，内容仍然负责导航
- Demo：Revelatio Studio
- 来源与日期：Awwwards Site of the Day，2026-08-12 6
- 技术栈：Awwwards 详情页列出 WebGL、GSAP、Webflow；页面元素包括 Pre-loading and Hero、Work、Big Numbers、Cities、Process、Team 和 Footer。6
Revelatio Studio 是一家位于 Recife、面向全球交付的 Branding、Product & Code consultancy。它把「三种能力、一支团队、一套流程」放进页面结构里：Hero 建立空间感，Work 和 Cities 展示范围，Big Numbers、Process 和 Team 再把品牌叙事拉回具体信息。6
从 Awwwards 列出的技术和页面元素看，WebGL 与 GSAP 更适合承担入口、预加载和交互反馈，Webflow 仍然负责可编辑的内容结构。这个分工值得拿来做作品集：首屏可以有一次空间化的进入，项目列表仍保留标题、缩略图和可点击区域；用户需要找案例或团队信息时，不必在一块画布里猜导航。
实现时可以把它拆成三个状态：
preloading 只负责资源准备，hero-ready 负责一次性的空间进入，content-browse 交回 HTML 结构。这个状态边界能让 WebGL 失败时直接降级到静态 Hero，也让移动端不必承担整页的 3D 任务。这里的状态设计是基于页面元素和技术标签的工程推断，Awwwards 页面没有公开具体代码实现。67. No Art：让音乐、商品和活动共用一套动效语法
- Demo：No Art
- 来源与日期：Awwwards Site of the Day，2026-08-06 7
- 技术栈：Awwwards 详情页列出 GSAP、Shopify、3D、Webflow；页面元素包括 Music Labels、Product Page、Page Load、Festival Events 和 Globe。7
No Art 把全球音乐和艺术活动放进同一个互动平台。它同时有音乐厂牌、商品页、活动页和 Globe 等入口，因此它面对的不是单一首屏，而是多个内容状态之间的切换。Awwwards 还把 Page Load 单独列为页面元素，说明加载本身也是体验的一部分。7
这个案例适合用来反推组件设计：
page-load、label、product、event 和 globe 可以共享一组进出场、遮罩和指针反馈，但每种内容仍保留自己的信息层级。Shopify 负责商品事实和购买路径，Webflow 或内容层负责编辑结构，GSAP 只编排状态之间的时间关系。具体实现细节没有在 Awwwards 页面公开，因此这里给出的是基于公开页面元素的复用方案，而不是对项目源码的断言。7如果要把这套思路放进电商或活动站，先确保标题、价格、日期、购买和报名入口在没有动画时也能完成任务；再让 3D 或转场强化「进入某个内容世界」的感觉。动效一旦失败，用户仍应能从同一个 DOM 结构里继续浏览和操作。
本期的三个信号
1. 共享输入正在替代组件各自监听。 HAOQI.DESIGN 把滚动推进和 R3F 放进同一帧，Geometry Painter 把拾取结果标准化成表面采样，Interactive 3D Cluster 则把指针命中点变成 uniform。它们的共同点不是都用了 WebGPU，而是先规定输入数据的形状，再让不同渲染层消费这份数据。123
2. WebGPU 的价值开始落在系统设计上。 3D Cluster 用 TSL 节点和实例化面片组织视觉，Geometry Painter 用固定实例预算、GPU 裁剪和可插拔模式承受实时参数，HAOQI.DESIGN 则用
InstancedMesh 把大量贴纸压进共享材质。想复用这些案例，先问「哪些数据每帧变化、哪些数据只初始化一次」，再决定是否需要更重的 renderer。1233. 克制的动效更像产品能力。 Chems.Studio 用统一网格承载不断增加的作品，SSTR 用转场和 CMS 页面保持工程主题，Revelatio Studio 与 No Art 则把预加载、Hero、作品、商品和活动拆成不同内容状态。它们都在提醒一件事：动效的工作是让用户知道自己从哪里来、现在看什么、下一步能去哪里。4567
如果这期只带走一条实现顺序，可以这样做：先画状态和输入，再用 DOM/CSS 把内容做通，接着让 GSAP 或 Barba.js 处理跨状态时间线，最后把确实需要空间连续性的部分交给 WebGL/WebGPU。 这样做的好处不是效果更少，而是每一层都知道自己该在什么时候工作，以及失败后页面怎样继续可用。
Fuentes de referencia
- 1
- 2
- 3
- 4
- 5SSTR - Friction Reduction - Awwwards SOTD
awwwards.com
- 6Revelatio Studio - Awwwards SOTD
awwwards.com
- 7No Art - Awwwards SOTD
awwwards.com
Este contenido lo produjo un canal automáticamente. Con una sola frase, Neodrop puede seguir produciendo para ti.