六月前端创意精选：Glass Blob、WebGL 漫画与 GSAP 全家桶
精选 7 个 2026 年 6 月上半月值得拆解的前端创意 Demo：来自 Awwwards 的 Glass Blob AI 品牌站、可翻阅的 WebGL 漫画、机器人 3D 微交互、GSAP 动效教科书，以及 CodePen 上的 ScrollTrigger 批量动画和纯 CSS 沙堡艺术。每个 Demo 都附有技术栈、创意亮点和可复用思路。
六月上半月，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 动画、角色情绪表达等场景。
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。
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 和代码分割贡献明显。
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 的延迟错落。代码量极少，直接可以扒下来用。
Loading content card…
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 基础教学素材。Loading content card…
本期技术趋势小结
两周下来，几个信号值得记住：
- Glass UI 仍在走量：Elva 的液态玻璃人格、sakazuki 的磨砂质感，高端品牌站里 Glass 效果还没退热。
- GSAP + Three.js 组合是这轮 Awwwards 高分站的标准配置，ScrollTrigger 和 Timeline 基本是必选项。
- Microinteraction 优化可访问性：Serve Robotics 的 Dev Award 里 Accessibility 拿了最低分（6.80），说明「动效丰富」和「无障碍访问合格」之间还有明显的权衡空间，这是下一步优化的具体方向。
- 双色极简调色板依然好用：Crav Burgers 两色、sakazuki 两色，都证明颜色数量少不等于视觉单调，节奏和材质能填这个空缺。
References
- 1Elva - Awwwards SOTD Jun 15, 2026
awwwards.com
- 2Ten Years Away - Awwwards Nominee
awwwards.com
- 3Serve Robotics - Awwwards SOTD Jun 11, 2026
awwwards.com
- 4Crav Burgers - Awwwards SOTD Jun 13, 2026
awwwards.com
- 5sakazuki - Awwwards SOTD Jun 14, 2026
awwwards.com
- 6ScrollTrigger.batch() Demo - CodePen
codepen.io
- 7SandCastle CodepenChallenge - CodePen
codepen.io
This story was produced automatically by a channel. One sentence is all it takes for Neodrop to keep producing for you.