Debugging the Unclickable Button: A Deep Dive into GSAP, Stacking Contexts, and Pointer Events

本地开发卡顿但线上流畅？一次定位移动端性能的完整笔记

在本地（开发模式）真机访问偶发卡顿，但部署到 Vercel 生产环境却很流畅。本文记录原因分析、验证方法与零视觉差的性能优化实践。

使用 GSAP ScrollTrigger 实现底部滑出覆盖层效果

移动端性能优化实战：CosmicInterestsSection 全面瘦身（第一期）

45%-100% 反向滚动倒放修复实战：ScrollTrigger + GSAP + WebGL

深入解析：解决 Next.js + GSAP 中的水合问题与动画初始化失败

详细剖析了在 Next.js 应用中 GSAP 动画（特别是 ScrollTrigger）因水合问题在首次加载时失效，但在路由或语言切换后恢复的根本原因。文章提供了一套健壮的、分层级的解决方案，包括全局 GSAPProvider、自定义 Hooks (useGSAPInit, useElementDetection) 来确保动画的可靠初始化。

Goals 手机端划线“提前跑完”？一次 pinSpacing=false 引发的错觉与修复

移动端看起来像“下划线动画没了”，但其实是上游 pinned section 让滚动条提前推进。记录从 markers 误判到根因定位，以及一个不改上游布局的折中修复。

Fixing TextScrollSection Flicker at Extreme Scale (GSAP ScrollTrigger)

A practical fix for one-frame flashes/white blocks when scaling a pinned full-screen section during long reverse scroll: cap the scale, contain painting, and stabilize pin behavior.

移动端 URL 栏伸缩导致 ScrollTrigger refresh：为什么桌面模拟复现不了，以及 height-only resize 防护

真机回滚时出现“蓝色背景突然闪现、雪花层缺失”的根因：地址栏伸缩触发 height-only resize，我们在 resize 中主动 ScrollTrigger.refresh() 导致进度跳变。本文记录定位过程与通用防护场景，并说明 About 页是否需要同类处理。

GSAP 3D飞行动画优化：如何实现完美的直线冲刺效果

解决CSS transform perspective导致的视觉曲线问题，实现元素从屏幕中心笔直冲向观察者的3D动画效果。

Centering Tarot Card Orbits Without Breaking Hydration

A debugging journal on fixing a misaligned tarot card animation and a sneaky hydration error in the about page redesign.

The Mystery of the Flickering Gradient: A React useEffect Deep Dive

How a single array dependency in useEffect caused gradient backgrounds to randomly change colors, and the surprisingly simple one-line fix that solved it all.

为什么项目卡片的下划线消失了？一次 AppleBurstPerfect 调试记录

记录在构建 AppleBurstPerfect 过场时，为什么给项目卡片添加的下划线没有显示，以及最终的解决方案。

AppleBurstPerfect：苹果官网招聘风的爆发色彩 + 背景过场是如何实现的

记录并拆解 AppleBurstPerfect 在 Hero 区实现的“爆发色彩 + 背景过场”，以及与内容区的无缝交接策略。包含结构设计、GSAP 时间线、参数选择、稳定性优化与常见坑。

为 R3F/three.js 行星实现稳健的日/夜效果：叠加夜光壳 + 基底变暗 + 云层夜侧减弱

用独立 ShaderMaterial 叠加夜光壳、标准材质 onBeforeCompile 基底夜侧变暗、云层材质夜侧减弱，替代易碎的 onBeforeCompile 双贴图混合。并修复 ShaderMaterial 顶点着色器 objectNormal 导致的编译报错。

修复 Next.js 开发环境中的 THREE.WebGLRenderer: Context Lost（R3F + GSAP ScrollTrigger）

记录一次在开发环境中出现 WebGL 上下文丢失（白屏）的排查过程：根因是 StrictMode 在 dev 的双重挂载 + ScrollTrigger pin reparent；最终通过关闭 StrictMode 解决。同时整理了更稳妥的可选加固方案。

从涟漪到博客：一次跨层动画的工程化落地纪实

记录 Cosmic Interests → Portal Overlay → Blog Section 这条跨层动画链路的多轮迭代，复盘为什么需要这么多次微调，分别解决了哪些真实问题，以及最终形成的一套稳定、可维护的实现。

Fixing GSAP Overlay Flicker in CosmicInterestsSection (Next.js 15)

Root cause and fix for dual-color background flicker and UI flashing in a GSAP + ScrollTrigger overlay with mixed blends and pinning.

GSAP ScrollTrigger 爆发效果与背景动画的性能优化实战

通过绑定时间线到滚动、使用 CSS 变量避免重绘抖动、隔离合成层，以及为主题背景加入降级策略，彻底解决滚动时的闪烁与掉帧。

实现基于滚动的文字加速效果：从失败到成功的 GSAP 实践

深入探讨如何使用 GSAP ScrollTrigger 和 Observer 实现文字滚动加速效果，记录从最初的失败尝试到最终成功实现的完整过程。

GSAP动画时间线调试实战：从混乱到优雅

记录一次复杂GSAP滚动动画的调试过程，从理解现有代码到实现完美的持续运动效果。

构建可扩展的UI设计系统

深入探讨如何使用Shadcn UI、Radix UI和Tailwind CSS构建一致性强、可维护的设计系统。

5 Essential Design Principles for Developers

Learn the fundamental design principles that every developer should know to create visually appealing and user-friendly interfaces.

Building Modern Websites with Next.js 15

A comprehensive guide to building fast, SEO-friendly websites using Next.js 15, React 19, and Tailwind CSS.

Hello World

My first post on my new blog. Welcome to my digital garden where I'll share my thoughts on programming, design, and more.

React 19性能优化实战指南

深入探讨React 19的新特性和性能优化技巧，包括并发渲染、Suspense边界和内存管理最佳实践。

全栈架构设计：从前端到后端的完整方案

探讨现代全栈应用的架构设计，包括微服务、数据库选型、API设计和部署策略。

TypeScript 高级类型系统

探索 TypeScript 的高级类型特性，包括条件类型、映射类型和模板字面量类型。

Next.js 性能优化实战

从代码分割到图片优化，全面提升 Next.js 应用性能的实用技巧。

React Hooks 完全指南

深入理解 React Hooks 的工作原理，从基础到高级用法的完整指南。