7 月上旬前端创意精选：WebGL 调度、GSAP 叙事与 CSS Mask Glitch (2026)

6/30 之后的 Awwwards SOTD 很集中地回到两个方向：一边是 WebGL/Three.js/GSAP 继续进入品牌站、AI 工具站和产品发布页，另一边是 FreeFrontend 在 7/1 更新了两个很适合直接拆代码的 CSS/GSAP 小 Demo。本期选 8 个样本，时间窗按 2026-06-30 至 2026-07-13 统计；上一期已经覆盖的 6 月下旬项目不重复收录。

先看本期趋势

Awwwards 的 DEV 标签更偏「动画工程」而不是单纯堆技术名。Vectr、Wembi、Radian、MONOLOG、Hildén & Kaira、NRG 都在 6/30 之后进入 SOTD 列表，其中 Vectr 明确带 WebGL、Three.js、Astro，MONOLOG 带 GSAP、Three.js、Webflow，Wembi 和 Radian 则把 GSAP 放在产品叙事与导航交互里 1 2 3。
滚动仍是主控轴，但表达方式更细。Radian 的「Homepage hero section on scroll」、Hildén & Kaira 的「Work Page Infinite Scroll and Interaction」、Wembi 的导航与菜单视频，都说明滚动不只是页面前进，而是产品解释、作品浏览和状态切换的节拍器 4 5 6。
CSS 小 Demo 的价值在「低依赖、可移植」。CSS Mask Glitch Image Effect 不靠 JS 做切片错位，Interactive Cicada Genomics Landing Page 则把 SVG、GSAP ScrollTrigger、MotionPathPlugin、DrawSVGPlugin 组合成完整叙事页 7。

8 个 Demo 一屏扫完

Demo	来源与日期	核心技术栈	先看什么
Vectr	Awwwards SOTD，2026-07-11 2	WebGL、Three.js、Astro、3D、Transitions	AI staffing 站点如何用页面转场和滚动动画表达「关键时刻调度」
Wembi	Awwwards SOTD，2026-07-01 6	GSAP、Nuxt.js、Craft CMS	虚拟孪生产品如何把导航、菜单和鼠标交互做成统一系统
Radian	Awwwards SOTD，2026-07-04 4	GSAP、BARBA.js、Webflow、Configurator	电动越野摩托发布页如何把滚动叙事接到配置器
MONOLOG	Awwwards SOTD，2026-07-06 3	GSAP、Three.js、Webflow	设计机构站如何用排版、作品廊和 CTA 做低色彩叙事
Hildén & Kaira	Awwwards SOTD，2026-07-05 5	GSAP、Contentful、Webflow	社交内容机构站如何组织 preloader、内容滑动和无限作品流
NRG Build Your Data Center	Awwwards SOTD，2026-06-30 8	HTML5、JavaScript、Figma、Scroll、Microinteractions	B2B 能源主题如何用节点、虚拟游览和阶段滚动降低抽象感
CSS Mask Glitch Image Effect	FreeFrontend，2026-07-01 条目 7	HTML、CSS、mask-composite、keyframes	用纯 CSS mask 切片做高性能 glitch 转场
Interactive Cicada Genomics Landing Page	FreeFrontend，2026-07-01 条目 7	HTML、Sass、GSAP ScrollTrigger、MotionPathPlugin、DrawSVGPlugin	把 SVG 线条、路径运动和分屏文案连成完整科学叙事

本期精选 8 个 Demo

1. Vectr：WebGL 做「故障调度」的空间感

Demo：Vectr
来源与日期：Awwwards Site of the Day，2026-07-11
技术栈：WebGL、Three.js、Astro、3D、Transitions

Vectr 的一句描述是「AI-driven precision staffing for critical outages」，Awwwards 给出的标签包括 WebGL、Three.js、Astro、3D、Transitions 和 Storytelling；页面元素里还单独列出 Page transition 与 Scroll animations 2。

可复用思路：这类技术服务站最怕概念空。Vectr 的方向可以拆成「先用 3D/转场建立压力场，再用滚动段落解释流程」。如果你要做 B2B AI 工具页，不必把每个流程节点都 3D 化；让 WebGL 承担首屏记忆点，后续信息仍用清晰 DOM 组件承接。

2. Wembi：把虚拟孪生产品讲成一组导航状态

Demo：Wembi
来源与日期：Awwwards Site of the Day，2026-07-01
技术栈：GSAP、Nuxt.js、Craft CMS、Navigation、Mouse Interaction

Wembi 的产品描述是「为设备、机器或数字系统创建 virtual twin」，Awwwards 拆出的元素包括 Wembi Navigation、Wembi Mobile、Wembi Menu 和 Wembi Interaction；技术标签里有 GSAP、Nuxt.js 与 Craft CMS 6。

可复用思路：复杂产品页不一定先写大段解释。可以把产品能力拆进导航、菜单和鼠标反馈里：用户移动时看到系统响应，点击时看到层级展开，滚动时看到概念逐步被映射到具体场景。GSAP 负责这些状态之间的节奏，框架本身反而退到后面。

3. Radian：滚动叙事接到产品配置器

Demo：Radian
来源与日期：Awwwards Site of the Day，2026-07-04
技术栈：GSAP、BARBA.js、Webflow、Configurator、Scroll sequence

Radian 是一辆 electric off-road motorbike 的发布体验，Awwwards 元素拆解里同时出现 Configurator、On scroll reveal、On scroll sequence with hotspots 和 Homepage hero section on scroll；技术标签包括 GSAP、BARBA.js、Webflow 4。

