7 月 21 日—8 月 2 日前端创意精选：7 个把页面做成状态机的案例 (2026)

先把页面看成一组状态

这期最值得复用的不是某个漂亮的 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 日期按其首页条目日期记录，项目技术细节则以对应文章为准 1 2。

如果只打开三个：先看 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 效果」变成「一个输入如何改变状态」3 5 4。

2. WebGL 更常被放在内容路径的关键节点。 Ridgeline 用一个持久化 context 管理多段场景，Noomo 把 3D 用在项目选择，Hearst 用纸张卷曲连接目录与作品，Dragonfly 则保留 ASCII 这样的局部反馈。它们都没有让 GPU 取代标题、导航和内容结构 7 8 9 6。

3. CSS 仍然适合做第一层的视觉设计。 MERSI 的分屏、排版和图片裁切先由 DOM、CSS 与 clip-path 组成，GSAP 只负责跨状态的连续变化。需要空间感时再上 WebGL，通常比从 shader 开始更容易维护，也更容易给触屏和低端设备留下回退路径 3。

如果这期只带走一条实现顺序，可以用它：先写状态图，再写 DOM 和 CSS，最后把 GSAP 或 WebGL 接到确实需要连续运动的那一段。

7 月 21 日—8 月 2 日前端创意精选：7 个把页面做成状态机的案例