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

本期按”真有料”筛选。GSAP、Motion 改名等属过去 12 个月的既成事实，仅在有新版本/新特性时作背景带过；无新料的子领域直接标注。所有工具/版本/特性均附官方或一手来源。

一、Web 动效技法与库

1. 原生 Web 平台：动效正在”下沉”到浏览器（本期最值得关注）

这是当前对”高完成度创意站”影响最大、又最容易被忽视的方向——很多过去要靠 JS 库做的效果，现在浏览器原生可跑、且跨浏览器就绪。

  • 同源 View Transitions 已成 Baseline（2025-10-14）：随 Firefox 144 补齐，document.startViewTransition() 与 view-transition-name 在 Chrome / Safari / Firefox 三大引擎均可用；同时落地 view-transition-class、view-transition-name: match-element。注意 Firefox 首版尚不支持 view transition types，做渐进增强建议用 transitionHelper 兜底。跨文档（多页 MPA）过渡 Firefox 仍缺席。 来源：web.dev
  • :active-view-transition 伪类 2026-01 成 Baseline Newly available，可在过渡进行中专门给根元素上样式。 来源：web.dev Baseline digest
  • Scroll-driven animations（animation-timeline: scroll() / view()）：Chrome/Edge 115+、Safari 26、Opera 101+ 已完整支持；Firefox 稳定版仍在 layout.css.scroll-driven-animations.enabled flag 后（Nightly 默认开），因此严格意义上尚未跨浏览器 Baseline，但已是 Interop 2026 明确优先项。做落地页滚动叙事可上，但对 Firefox 用户要留 fallback（或 @supports (animation-timeline: scroll())）。 来源：MDN · caniuse

方法提示：入场/滚动揭示类动效，优先评估 scroll-driven CSS + View Transitions 能否替掉 IntersectionObserver / 手写 JS，减重且更顺滑；对 Firefox 与低端设备保留降级路径。

2. Motion（原 Framer Motion）：animateView 从 alpha 转正

Motion 本期把 animateView 由 alpha 提升进主库（v12.41.0，2026-06-23），这是它的”视图协调动画”能力，可按 DOM 层级自动分组图层、做 crop/border-radius 等过渡，并新增 .add()（CSS 选择器/元素解析）、.new() / .old() / .layout() / .class() 等配置方法。随后 v12.42.x（至 2026-07-01 的 12.42.2）持续修图层分组、auto-crop 的 aspect-ratio 处理与 border-radius 过渡。 （背景：Framer Motion 已于 2025 年独立更名 Motion，包名 motion、导入路径 motion/react。） 来源：Motion changelog · 升级指南

3. React Bits：轻量、可直接改源码的动效组件集

开源动效组件库，官网标注 130+ 组件且每周增长，每个组件提供 4 种变体：JS-CSS / JS-TW / TS-CSS / TS-TW，覆盖文本动效（BlurText、SplitText、GradientText、ShinyText、TypewriterText 等）、UI 元素与背景。定位是”低依赖、可 tree-shake、可直接编辑源码”，适合作为创意站的动效积木或参考实现。 来源：reactbits.dev · 仓库

⚠️ 待核查：坊间称其 roadmap 将把 prefers-reduced-motion 作为一等特性内建，官方文档本期未见明确说明，暂不作为已交付能力引用。

4. GSAP：免费化已成定局，本期为维护迭代

GSAP 的里程碑是 3.13（2025-04-29）：在 Webflow 赞助下全部工具与全部付费插件（SplitText、MorphSVG 等）100% 免费、含商用；同版 SplitText 完整重写（体积减半、新增无障碍 aria-label/aria-hidden、响应式重新分行 autoSplit/onSplit()）。这是一年多前的事，非本期新闻，但对”要不要引入 GSAP”的决策仍是关键背景。当前 npm 最新为 3.15.0（约 2026-04），属维护/小版本迭代。 来源：GSAP 3.13 发布 · npm

二、vibe coding / AI 建站工具

本期主线：这些工具集体从”生成组件/静态页”转向”full-stack + Git/PR + 部署的生产级 agent”。

1. v0（Vercel）

  • 更名 v0.dev → v0.app（2026-01），并推出”new v0”：sandbox 运行时、原生 GitHub 分支与 PR、数据库集成、token 计费。
  • 现可在 v0 内构建完整 Next.js 应用（API Routes、Server Actions），配合 Supabase 直接做 CRUD；Git 面板支持”每个 chat 一个分支 / 对 main 开 PR / 合并即部署”。定位从”组件生成器”变为”full-stack 应用构建器”。 来源：new v0 · v0 generative UI

2. bolt.new（StackBlitz）

  • 直接导入 Figma 设计转 React 代码；构建性能约 +40%。
  • 模型升级至 Claude Opus 4.6（2026-02-05）/ Sonnet 4.6（2026-02-17），Sonnet 4.6 现为 Bolt 默认模型；agent 收敛为 Standard / Max 两档（不再逐一选模型）。
  • 支持接入 MCP 服务器带入外部上下文；聊天框内 AI 图像生成（透明背景 + 自动 WebP）；Prompt Library；部署按钮 Deploy → Publish 并给出发布状态可见性。 来源：bolt 发布说明 · Sonnet 4.6 in Bolt