可复用思路：产品站可以把「看故事」和「做选择」连起来。首屏用滚动展示产品姿态，第二层用 hotspots 解释零件，最后把用户带到配置器。这里的关键不是动画多，而是每段动画都要把用户推进到下一个可行动状态。

4. MONOLOG：低色彩机构站的排版节奏

Demo：MONOLOG
来源与日期：Awwwards Site of the Day，2026-07-06
技术栈：GSAP、Three.js、Webflow、Typography、Gallery

MONOLOG 的页面只记录了两种主色，Awwwards 元素包括 Homepage Storytelling、Statement-Driven Hero、Works Gallery、Process Section 和 Cinematic Call To Action；技术标签里有 GSAP、Three.js、Webflow 3。

可复用思路：如果色彩克制，节奏就要更准。机构站可以用大字号声明控制第一眼，用作品廊承担信任，用 process section 解释方法，再把 CTA 做成一次视觉收束。GSAP 在这里适合处理段落入场和 CTA 节拍，Three.js 不必抢走文字的主角位置。

5. Hildén & Kaira：社交内容机构的「内容流」交互

Demo：Hildén & Kaira
来源与日期：Awwwards Site of the Day，2026-07-05
技术栈：GSAP、Contentful、Webflow、Microinteractions、Infinite Scroll

Hildén & Kaira 是 Helsinki-based social content agency，Awwwards 拆出的亮点包括 Preloader Hero Animation、Client Deck Social Content Slider、Work Page Infinite Scroll and Interaction；技术标签包括 GSAP、Contentful、Webflow 与 Microinteractions 5。

可复用思路：内容机构站的难点是作品很多但注意力有限。可以把客户内容做成可滑动 deck，把作品页做成无限流，但每个入口只显示一个明确动作：滑、点、滚，不同时塞满滤镜和 hover。CMS 管内容，GSAP 管运动，Webflow 管落地速度。

6. NRG Build Your Data Center：B2B 抽象主题的节点化叙事

Demo：NRG | Build Your Data Center
来源与日期：Awwwards Site of the Day，2026-06-30
技术栈：HTML5、JavaScript、Figma、Scrolling、Microinteractions

NRG 这个项目讲的是「Powering the data centers that support what's next」，Awwwards 元素里有 Homepage、Phase 04 Scroll through、Nodes 和 Virtual Tour；技术标签包括 HTML5、JavaScript、Figma、Scrolling、Microinteractions 8。

可复用思路：B2B 能源、基础设施、云计算这类主题都容易写得很硬。NRG 的拆法是把抽象系统变成节点、阶段和虚拟游览。前端实现时，可以先做一个阶段式滚动骨架，再把节点作为交互锚点；不要一开始就做全景 3D，否则内容还没清楚，性能预算先被吃掉。

7. CSS Mask Glitch Image Effect：纯 CSS 切片错位

Demo 入口见下方 CodePen 嵌入
来源与日期：FreeFrontend CSS Animations，2026-07-01 条目
技术栈：HTML、CSS、mask-composite、-webkit-mask-position、keyframes

FreeFrontend 描述这个 Demo 使用 CSS custom properties、-webkit-mask-position 坐标和 mask-composite: exclude / xor，把图片切成动态位移的网格切片；动画由 keyframes 推动，不依赖重 JS 7。

Loading content card…

可复用思路：glitch 效果常见问题是每次都上 canvas 或视频。这个案例更适合普通营销页：图片仍是普通元素，切片靠 mask，位移靠关键帧。落地时要注意浏览器支持，尤其是 mask-composite 在不同内核里的写法差异；把它作为 hover、转场或 hero 的短动作，不要全站长时间循环。

8. Interactive Cicada Genomics Landing Page：GSAP 做科学叙事页

Demo 入口见下方 CodePen 嵌入
来源与日期：FreeFrontend CSS Animations，2026-07-01 条目
技术栈：HTML、Sass、GSAP ScrollTrigger、Observer、SplitText、DrawSVGPlugin、MotionPathPlugin、CustomEase

Interactive Cicada Genomics Landing Page 用 GSAP ScrollTrigger 与 MotionPathPlugin，把文本 slide、树状图、蝴蝶翅膀、SVG stroke drawing 和声音氛围串成一条视觉故事线；FreeFrontend 标注它是 Advanced 难度 7。

Loading content card…

可复用思路：这类页面的核心不是「把所有 GSAP 插件都用上」，而是先画叙事路径。哪一段是文字进入、哪一段是图形变形、哪一段是路径运动，先在时间线上排清楚，再逐步加插件。否则动画能跑，故事却会散。

如果只挑 3 个先拆

想练 WebGL/Three.js：先拆 Vectr。它把 WebGL、Three.js 和 Astro 放进一个 AI 服务站，而不是孤立做一个背景特效。
想做产品发布页：看 Radian。滚动、热点、配置器三段衔接，比单独做一个酷炫 hero 更接近真实业务。
想做可复用 CSS/GSAP 小组件：从 CSS Mask Glitch 和 Cicada Genomics 开始。前者适合低依赖视觉转场，后者适合练完整滚动叙事。

本期最明显的信号是：创意前端正在从「一个效果」变成「一套状态系统」。WebGL 管空间记忆点，GSAP 管时间线，CSS mask 和 transition 管轻量局部反馈，内容和行动入口仍然要回到可读的 DOM。分层做清楚，Demo 才更容易从观赏品变成可复用方案。

7 月上旬前端创意精选：WebGL 调度、GSAP 叙事与 CSS Mask Glitch