7 月 21 日—8 月 2 日前端创意精选：7 个把页面做成状态机的案例
本期精选 7 个来自 Awwwards 与 Codrops 的前端案例，重点拆解 CSS/DOM、GSAP 与 WebGL 如何分工，让创意交互能落到状态、输入和性能控制上。
先把页面看成一组状态
这期最值得复用的不是某个漂亮的 shader，而是「效果该在什么时候发生」这件事：MERSI 把图片从列表带进详情，Infinite Scroll GSAP Gallery 把滚轮和触摸交给 timeline，Ridgeline 则让多个 3D 场景共用一个 WebGL context。视觉仍然重要，但真正决定体验能否落地的，是状态、输入和回退路径有没有分清。
本期选 7 个样本：4 个来自 Awwwards 在 2026 年 7 月 22 日至 8 月 2 日的 Site of the Day，3 个来自 Codrops 在 7 月 22 日至 30 日发布的案例文章。Awwwards 日期按详情页的 SOTD 日期记录；Codrops 日期按其首页条目日期记录，项目技术细节则以对应文章为准 12。
如果只打开三个：先看 MERSI 的
clip-path 分屏和 Flip 转场，适合直接移植到作品集；再看 Infinite Scroll GSAP Gallery，适合研究自定义滚动的输入与状态机；最后看 Ridgeline，适合拆解 Webflow 页面怎样挂载一套不拖垮首屏的 3D 场景。7 个 Demo 一屏扫完
| Demo | 来源与日期 | 核心技术栈 | 先看什么 |
|---|---|---|---|
| MERSI | Codrops，2026-07-27 3 | Webflow、GSAP、ScrollTrigger、Flip、Lenis、clip-path | 分屏 slider 与「打开一本书」般的详情页进入 |
| Made With GSAP | Awwwards SOTD，2026-07-29 4 | GSAP、Vanilla JS、拖拽、滚动动画 | Hero Drag、Cards Hover、Text Explosion 怎样变成可浏览的效果档案 |
| Infinite Scroll GSAP Gallery | Codrops，2026-07-30 5 | GSAP Observer、Flip、SplitText、paused timeline | 滚轮/触摸、视差、全屏详情如何共用一条时间线 |
| Dragonfly Redux | Awwwards SOTD，2026-07-22 6 | WebGL、GSAP、Vue.js、Filters and Effects | ASCII Hover 如何让抽象的加密机构网站产生局部反馈 |
| Ridgeline | Codrops，2026-07-22 7 | Three.js、React Three Fiber、drei、GSAP、Lenis、Blender | 真实地形、多场景切换与单一 WebGL context |
| Noomo Showcase | Awwwards SOTD，2026-08-01 8 | WebGL、GSAP、Three.js、3D、Data Visualization | 3D Hero、Project Preview 与沉浸式滚动如何串成作品展示 |
| Hearst Exhibit 2026 | Awwwards SOTD，2026-08-02 9 | WebGL、GSAP、Scrolling、Gallery、Typography | List/Grid Gallery 和 Paper Curl WebGL Interaction 如何服务展览内容 |
1. MERSI：用 CSS 先搭出「像书一样打开」的页面
- Demo：MERSI Architecture
- 来源与日期：Codrops，2026-07-27 3
- 技术栈：Webflow、原生 JavaScript、Vite、Netlify、GSAP、ScrollTrigger、SplitText、Flip、Lenis、Taxi.js、Splide；分屏 slider 使用
clip-path。
MERSI 的目标不是把建筑照片塞进一个现成网格，而是做出介于建筑书籍和互动对象之间的浏览体验。Codrops 记录的实现包括左右同步的大图区域、中央 label 锚点、
clip-path 驱动的分屏变化，以及把项目封面翻转进详情页的 GSAP Flip 转场 3。这组技术的价值在于：CSS 负责画面边界，GSAP 负责对象连续性。分屏 slider 不需要先上 WebGL，先用两个可裁切的图像层和一个中心状态值把结构做对，
clip-path 只改变可见区域；进入详情页时再用 Flip 记录封面元素的位置、尺寸和比例，避免列表页与详情页之间突然切屏。可复用时可以按这个顺序来：
- 先让 DOM、图片比例和键盘焦点在没有动画时也能用。
- 再把「当前项目」「下一张」「详情已打开」设成明确状态。
- 最后给状态之间加
clip-path、Flip 和文字 reveal，而不是让每个元素各写一段互不相干的 tween。
这是一种很实用的 CSS 艺术路线：画面有设计感，核心仍是可检查的 DOM 和布局，移动端也更容易保留内容本身。
2. Made With GSAP：把效果档案做成可浏览的界面
- Demo：Made With GSAP
- 来源与日期：Awwwards Site of the Day，2026-07-29 4
- 技术栈：GSAP、Vanilla JS；详情页列出 Hero Drag Animation、Cards Hover、Text Explosion Animation、Scroll Animation 和移动端适配。
Awwwards 把 Made With GSAP 定义为一个持续增长的 JavaScript 效果集合，页面元素不是单一的首屏炫技，而是 Hero 拖拽、卡片 hover、文字爆散和滚动动画共同组成的浏览入口 4。项目官网的重点也因此从「展示一个效果」变成「让人能找到效果」10。
可复用的地方是效果库的组织方式。把每个实验视为一个独立卡片，卡片只承担预览和进入详情两个任务；拖拽和文字爆散只放在首屏或选中状态里，避免浏览几十个条目时每个组件都持续占用动画资源。
如果你在做组件展示页，可以把每张卡片拆成三层：静态缩略图、交互预览层、详情入口。预览层在指针进入时启动，离开时停止；移动端没有 hover，就把同一效果绑定到点击或滚动进入。这样「效果」和「目录」不会互相争夺控制权。
3. Infinite Scroll GSAP Gallery：自定义滚动的关键是输入代理
- Demo：Infinite Scroll GSAP Gallery
- 来源与日期：Codrops，2026-07-30 5
- 技术栈：GSAP、Observer、Flip、SplitText、paused timeline、
wrap()；项目源码也由文章给出 11。
这个 Demo 没有把滚轮事件直接绑到每张图片的
transform 上。文章的做法是用 Observer 统一接收 wheel 和 touch，把一个暂停的 timeline 当作滚动位置，再用 wrap() 把 playhead 包成无限循环；每张 slide 通过不同速度系数制造视差，点击后用 Flip 从缩略图变成全屏详情 5。这里最值得抄的是输入层。滚轮、触摸、打开详情、按 Esc 关闭，最后都应该写入同一套状态，而不是各自直接改 DOM。文章还把详情状态写成
closed | opening | open | closing，用来避免快速点击造成多个 tween 互相覆盖 5。一个可以直接试的最小结构是：
input层把 wheel/touch 转成目标时间。playhead层用带缓动的 tween 追上目标时间。render层根据时间计算每张 slide 的位置与 reveal。detail层只处理缩略图到全屏的 Flip 和返回。
这种分层比「每次 pointermove 都改几十个元素」更容易调性能，也更容易加入
prefers-reduced-motion 和键盘操作。文章明确列出了 Enter、Space、Esc 与 tabindex 的可访问性处理，同时把键盘滚动和 reduced motion 列为仍可补强的部分 5。4. Dragonfly Redux：用 ASCII 反馈给 WebGL 页面加一个低成本入口
- Demo：Dragonfly
- 来源与日期：Awwwards Site of the Day，2026-07-22 6
- 技术栈：WebGL、GSAP、Vue.js、Filters and Effects；详情页列出的页面元素包括 Hero Scroll、Portfolio Index、Team Index & Modal 和 Ascii Hover。
Dragonfly 的页面主题是加密机构，但 Awwwards 详情页没有把它只归为一个 3D 首屏，而是同时列出 Hero Scroll、作品索引、团队弹窗和 Ascii Hover。也就是说，WebGL 的氛围效果之外，局部文字反馈仍然承担着导航和探索的任务 6。
Ascii Hover 很适合作为「低成本但有记忆点」的交互样本：指针只进入某个局部区域时，文本或图形反馈发生变化，其他内容保持稳定。它比全屏粒子更适合放在导航、作品卡片或团队头像旁边，不会把用户的注意力从主要信息上抢走。
复用时可以把效果限定在一个组件边界内：组件拥有自己的字符网格或噪声纹理，hover/focus 只改变局部采样或字符密度，离开后回到静态版本。若 WebGL 在低端设备上不可用，DOM 文本仍然要保留，滤镜和字形变化只是增强层。
5. Ridgeline：把重型 3D 放在可编辑页面的一侧
- Demo：Ridgeline / Topography
- 来源与日期：Codrops，2026-07-22 7
- 技术栈：Three.js、React Three Fiber、drei、GSAP ScrollTrigger、Lenis、Blender、glTF、Draco、Cloudflare R2、Webflow。
Ridgeline 的工程取舍很清楚：Webflow 负责结构、样式和 CMS，版本化 JavaScript 负责行为与 3D；场景通过
[data-terrain-scene]、[data-terrain-card] 这样的属性挂到设计好的宿主节点上。案例中的三段山地场景使用真实高程数据，场景随滚动推进，并叠加闪电、雷声和 GPU 驱动的飘雪 7。对普通团队更有参考价值的是它没有为每个页面重建 canvas，而是保持一个持久化 WebGL context，只替换场景数据；滚动进度放在
ref 里，在 useFrame 中读取，避免滚动过程触发 React 重新渲染。案例还用 compileAsync 预编译 shader，减少场景切换时的卡顿 12。如果要在作品集或营销页里复用，可以先保留三条边界：
- CMS 只保存文案、图片和场景标识，不保存渲染状态。
- WebGL 只读取 DOM 属性和滚动进度，不接管页面结构。
- 模型、阴影、抗锯齿和粒子逐项压预算，不要等首屏变慢后再整体删效果。
这套分层让设计师还能在 Webflow 里编辑内容，开发者也不必把 3D 场景和 CMS 绑成一套难以维护的系统。
6. Noomo Showcase：把 3D Hero 变成作品索引的一部分
- Demo：Noomo Showcase
- 来源与日期：Awwwards Site of the Day，2026-08-01 8
- 技术栈：WebGL、GSAP、Three.js、3D、Data Visualization；页面元素包括 Immersive Hero Transition、3D Hero Animation、3D Project Preview、Project Hover、Button Hover 和 Immersive Scroll。
Noomo Showcase 的出发点不是普通 showreel，而是把项目展示做成一条可探索的入口。Awwwards 详情页同时列出 3D Hero、项目 hover、3D 项目预览和沉浸式滚动，说明 3D 并没有被隔离在首屏，而是参与了从「看到项目」到「选择项目」的路径 8。
可复用的结构是「首屏建立空间，卡片完成选择，详情页承担解释」。首屏可以用一个轻量的 3D 过渡吸引注意，项目卡片仍保留标题、缩略图和可点击区域；只有当前项目进入预览时，才加载更重的材质或场景。这样沉浸感服务于索引，而不是把索引藏在一张无法搜索的画布里。
在实现上，GSAP 适合安排进入、选中和退出的时间线，Three.js 负责需要空间连续性的画面；标题、按钮和项目元数据仍然留在 HTML 中。读者想复制的不是 Noomo 的具体模型，而是这种「内容入口先可用，3D 再逐层增强」的顺序。
7. Hearst Exhibit 2026：让纸张卷曲成为展览导航
- Demo：Hearst Exhibit 2026
- 来源与日期：Awwwards Site of the Day，2026-08-02 9
- 技术栈：WebGL、GSAP、滚动、排版、画廊；详情页列出 List and Grid View Gallery 与 Paper Curl WebGL Interaction。
Hearst Exhibit 2026 是 ELLE 与 Esquire 的摄影展网站。Awwwards 详情页把它的两个关键元素写得很具体：列表/网格两种画廊视图，以及纸张卷曲式 WebGL 交互；技术标签还包括 Typography、Gallery、Scrolling 和 GSAP 9。
纸张卷曲有一个值得注意的限制：它只在「打开内容」这个动作上有意义。展览网站已经有摄影作品这个真实内容，卷曲负责把用户从目录带到作品，不需要在每一张图上重复一套复杂的 3D 特效。这个比例关系很适合借鉴到文章封面、产品详情或数字档案馆：先设计清晰的列表/网格入口，再给一次关键转换加材质反馈。
实现时可以让 DOM 保留画廊语义和可访问名称，WebGL 只做纸张的几何变形与光影；加载失败时直接显示静态封面和详情链接。动画越像「页面本来就该这样打开」，越不需要持续占用 GPU。
本期的三个信号
1. 输入开始被当成数据，而不只是事件。 MERSI 用明确状态承接分屏和 Flip，Infinite Scroll GSAP Gallery 把 wheel/touch 变成 timeline 位置，Made With GSAP 则把拖拽、hover 和滚动分配到不同的浏览层。交互的可复用单位从「一个 hover 效果」变成「一个输入如何改变状态」345。
2. WebGL 更常被放在内容路径的关键节点。 Ridgeline 用一个持久化 context 管理多段场景，Noomo 把 3D 用在项目选择，Hearst 用纸张卷曲连接目录与作品，Dragonfly 则保留 ASCII 这样的局部反馈。它们都没有让 GPU 取代标题、导航和内容结构 6789。
3. CSS 仍然适合做第一层的视觉设计。 MERSI 的分屏、排版和图片裁切先由 DOM、CSS 与
clip-path 组成，GSAP 只负责跨状态的连续变化。需要空间感时再上 WebGL，通常比从 shader 开始更容易维护，也更容易给触屏和低端设备留下回退路径 3。如果这期只带走一条实现顺序，可以用它：先写状态图，再写 DOM 和 CSS，最后把 GSAP 或 WebGL 接到确实需要连续运动的那一段。
References
- 1Awwwards 近期站点列表
awwwards.com
- 2Codrops 首页
tympanus.net
- 3
- 4Made With Gsap - Awwwards SOTD
awwwards.com
- 5
- 6Dragonfly Redux - Awwwards SOTD
awwwards.com
- 7
- 8Noomo Showcase - Awwwards SOTD
awwwards.com
- 9Hearst Exhibit 2026 - Awwwards SOTD
awwwards.com
- 10Made With GSAP 官网
madewithgsap.com
- 11Infinite Scroll GSAP Gallery 源码
github.com
- 12Ridgeline 性能方案
tympanus.net
This story was produced automatically by a channel. One sentence is all it takes for Neodrop to keep producing for you.