8 月 17 日—8 月 30 日前端创意精选：CSS 拼贴、WebGPU Goo 与可计算的光
精选 2026 年 8 月 17 日至 30 日的 7 个前端创意 Demo，拆解 CSS/DOM、GSAP、WebGL 与 WebGPU 如何把输入、状态和性能预算落到可复用结构。
先看结论：这两周的重点，是让创意效果各自拥有清楚的输入边界
2026 年 8 月 17 日至 8 月 30 日，值得打开的前端创意 Demo 集中在三条路线上：CSS/DOM 用数据和容器尺寸承担布局，WebGL/GLSL 把图像效果压进片元计算，WebGPU/Three.js 则把音频、滚动和大量实例交给 GPU。7 个样本的共同价值，在于它们都把“看起来很复杂”的画面拆成了可控制的状态、输入和预算。
如果只打开三个：先看 Animated Testimonial Hero，它把 CMS 数据、
container queries 和 GSAP 时间线接成一块可维护的内容模块；再看 Relighting Images，它用深度图、法线和阴影采样，让一张平面图片响应光照；最后看 FRONTIER，它把 60fps 的问题具体化成像素预算、实例化、着色器合成和光源编译缓存。本期收录口径为 Codrops 文章发布日期和 Awwwards Site of the Day 日期。Awwwards 条目的技术实现只写公开详情页明确给出的标签和页面元素；涉及架构的部分会标成基于这些公开信息的工程推断。
7 个 Demo 一屏扫完
| Demo | 来源与日期 | 核心技术栈 | 先看什么 |
|---|---|---|---|
| Sharplink | Awwwards SOTD，2026-08-27 1 | GSAP、Three.js、Vue.js、3D | 3D 页面头部、首页滚动、团队弹窗与页脚动画如何形成统一节奏 |
| Ai in Design Report 2026 | Awwwards SOTD，2026-08-26 2 | Figma、Framer、响应式设计、数据可视化 | 章节、编辑图表和案例菜单如何把报告变成可浏览的内容系统 |
| Pointer Square Lens Distortion | Codrops，2026-08-25 3 | Three.js、WebGL、GLSL、GUI | 一张正方形 mask 怎样在不同视口中保持比例，并驱动局部镜头与 RGB shift |
| FRONTIER | Codrops，2026-08-22 4 | Three.js、React Three Fiber、Blender、GLB、InstancedMesh、ShaderMaterial | 5.2 MP 像素预算、实例化舰队和解析式网格怎样共同守住帧率 |
| Run Rob Run | Codrops，2026-08-20 5 | Three.js、WebGPU、音频响应、自定义形变、滚动状态 | Goo 如何从有机 blob 变成 cube，并让低频、鼓点和高频细节承担不同动作 |
| Relighting Images | Codrops，2026-08-19 6 | Three.js、TSL、WebGPU、深度图、法线图 | 2D 图片怎样借助深度估计、半浮点数据和阴影采样获得空间感 |
| Animated Testimonial Hero | Codrops，2026-08-18 7 | Webflow、Webflow CMS、CSS container queries、cqw、em、JavaScript、GSAP | CMS 内容怎样进入计数器、可缩放拼贴和分层时间线 |
1. Animated Testimonial Hero：先让 CMS 数据长成布局
- Demo：Counter-Up Animation Generator；完整案例见 Animated Testimonial Hero
- 来源与日期：Codrops，2026-08-18 7
- 技术栈：Webflow、Webflow CMS、CSS container queries、
cqw、em、小型 JavaScript 计数器、GSAP visual timeline。7
这个案例把一个 testimonial hero 拆成三段：slot-machine 风格的数字计数器、由 CMS 肖像组成的手工拼贴，以及持续引入新头像的循环动画。CMS 负责成员数据和计数值，Webflow 负责结构，GSAP visual timeline 负责时间关系。7
计数器的关键做法是“移动数字带”。每一位数字都放在一个只显示一行的
overflow: hidden 单元里，内部堆叠一串数字，脚本通过 translateY 让数字带滑过，最后停在目标数字。每一位的旋转圈数和持续时间分开控制，右侧数字旋转更久，视觉上就有了从左到右逐步停下的节奏。脚本还会读取真实的 line-height，避免 1em 与标题的实际行高产生偏差。7拼贴布局则利用了 Webflow Collection List 的位置选择器。基础样式先给所有条目同一个宽度，再用
:first-child、:nth-child(even) 和 :last-child 改写不同位置的宽度与垂直偏移。外层容器设置 container-type: inline-size，再用 font-size: 1cqw 把内部的 em 值绑定到容器宽度，整个拼贴便能按比例缩放。移动端再把基准切换到 vw。7这条思路适合复用在成员墙、客户 logo、数字化案例卡和数据型 Hero：
- 让 CMS 只提供内容和状态值，布局组件保存稳定的视觉结构。
- 用外层容器的尺寸决定内部
em比例，把一组相关元素当成一个可缩放单元。 - 让
IntersectionObserver决定计数器何时启动，让进入视口成为一次性触发条件。 - 用 GSAP 时间线把主信息、拼贴元素和背景形状分层，先让读者看到主要数字，再让次级细节跟进。
这里真正值得带走的是数据与布局之间的接口：数据会变化，结构可以保持稳定，动画只消费状态变化。
2. Pointer Square Lens Distortion：把复杂效果收进一个片元着色器
- Demo：Pointer Square Lens Distortion
- 来源与日期：Codrops，2026-08-25 3
- 技术栈：Three.js、WebGL、GLSL、TypeScript、GUI；源码：mouse-following-square-lens-effect。3
画面由两张图片组成：灰度图铺满屏幕，彩色图只在跟随鼠标的正方形区域中出现。正方形内部叠加镜头鼓包和径向 RGB 分离，外部灰度图继续做波浪与随机扰动。项目用一张平面和一个 fragment shader 完成整套效果，渲染路径里没有 3D 模型，也没有额外的 render target。3
实现的第一道门是 mask。作者把 UV 坐标转换到
-1.0 到 1.0，再用四个 step 判断像素是否处于左、右、上、下边界之间。四个结果相乘后，就得到正方形区域的 0/1 mask。视口比例变化时，shader 再用 mesh 尺寸计算校正值，让屏幕上的区域保持正方形。3第二道门是 UV。两张图片各自携带尺寸 uniform，
coverUv 根据纹理和 mesh 的宽高比进行裁切，效果与 CSS background-size: cover 接近。随后 shader 以正方形中心为坐标，把镜头变形强度乘到距离函数上，再把 RGB shift 推向正方形边缘。3复用时可以沿用它的文件边界：
Stage 管相机和 renderer，Mesh 管纹理、尺寸和 uniform，Webgl 负责事件、GUI 和 render loop，GLSL chunks 单独保存 coverUv、镜头和随机函数。鼠标位置先在 JavaScript 中平滑，再作为 uniform 传给 shader；图片内容和效果参数由两条独立管线控制。3这个 Demo 适合用于作品集卡片、摄影入口和局部聚焦导航。桌面端可以保留 pointer follow，触屏端则可以把正方形固定在焦点位置，继续使用同一套双图层与 shader 参数。
3. Relighting Images：深度图先变成数据，再变成光
- Demo：Relighting Images
- 来源与日期：Codrops，2026-08-19 6
- 技术栈：Three.js、TSL、WebGPU、深度估计模型、半浮点纹理；源码：codrops-relightning-images。6
这个实验没有把照片建模成完整的 3D 场景。它先为 2D 图片生成深度图，再把深度图转换为浮点数据并做模糊，最后根据深度坡度推导法线。白色代表更近，黑色代表更远；半浮点数据把 8 位图像的 256 个深度级别扩展成更连续的表面信息。6
法线决定每个像素朝向光源的方向。shader 从深度图的左右、上下邻域采样差值，得到表面坡度，再把照片亮度的细节坡度叠加进去。这样的处理会让 painted stripe、石头纹理和照片细节在移动光源下读成表面起伏。6
阴影由另一条采样路径负责。每个像素沿着光源方向在深度图上走过若干步，比较途中深度与当前表面深度，逐步累积遮挡值，形成柔和的阴影。最终材质把图片颜色、深度法线和深度阴影分别接入
MeshPhongNodeMaterial 的 color、normal 和 ambient occlusion 路径。6这条流水线可以直接迁移到商品图、建筑照片、艺术作品和地图入口：
- 预处理阶段把 8 位深度值转换成 float，先平滑再上传，避免阴影沿量化台阶跳动。
- 渲染阶段把颜色、法线和遮挡拆成独立输入，参数更容易调试。
- 细节坡度使用照片亮度作为补充，适合增加材质感，强度需要随内容控制。
- 阴影采样步数、纹理尺寸和移动端 fallback 需要单独设预算。
这个案例给出的判断很具体：2D 图片的空间感可以来自数据处理与光照模型，完整模型只是其中一种路线。
4. Run Rob Run：让音频频段各自承担动作
- Demo：Run Rob Run
- 来源与日期：Codrops，2026-08-20 5
- 技术栈：Three.js、WebGPU、自定义形变、滚动状态、音频响应、分层网格、粒子与 hover 细节。5
Run Rob Run 的核心物体是一层透明外壳包住橙色内核的 Goo。它在 idle 状态保持有机形状，随着滚动逐渐变成 cube，音乐会推动不同部位产生不同幅度的形变，hover 时再出现网格读数和 dust。外壳、内核和表面 coat 共用基础形变逻辑，却拥有不同的材质和反应强度。5
滚动形变同时保留两种目标：有机 blob 的方向性变形和 cube 的投影位置。
organicMix 与 cubeMix 使用不同的 smoothstep 区间，滚动进入后，顶点逐渐靠近最近的 cube 面。这样的状态设计让形状有连续的过程，最后仍然能落到清楚的几何结果。5音乐系统把 low、mid、high、pulse 拆开处理。低频和 kick 负责更强的核心冲击，clap 等中频事件影响另一组动作，高频细节被限制强度后转成表面运动。项目还根据 crowd density 和 low dominance 调整冲击，避免密集音乐让整体形状持续膨胀。5
重量感来自不同的 attack 与 release。冲击到来时使用更快的插值，回落阶段改用更慢的阻尼；内核比外壳承担更大的动作，外壳保持清晰的折射轮廓。项目还预计算部分 noise frame、错开 normal 更新，并在滚动期间暂停 hover 细节，减少同时变化的视觉通道。5
可复用的拆法是：
- 把滚动、音频、指针先整理成独立状态对象。
- 把每一种反应拆成
impact、surfaceBoost、flowSpeed这样的动作通道。 - 让外壳、内核和装饰层消费不同权重，避免所有网格同步抖动。
- 把音乐播放、hover 细节和 WebGPU 场景都做成增强层，静态内容与可访问路径保留在 DOM 中。
这个 Demo 适合拿来思考“音频响应如何服务界面”：频谱值只是输入，动效仍需要设计成有限的动作语言。
5. FRONTIER：帧率问题最终会落到像素与编译缓存
- Demo：FRONTIER
- 来源与日期：Codrops，2026-08-22 4
- 技术栈：Three.js、React Three Fiber、Blender、Draco GLB、
InstancedMesh、自定义ShaderMaterial、HDR、后处理。4
FRONTIER 把 Space Invaders 放进一个由 Blender 资产、雾、聚光灯和音乐组成的场景。舰队通过一个 Draco GLB 加载，再按敌人类型组织成
InstancedMesh 池；六种入侵者、不同材质槽和会逐体素损坏的 boss，共用一套游戏模拟。4地面经历多次尝试后改成一个解析式
ShaderMaterial。六边形网格由 hex-distance function 计算，fwidth() 负责抗锯齿，因此地面不依赖纹理和 mip chain。舰船推力与炸弹下落通过 emitter uniform array 进入 shader，JavaScript 侧再保留一个 fieldLift 镜像计算，让敌人、掩体和掉落物跟随同一片被 GPU 抬起的地面。4性能测量给了三个很实用的边界。第一，
devicePixelRatio 需要服从绝对像素预算：FRONTIER 把 drawing buffer 控制在 5.2 MP，并据此反推 DPR。第二，覆盖 WebGL canvas 的 DOM mix-blend-mode 会把整张画布带进浏览器合成慢路径，死亡闪白最终被移进 composer，用 GLSL 完成同样的混合。第三，光源数量会进入 lit material 的程序缓存键，光源组用 visible 切换会引发运行时编译；保持光源槽位存在、只调整 intensity，可以把进入动画的编译次数压到零。4FRONTIER 还记录了合并几何后的反作用：把 1,421 个 draw calls 合并到 25 个后，材质级大网格会失去细粒度的视锥体裁剪。再按约 3 米的 z 区段分块，便能恢复部分裁剪；合并前把对象身份写进顶点属性，后续仍可做面板级灯光动画。4
这套经验适合大型 WebGL Hero 和浏览器游戏：
- 先限制 drawing buffer 的像素数量，再谈 DPR。
- 把需要持续变化的合成效果放进 GPU 后处理，减少 DOM 与 canvas 的跨层混合。
- 把光源数量、材质变体和程序缓存当成运行时状态管理。
- 合并几何时同步设计 culling 分区与身份属性，draw call 降低和可见性裁剪需要一起验证。
6. The state of the gallery：把画廊做成可交互的数据入口
- Demo：The state of the gallery
- 来源与日期：Awwwards SOTD，2026-08-22 8
- 技术栈：Awwwards 详情页列出 WebGL、Three.js、React；页面元素包括 hover 时的油膜与粒子鼓包、click pulse、scene transition、滚动组装的玻璃视频 tile 和 scroll-driven hero。8
这个站点把画廊的数量、精选和 Three.js 作品状态放到一个单页叙事里。Awwwards 的公开元素列表给出了几种清楚的输入：鼠标 hover 会触发油膜与粒子鼓包，点击会产生脉冲，滚动会让玻璃视频 tile 组装，场景转场和 Hero 动画则负责页面状态之间的连接。8
从这个公开结构可以得到一条工程拆解：把
hover、click、scroll 和 scene 设成不同状态，分别管理局部反馈、一次性反馈、内容进入和场景切换。WebGL 负责油膜、粒子、玻璃和空间连续性，HTML 仍然需要承载数字、标题和可访问的导航。这个拆解属于基于 Awwwards 公开标签与页面元素的工程推断，详情页提供的证据范围止于这些字段。8如果把它放进自己的作品集，可以先做一个无动画版本：项目列表、筛选入口、标题和详情链接都能直接操作。随后再给每个状态添加增强层：hover 改材质参数，click 播放一次脉冲，scroll 推进 tile 的装配进度，scene transition 只负责跨页面的连续感。用户的内容路径由 DOM 保持，空间效果则按设备能力启用。
7. Sharplink：双色调品牌站也需要页面状态
- Demo：Sharplink
- 来源与日期：Awwwards SOTD，2026-08-27 1
- 技术栈：Awwwards 详情页列出 GSAP、Three.js、Vue.js、3D；页面元素包括 About Page、Team Modal、Footer Animation、3D Page Headers 和 Home Page Scroll。公开色板是蓝色
#0E76FF与浅灰#F3F3F3两种颜色。1
Sharplink 是面向 ETH 投资入口的机构平台品牌站。Awwwards 的详情页把 About、Team Modal、Footer、3D Page Headers 和 Home Page Scroll 分开列出，说明这套体验由多个页面状态组成，3D 入口和 GSAP 动画需要与内容页面共同工作。1
这个案例的可复用点来自它的克制：公开色板只保留蓝色和浅灰，页面里的 3D、滚动和弹窗因此有清楚的对比基线。工程上可以把
home、about、team-modal 和 footer 看成状态集合，用 GSAP 处理进入、离开和 modal 展开，Three.js 只负责页面头部确实需要的空间对象。这个架构属于基于公开技术标签和页面元素的工程推断，代码细节应以实际站点检查结果为准。1对 B2B 或技术产品站来说，顺序可以这样安排：
- 先保证产品定位、关键数据和联系入口在静态 DOM 中完整出现。
- 再给页面头部加入 3D 识别点，让首屏建立品牌空间。
- 用统一的 GSAP 时间线连接首页滚动、团队弹窗和页脚动画。
- 给移动端与粗指针设备保留清晰的打开、关闭和返回路径。
这个 Demo 说明双色调本身不是完整的视觉系统；色彩、页面状态和动效时间线需要共同承担识别度。
本期的三个信号
1. 先定义输入，再决定渲染层。 Animated Testimonial Hero 把 CMS 值变成计数器和拼贴状态，Pointer Square Lens 把鼠标位置与正方形尺寸变成 shader uniform，Run Rob Run 把滚动和音频拆成多个形变通道。它们都先固定输入的数据形状，再让 CSS、GSAP 或 GPU 消费这份状态。357
2. GPU 效果正在从“材质技巧”变成整条管线。 Relighting Images 把深度、法线和阴影分开处理，FRONTIER 把像素预算、后处理、光源槽位和裁剪一起纳入性能设计，The state of the gallery 则把玻璃与粒子放进 hover、click 和 scroll 状态。效果越重，输入、合成和回退越需要一开始就写进结构。468
3. 数据驱动布局正在承接创意表达。 CMS 拼贴把内容更新交给数据，把比例和位置交给容器；Ai in Design Report 2026 把章节、案例菜单和编辑图表组织成可浏览的报告；Sharplink 则用双色调和明确页面元素维持品牌站的统一节奏。创意页面因此有两条同时成立的要求：数据可以持续变化，浏览路径仍然稳定。127
如果这期只带走一条实现顺序，可以从四个问题开始：输入由谁保存，状态怎样变化，哪一层负责渲染，效果失效时用户怎样继续浏览。先把 DOM、内容和回退路径做通，再把 GSAP 时间线、GLSL 片元计算或 WebGPU 实例化接进来，创意效果才会拥有可以继续维护的结构。
References
- 1Sharplink - Awwwards SOTD
awwwards.com
- 2Ai in Design Report 2026 - Awwwards SOTD
awwwards.com
- 3
- 4
- 5
- 6Relighting Images with Depth Maps and Three.js
tympanus.net
- 7
- 8The state of the gallery - Awwwards SOTD
awwwards.com
This story was produced automatically by a channel. One sentence is all it takes for Neodrop to keep producing for you.