Blog 现代化改造技术选型——GSAP + Astro 岛屿 + Tailwind Typography
基于 Astro 6 + React 19 + Tailwind CSS 4 技术栈的博客现代化方案:GSAP ScrollTrigger 集成、Markdown 阅读体验优化、响应式 Bento 布局、CWV 友好动效规范——107 个研究 agent 三票对抗验证的结论。
AVW-10:AI Skills 调研——Web Presentation / 动画 / 视频生成的 Agent 技能生态
调研 60+ 可视化工具的 Agent Skill 现状:9 组已有可用 Skill,36+ 仍为空白。Web Presentation 方向竞争最激烈——6 个工具各有侧重(录屏视频/静态演示/开发者分享/PPT编辑),本文逐维对比,附场景决策。
AVW-9:视觉指南——工具 Logo 墙、架构图、对比表与演示索引
AI 动态视觉 Web 专题的视觉化补充——工具 Logo、Mermaid 架构图、Easing 曲线可视化、ScrollTrigger 原理图、动画演示合集。一图胜千言。
AVW-2:动画引擎全景对比——GSAP、anime.js、Motion、Animate.css 与 Glaze
GSAP 是工业标准、anime.js 最优雅、Motion 是 React 原生的王者、Animate.css 零门槛、Glaze 把动画变成了 Tailwind 的 utility class。五款引擎的 API 对比、性能差异、最佳使用时机全解析。
G7:GSAP 社区案例精选——生产级动画模式与技术生态
从 GSAPify 的 20+ 实战动画模板、gsap-cookbook 的生产级菜谱、rdnax-gsap-master 的 AI 技能包,到 GSAP 社区论坛的排坑经验——本文整理了一套直接可复用的动画模式索引和工具链。
G6:GSAP + AI 项目实战——从数据可视化到 LLM 流式输出的动态展示
GSAP 在 AI 项目中的角色不是'美化',而是'降低认知摩擦'。本文用四个 AI 典型场景:神经网络推理可视化、LLM 流式输出动画、Embedding 空间降维展示、实时指标仪表盘——展示如何让抽象的计算过程变得可见。
G5:GSAP + React——useGSAP Hook、context 清理与客户端动画架构
React 的声明式渲染和 GSAP 的命令式动画之间存在天然张力。本文用 useGSAP hook、context 生命周期管理、React Strict Mode 适配,以及 SSR/CSR 边界处理,给出在 React 中干净使用 GSAP 的完整方案。
G4:GSAP SVG 动画——DrawSVG 描边、MorphSVG 变形与路径动画
SVG 是矢量图形在 Web 上的原生格式,而 GSAP 让它动起来。本文覆盖 DrawSVG 描边动画、MorphSVG 形状变形、MotionPath 路径跟随,以及如何把这些能力应用到 AI 可视化场景。
G3:GSAP 文本动画——SplitText、ScrambleText 与逐字魔法
文字是网页上最重要的信息载体。GSAP 的文本插件让你能够逐字、逐行、逐词组控制文字的动画——从简单的淡入到黑客风格的字符乱码,再到打字机效果。本文覆盖 SplitText、ScrambleText、TextPlugin 三大插件的完整用法。
G2:ScrollTrigger 滚动动画实战——让页面在滚动中讲故事
ScrollTrigger 是 GSAP 生态中使用率最高的插件——没有之一。本文从基础 trigger 出发,覆盖 pinning、scrubbing、水平滚动、批量管理、matchMedia 响应式适配,附带三个生产级真实场景的实现。
G1:Tween & Timeline 核心——GSAP 动画的基石
掌握 GSAP 的两个核心概念——Tween 和 Timeline——就掌握了整个库 80% 的能力。本文从 gsap.to/from/fromTo 出发,深入到 Timeline 编排、Eases 缓动函数库、Staggers 交错动画,以及 Keyframes 关键帧写法。
GSAP 动画实战系列——从入门到 AI 可视化
GSAP 是现代 Web 动画的工业标准。本系列从核心概念出发,逐步深入到 ScrollTrigger 滚动动画、SplitText 文本特效、SVG 动画、React 集成,最终落到 AI 项目中的动态展示——一套完整的生产级动画方案。