7 月中旬前端创意精选：WebGL 空间、GSAP 状态与 CSS 反馈
精选 2026 年 7 月 14 日至 20 日的 7 个前端创意 Demo，拆解 WebGL、Three.js、GSAP、CSS 和 Pointer Events 如何各自承担空间、时间线与局部反馈。
先看本期结论
7 月 14 日至 20 日的新增样本里，WebGL 和 GSAP 仍然常被放在一起，但它们各自承担的任务更清楚：WebGL 负责空间感和材质记忆，GSAP 负责时间线与状态切换，CSS 和 SVG 则把局部反馈压在较低的运行成本上。本期选 7 个 Demo，5 个来自 Awwwards，2 个来自 7 月 14 日更新的 FreeFrontend 条目；Awwwards 的日期按详情页的 SOTD 或 Nominee 日期记录，FreeFrontend 的日期指条目所在集合的页面更新日期，不等同于 Demo 首次发布日。
如果只想先打开 3 个：想看 WebGL 如何服务叙事，先看 IZANAMI；想拆产品站的 3D Hero 和配置入口，看 CoffeeTech；想找一个能直接改进微交互的轻量样本，打开 Interactive Touch Hover Grid on GSAP。
7 个 Demo 一屏扫完
| Demo | 来源与日期 | 核心技术栈 | 先看什么 |
|---|---|---|---|
| House of Honey | Awwwards SOTD，2026-07-14 1 | Next.js、Sanity、Motion、Microinteractions | Spaces Grid 如何把空间案例做成可浏览的内容系统 |
| RISK | Awwwards SOTD，2026-07-15 2 | WebGL、Webflow、Figma、Transitions、Infinite Scroll | 横向布局、作品流与滤镜怎样共同服务影视作品展示 |
| CoffeeTech® | Awwwards SOTD，2026-07-16 3 | GSAP、Webflow、JavaScript、3D、360 | 3D Hero、Catalog 和 Product Page 如何接成一个产品浏览路径 |
| MIU MIU A House that we shaped | Awwwards Nominee，2026-07-17 4 | WebGL、Three.js、Fullscreen、Storytelling | 颜色、视角和物件交互如何组织一间可探索的数字房屋 |
| IZANAMI | Awwwards SOTD，2026-07-18 5 | WebGL、GSAP、Figma、Parallax、Fluid | sticky、滚动、流体和转场怎样构成统一的页面节拍 |
| CSS Hyper-Realistic Animated Glowing Bell | FreeFrontend CSS Animations，页面更新 2026-07-14 6 | HTML、CSS、clip-path、box-shadow | 纯 CSS 怎样把一个 Toggle 做出体积光和层次感 |
| Interactive Touch Hover Grid on GSAP | FreeFrontend CSS Grid，页面更新 2026-07-14 7 | HTML、CSS、JavaScript、GSAP、Tweakpane | Pointer Events API 如何补上触屏设备的 hover 反馈 |
本期精选 7 个 Demo
1. House of Honey：把空间案例做成可游览的内容系统
- Demo：House of Honey
- 来源与日期：Awwwards Site of the Day，2026-07-14
- 技术栈：Next.js、Sanity、Motion、Microinteractions、Typography
House of Honey 的定位是空间设计工作室，Awwwards 详情页把它的亮点拆成 Spaces Grid、Mobile、Themes 和 Contact，技术标签包括 Next.js、Sanity、Motion 与 Microinteractions；页面描述则强调用编辑式布局和流动交互呈现空间故事 1。
可复用思路是先把作品组织成网格，再让网格承担筛选和浏览，而不是给每个案例单独做一套动效。CMS 负责内容和分类，前端只需要围绕卡片进入、切换主题、移动端滚动和联系入口建立几种明确状态。这样做作品集时，新增案例不会迫使你重写整页动画。
2. RISK：横向作品流里藏着一套 WebGL 叙事
- Demo：RISK
- 来源与日期：Awwwards Site of the Day，2026-07-15
- 技术栈：WebGL、Webflow、Figma、Transitions、Infinite Scroll、Filters and Effects
RISK 是一间后期制作工作室。Awwwards 给出的页面元素包括 Slider、Loader、Works、404 和 About，技术标签则同时列出横向布局、无限滚动、转场、滤镜效果和 WebGL；详情页记录的 SOTD 综合分是 7.31/10 2。
这里更值得拆的是内容流的分工。横向滚动适合让作品像胶片一样连续出现，WebGL 负责画面质感和空间转场，作品详情仍然需要回到可读的文本和清晰的入口。实现时可以先用 CSS scroll-snap 或一个普通横向容器完成结构，再把 WebGL 放在首屏和作品切换的关键节点，别让整个作品列表都变成一张无法搜索的画布。
3. CoffeeTech®：3D Hero 不只是展示柜
- Demo：CoffeeTech®
- 来源与日期：Awwwards Site of the Day，2026-07-16
- 技术栈：GSAP、Webflow、JavaScript、3D、360、Transitions
CoffeeTech® 做商业、门店和实验室烘焙机。Awwwards 详情页列出的元素有 Interactive Components、Catalog、About Page、3D HERO、Page Transition、Product Page 和 Technology Mask，技术标签包括 GSAP、Webflow、JavaScript、3D 与 360；该页面的 SOTD 综合分为 7.18/10 3。
产品站最容易把 3D Hero 做成一件不会说话的展品。CoffeeTech 的拆法更接近真实电商或工业产品页：首屏先建立材质和体积，Catalog 负责选型号，Product Page 承接具体信息，Technology Mask 再解释内部结构。复用时可以让 GSAP 只管理「展示、选择、解释」之间的时间线，产品参数和购买动作留在正常 DOM 里，动画就不会抢走页面的任务。
4. MIU MIU A House that we shaped：用物件交互搭出数字房屋
- Demo：MIU MIU A House that we shaped
- 来源与日期：Awwwards Nominee，2026-07-17
- 技术栈：WebGL、Three.js、Fullscreen、Storytelling、Colorful
这个项目的入口文案是「Explore the house and interact with the objects to discover the new Miu Miu Bags collection」。Awwwards 详情页列出了 In and Out transition、Outside view transition、Colors interaction、Viewmaster interaction、Phone interaction 与 Matelassé interaction，技术标签包括 WebGL 和 Three.js 4。
它给产品展示页的启发不是把所有物件都建成 3D，而是给每个物件规定一个动作和一个发现结果：转视角、换颜色、靠近细节，最后回到商品信息。实现这类体验时，先用状态图写清楚「用户做了什么，画面改变什么，下一步能去哪里」，再决定哪些状态交给 Three.js，哪些状态用 HTML 面板完成。否则沉浸感很快会变成迷路。
5. IZANAMI：把 sticky、流体和转场放进同一条节拍
- Demo：IZANAMI
- 来源与日期：Awwwards Site of the Day，2026-07-18
- 技术栈：WebGL、GSAP、Figma、Scrolling、Parallax、Fluid、Transitions
IZANAMI 的主题围绕 School、Craft 和 Retreat 展开。Awwwards 详情页把 navigation、sticky、scrolling、parallax、transition 和 fluid 列为页面亮点，技术标签包括 WebGL、GSAP 与 Figma；该页面记录的 SOTD 综合分为 7.19/10 5。
这类页面最容易出现的问题是每段都很酷，但段与段之间没有关系。IZANAMI 值得观察的是它把导航固定、滚动推进、视差、流体变化和页面转场当成一套状态系统。复用时可以先建立一个共享的进度值：滚动进度控制背景、文字和 WebGL 相机，导航只负责跳到区间，GSAP 负责把不同属性的缓动统一起来。这样局部效果不会各自抢时间线。
6. CSS Hyper-Realistic Animated Glowing Bell：纯 CSS 的体积光练习
- Demo 入口：FreeFrontend 条目，代码与作者页：Rafa on CodePen
- 来源与日期：FreeFrontend CSS Animations，页面更新 2026-07-14
- 技术栈：HTML、CSS、clip-path、box-shadow、CSS custom properties
FreeFrontend 对这个案例的描述是：用分层渐变、定制 clip-path 和动态 box-shadow 做出带体积光的铃铛，点击 Toggle 后通过 sibling selectors 切换光束、旋转光线和按钮背光；条目标注为 Advanced，并列出 Volumetric Shading、Interactive Toggle、Ray Traced Conics 与 Grain Overlay 等特征 6。
它适合拿来研究「少量状态，多个 CSS 层响应」的写法。主体、光晕、体积光和按钮不需要每一层都由 JavaScript 逐帧修改，可以用一个 active 类把状态传到兄弟元素，再让不同层分别改变 opacity、filter、box-shadow 和 animation-play-state。产品里不必复刻铃铛，通知按钮、支付成功、设备唤醒都能用同样的结构。
7. Interactive Touch Hover Grid on GSAP：把 hover 逻辑补到触屏
- Demo：Interactive Touch Hover Grid on GSAP
- 来源与日期：FreeFrontend CSS Grid，页面更新 2026-07-14
- 技术栈：HTML、CSS、JavaScript、GSAP、GSAP Draggable、Tweakpane
这个 Grid sandbox 动态生成由「+」组成的响应式网格，鼠标经过时让单元格旋转、变亮和淡出；FreeFrontend 还特别记录了 Pointer Events API fallback，在触屏上用
elementFromPoint 追踪触点，并用 Tweakpane 调整网格数量和主题。条目要求 GSAP、GSAP Draggable 和 Tweakpane 7。可复用的关键不在「+」号，而在输入层的降级。桌面端有 hover 时直接使用
:hover，触屏端则把 pointermove 转成当前单元格的 data attribute，再沿用同一套 CSS 状态样式。这样不用为手机另写一套视觉逻辑，也能避免把 hover 当成移动端默认能力。需要调参时，Tweakpane 适合开发阶段使用，发布版本则可以把配置收进 CSS custom properties 或 URL 参数。这 7 个样本共同说明了什么
本期的共同点不是都在用 WebGL，也不是 GSAP 出现得更多，而是效果开始服从状态边界：House of Honey 用网格组织内容，RISK 用作品流组织观看，CoffeeTech 用产品层级组织选择，MIU MIU 用物件动作组织发现，IZANAMI 用进度值组织页面节拍。两个 FreeFrontend 案例则把同一件事压缩到 CSS 状态和 pointer 输入里。
落到实际项目，可以先画三层：DOM 负责内容和行动，CSS 负责局部反馈，WebGL 或 GSAP 只接管确实需要空间或时间连续性的部分。先把状态和回退路径写出来，再决定是否上 3D，通常比从一个漂亮的 shader 开始更省时间。
References
- 1House of Honey - Awwwards SOTD
awwwards.com
- 2RISK - Awwwards SOTD
awwwards.com
- 3CoffeeTech® - Awwwards SOTD
awwwards.com
- 4
- 5IZANAMI - Awwwards SOTD
awwwards.com
- 6100+ CSS Animations: Free Examples & Code Snippets
freefrontend.com
- 7180+ CSS Grid Examples
freefrontend.com
This story was produced automatically by a channel. One sentence is all it takes for Neodrop to keep producing for you.