六月前端创意精选：Glass Blob、WebGL 漫画与 GSAP 全家桶

六月上半月，Awwwards 连续几天送出带 Developer Award 的日站，CodePen 趋势榜上 GSAP 和 WebGL 的身影也比以往更密。本期精选 7 个值得拆解的 Demo，分属创意交互、CSS 动效和 WebGL 三个方向。

本期速览

Demo 名称	类型	核心技术	来源
Elva	WebGL + 交互	Three.js · GSAP · Glass Blob	Awwwards SOTD
Ten Years Away	WebGL 叙事	Three.js · GSAP · 分镜翻页	Awwwards Nominee
Serve Robotics	3D 交互叙事	React · Tailwind · Microinteraction	Awwwards SOTD
Crav Burgers	CSS 动效	GSAP · SVG · Next.js	Awwwards SOTD
sakazuki	视觉品牌	版面动画 · 印刷字体	Awwwards SOTD
ScrollTrigger.batch()	GSAP 演示	GSAP ScrollTrigger	CodePen
SandCastle	CSS 艺术	纯 CSS 建模	CodePen

Awwwards 精选

01｜Elva — 玻璃人格与 30 种状态

日期：2026 年 6 月 15 日 SOTD，评分 7.43 / 101

这是一个语音优先的 AI 视频编辑器品牌站，技术栈是 Three.js + GSAP，整站最有意思的地方是「Glass Blob 人格」——一个液态玻璃质感的 AI 助手形象，内置 30 余种行为状态（待命、思考、说话、报错各一套），随用户操作流畅切换。品牌视觉和 UX 融为一体，Jury 创意评分拿到 7.69 / 10，是本轮评分里最高的一项。

从技术角度看，Glass Blob 的状态机设计有一定参考价值：把 UI 状态与 Three.js 着色器动画做绑定，状态切换不经 DOM 操作，直接在 GPU 层完成过渡。这套思路可以平移到 loading 动画、角色情绪表达等场景。

Elva 品牌站 Glass Blob 人格界面截图 — Elva 的 AI 人格形象，液态玻璃材质在 Three.js 中实现 1

02｜Ten Years Away — 可翻阅的 WebGL 漫画

日期：2026 年 5 月 28 日提名，Awwwards 2

Studio375 用这个站子庆祝工作室成立十周年，载体是一本可交互的网页漫画。技术标签：Three.js + GSAP，另加 3D、Scrolling、Storytelling、Transitions、Mouse Trail 5 个分类标签，几乎把网页叙事手法集齐了。

Mouse Trail（鼠标轨迹）是最直觉上有趣的一个点：鼠标在画面上移动时会留下带粒子感的轨迹，轨迹消隐的速度和颜色随漫画章节变换。每一页的翻场动画走的是 GSAP Timeline + Three.js 帧渲染，而不是 CSS 翻转，所以翻页时可以自由定义 3D 形变。

社区评审给出了本轮素材里少见的高分段：15 位投票者中超过半数在创意维度给出 9 以上，3 位给满分 10。

Ten Years Away 交互漫画截图 — Ten Years Away 页面截图，鼠标轨迹特效和 3D 翻页动画同屏呈现 2

03｜Serve Robotics — 机器人品牌站的 3D 微交互

日期：2026 年 6 月 11 日 SOTD，评分 7.3 / 10，Developer Award 7.49 / 103

由 WILD 工作室操刀，这是一个自主配送机器人公司的品牌站。技术栈是 React + Tailwind + Sanity，UI 标签里强调了 Microinteractions 和 Storytelling。

Dev Award 7.49 在本轮入选的几个站子里最高——Animations/Transitions 和 WPO 两项分别拿到 7.80，说明在保持动效细腻的同时做了足够的性能优化（考虑到 3D 素材密度，这不容易）。Hero 区有一段机器人 3D 模型入场动画：机器人从下向上漂浮进入视野，同时光照角度随滚动发生微妙偏移，让模型始终有「前景光正确」的立体感。

这个站子适合作为「品牌站里引入 3D 素材但不失可用性」的参考案例，它在可访问性上拿了 6.80，是 Dev 评分里最弱的一项，值得注意。

04｜Crav Burgers — GSAP 动效全家桶

日期：2026 年 6 月 13 日 SOTD，评分 7.25 / 104

汉堡品牌概念站，技术栈 Next.js + GSAP + SVG。配色只有两个：米色 #f5e3cd 和高饱和红 #f91814，所有动效都在这两个颜色里打转，反而显得统一。

有四个 Elements 值得单独看：Footer 动画（文字随鼠标速度变形拉伸）、404 页面（汉堡散件爆炸式分散）、Loader Animation（食材一层一层堆叠的 loading）、Page Transition（翻书式全屏切换）。每个单独列出来都是可以复用的创意，组合在一起让整站像一个「GSAP 教学样板间」。

开发者评分的 WPO 拿到 7.60，Next.js 本身的 SSR 和代码分割贡献明显。

Crav Burgers 品牌站截图 — Crav Burgers GSAP 全站动效，米白与高饱和红双色体系 4

05｜sakazuki — 日本清酒会员站的印刷质感

日期：2026 年 6 月 14 日 SOTD，评分 7.23 / 105

日本清酒文化全球会员平台，配色只有深红 #C30D23 和米白 #E1D6CE。技术标签里没有 WebGL，走的是 Figma + Adobe Illustrator 的纯平面视觉路线，做的是版面编排动画和摄影质感的图片切换。

这个站子进入精选是因为它代表了另一条路：不靠 3D 或 GPU 特效，单靠精准的字体排版和节奏拉满的页面过渡，同样能拿 SOTD。Awwwards Jury 有委员在 Typography Honors 方向提名了它，可以单独进 sakazuki.io 感受页面里 NFT ART、Team 和 Benefits 三个板块的过渡节奏。

CodePen 精选

06｜GSAP ScrollTrigger.batch() 交互演示

来源：GreenSock 官方账号6

GSAP 官方出的演示 Pen，专门讲 ScrollTrigger.batch() 的用法。这个 API 的作用是让页面上多个独立元素在进入视口时批量触发统一的入场动画，而不是给每个元素单独 bind 一个 trigger——减少的不只是代码量，也是 scroll listener 的数量，性能差异在 100+ 元素的列表页上很明显。

Pen 里用一个图片卡片网格做演示：向下滚动时，每批次最多 3 张卡片同时淡入位移，批次间有 0.2s 的延迟错落。代码量极少，直接可以扒下来用。

콘텐츠 카드를 불러오는 중…

07｜SandCastle — CodePen Challenge 纯 CSS 建模

来源：wolfscot / CodePen Challenge7

这期 CodePen 挑战主题是「沙堡」，wolfscot 交出的是一个完全用 CSS 盒模型堆出来的沙滩城堡：塔楼、垛口、旗帜、阴影，全走 div + border + box-shadow 和 clip-path，零 SVG 零 JavaScript。

CSS 艺术能让人感受到一件事：边界约束本身是一种创意资源。限定只能用 CSS 盒模型，反而逼出了更有趣的造型语法——斜面用 border 的颜色差做，透视感用 box-shadow 叠出来。适合当 CSS 基础教学素材。