3. Lovable

  • Lovable Cloud（2025-10 起）：内建数据库、鉴权、文件存储，不再必须手接 Supabase。
  • Themes：集中管理色彩/字体/间距 + 实时预览；图像生成自 2026-03 支持透明背景（利于图标/UI 元素）。
  • 2026-05-13 起新项目默认 SSR，底座换 TanStack Start；2026-03-19 宣布从”建 App”扩展到数据分析/BI/演示/营销等通用任务。 来源：Lovable 博客

4. Claude Artifacts（Anthropic）

  • Live Artifacts：持久存储（每个 artifact 上限 20MB）、可从 artifact 内直接调用 Claude API做推理、支持 MCP 对接外部服务、重开时以最新数据刷新——即”在你搭的界面里内嵌 Claude 作引擎”。
  • 侧栏新增独立 Artifacts 空间（含 Anthropic 精选，可创建/remix/整理）。
  • Claude Code Artifacts（团队/企业）：把一次 Claude Code 会话变成可实时共享、随执行自动更新的交互网页 URL。 来源：Build Artifacts · Artifacts in Claude Code

三、design-to-code / Figma → 前端

Figma Config 2026（2026-06-24）：设计、代码、动效、AI 合流到同一文件

  • Code Layers：画布上把任意设计层一键（或用 prompt）变成可交互的代码层，可与设计层双向来回转换。2026-07 起分批推出，早期访问需 waitlist。
  • Figma Motion：内建原生时间线 + 关键帧/预设的动效工具；组件动画可跨屏跨文件自动传播；可导出 CSS / JSON / React 代码 / MP4 / WebM / Animated SVG / GIF，且 MCP 兼容（可把某一动画帧直接交给编码 agent 实现）。对”动效落地页从设计到代码”是本期最实的一块。
  • Shader Fills & Effects：用自然语言或参考图生成自定义 shader（交互式 shader “coming soon”）。
  • Figma Agent 增强：自定义 skills、连接 Notion/Slack/GitHub 等外部工具、附件带上下文。 来源：Config 2026 recap · TechCrunch 报道

Figma Make：转正 + 打通本地代码

  • Figma Make 已脱离 beta 进入 GA（Make、Edit Image、Boost Resolution 一并转正；但”发布 Make 文件”仍为 beta）。
  • Figma Make on local code：2026-05-28 起 limited beta——连接自有代码库后，可直接做可视化编辑（选元素、改布局/颜色/字体/尺寸）并从 Make 里发起 PR；beta 期间不消耗额度。 来源：Figma Make GA · Make on local code

四、视觉风格与”高完成度”做法

本期无独立的”新风格潮流”硬料可靠引用，故不硬凑趋势；仅沉淀两条与上文强相关、可验证的工程做法：

  1. prefers-reduced-motion 是动效站的默认底线。无论上原生 View Transitions / scroll-driven，还是 Motion/GSAP，都应在 @media (prefers-reduced-motion: reduce) 下弱化或关闭非必要动效——这是 CSS 标准媒体特性，浏览器普遍支持。 来源：MDN
  2. 性能路径优先选”浏览器代劳”：滚动叙事优先 scroll-driven CSS（合成线程执行，避免主线程抖动）而非手写 scroll 监听；页面/状态切换优先 View Transitions 而非手搓 crossfade。二者都要配 @supports / helper 做降级。

等距拟物 / 线稿动效等”高完成度”手法属我们自己的方法沉淀（见 VIBE 工具箱与站内动效图鉴），非本期外部新闻，此处不展开。

参考来源

  • Motion 更新日志（animateView 转正、12.42.x）：https://motion.dev/changelog
  • Motion 升级指南（改名 / 导入路径）：https://motion.dev/docs/react-upgrade-guide
  • GSAP 3.13 发布（免费化 + SplitText 重写）：https://gsap.com/blog/3-13/
  • GSAP npm（当前 3.15.0）：https://www.npmjs.com/package/gsap
  • React Bits 官网：https://reactbits.dev/ · 仓库：https://github.com/DavidHDev/react-bits
  • 同源 View Transitions 成 Baseline：https://web.dev/blog/same-document-view-transitions-are-now-baseline-newly-available
  • :active-view-transition Baseline（2026-01）：https://web.dev/blog/baseline-digest-jan-2026
  • Scroll-driven animations（MDN）：https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animations · 支持表：https://caniuse.com/mdn-css_properties_animation-timeline_scroll
  • prefers-reduced-motion（MDN）：https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
  • v0 new v0：https://vercel.com/blog/introducing-the-new-v0
  • bolt.new 发布说明：https://support.bolt.new/release-notes · Sonnet 4.6 in Bolt：https://bolt.new/blog/sonnet-4.6-in-bolt
  • Lovable 博客：https://lovable.dev/blog
  • Claude Artifacts：https://claude.com/blog/build-artifacts · https://claude.com/blog/artifacts-in-claude-code
  • Figma Config 2026 recap：https://www.figma.com/blog/config-2026-recap/ · TechCrunch：https://techcrunch.com/2026/06/24/figma-adds-code-layers-support-for-animations-more-ai-features-in-new-update/
  • Figma Make GA：https://www.figma.com/blog/figma-make-general-availability/ · Make on local code：https://www.figma.com/blog/figma-make-now-on-your-local-code/
知识库创意建站前端动效