← 返回业务线:AI 创意建站

本期窗口恢复为常规一周(2026-08-25~09-01)。三个子领域查到确凿更新,均以 GitHub commits/官方发布说明为一手来源核实。vibe coding 建站工作流(Lovable/bolt.new/v0.app)本期因官方 changelog 域名在本轮检索环境被出口拦截,未能核实窗口内是否有新条目,跳过;Motion、GSAP 本期均无新版本。

一、Web 动效技法图鉴:鼠标跟随方形透镜畸变教程

Codrops 于 2026-08-25 发布教程《Building a Mouse-Following Square Lens Effect with Three.js and GLSL》(作者 Tomoyuki Nakata / baqemono),用 Three.js + GLSL 实现一枚跟随鼠标移动的方形”透镜”,透镜区域内产生畸变与 RGB 通道分离效果。

对建站的启发:属于”鼠标交互”类技法的一个具体新样本,透镜/畸变手法适合用作高完成度落地页 hero 区的焦点交互,教程含可直接参考的 shader 实现思路,可补入 Web 动效技法图鉴的鼠标交互条目。

来源:Codrops · Building a Mouse-Following Square Lens Effect with Three.js and GLSL(2026-08-25)

二、动效实现手法与库 / 常用组件:React Bits 本周密集迭代,新增 AeroShards 组件

React Bits(github.com/DavidHDev/react-bits)本窗口提交活跃:08-26 修复 GlowCursor(鼠标跟随光效)噪声效果问题,并新增两个文档组件;08-27~08-28 完成一次”文档改版 + 浅色模式”(docs overhaul + light mode);08-29 修复 Hyperspeed 组件——将已废弃的 THREE.Clock 替换为新写法,跟进 Three.js 上游的弃用变化;08-31 新增 <AeroShards/> 组件,并修复 SpecularButton 的依赖问题。

Motion(motion.dev)本窗口内无新提交、npm 最新版仍为 v13.1.1(发布于 08-20,早于窗口);GSAP npm registry 最新仍为 3.15.0(2026-04-13 发布),均无更新。

对建站的启发:React Bits 是”开箱即用动效组件库”路线的活跃样本,本周新增的 AeroShards 组件可作为组件库选型的新候选;Hyperspeed 修复废弃 THREE.Clock 一事也提醒——凡是基于 Three.js 的动效组件,跟进上游弃用节奏是长期维护里绕不开的一项常规工作,值得写进”常见坑与应对”类内容里。

来源:React Bits Commits(2026-08-26~08-31 区间提交)

三、性能/无障碍/响应式:Safari Technology Preview 251 一次带来一批响应式与程序化动效相关 CSS 新特性

Safari Technology Preview 2512026-08-26 发布,macOS Tahoe / Golden Gate)新增多项 CSS 特性:@supports at-rule(...)(按 at-rule 支持情况做特性检测)、object-view-boxrandom() 函数新增 property-scoped / property-index-scoped 缓存关键字、random-item() 函数、@container 支持逗号分隔的多条件查询、white-space 简写中加入 white-space-trim;本次共包含 200+ bug 修复与 50+ 新特性。

对建站的启发:@container 多条件查询让容器查询式响应式布局可以一次表达更复杂的组合条件,减少嵌套查询;random() / random-item() 则是”程序化随机动效”(例如卡片微小随机偏转、装饰元素随机取色)第一次有了浏览器原生的 CSS 层实现路径,而不必都靠 JS 计算——虽然目前仍是 Safari 技术预览阶段、离生产可用还有一段距离,但值得作为”下一代原生动效技法”的观察名单收录。

来源:WebKit · Safari Technology Preview 251 Release Notes(2026-08-26)

本期未展开(无新料或不硬凑)

  • vibe coding 建站工作流:Lovable(Trust Center、Preview 断线自动重试等)、bolt.new(v1 Agent 退役、Plan Mode)、v0.app 本轮检索到的更新条目日期均集中在 08 月上旬(早于窗口),且三家官方 changelog 域名(docs.lovable.dev / support.bolt.new / v0.app)在本轮检索环境均被出口拦截,无法直接核实窗口内是否另有新条目,暂不纳入。
  • 设计到代码:Figma Code Connect 窗口内无新提交,最新仍为上期已收录的 v2.0.0(08-18)。
  • 视觉风格与「高完成度」做法:本轮检索到多个 Awwwards Site of the Day 候选案例(如 AI in Design Report 2026Sharplink),但 awwwards.com 主站在本轮检索环境被拦截,仅能通过搜索引擎摘要交叉验证,未做到二次独立信源核实,暂不纳入正文。
  • 部署与技术栈:GitHub Pages / Jekyll 官方更新日志(github.blog/changelog)本窗口内条目集中在 Copilot、Issue 标签管理,未见 Pages/Jekyll 专项更新。

参考来源

  1. Codrops:Building a Mouse-Following Square Lens Effect with Three.js and GLSL(2026-08-25)— https://tympanus.net/codrops/2026/08/25/building-a-mouse-following-square-lens-effect-with-three-js-and-glsl/
  2. React Bits Commits(2026-08-26~08-31)— https://github.com/DavidHDev/react-bits/commits/main
  3. WebKit:Safari Technology Preview 251 Release Notes(2026-08-26)— https://webkit.org/blog/18194/release-notes-for-safari-technology-preview-251/