我为自己的 React + Next.js 博客实现了一套自定义 Magnetic Cursor 交互效果。本文记录了从设计思路、事件监听、目标元素识别，到坐标计算、动画优化和可访问性处理的完整实现过程，同时总结了在开发过程中遇到的问题与一些前端动画实践经验。

有限状态机（FSM）通过现态、条件、动作、次态四要素管理对象行为，分为Moore（动作依附状态）和Mealy（动作依附迁移）两类。本文以红绿灯为例的分层架构实现配置与逻辑分离，提升系统可维护性。

拖动进度条后回弹到0？问题出在音频未加载时`seeked`事件过早触发，导致`currentTime`读回旧值。改用数据收敛检测：在`timeupdate`中校验当前时间是否接近目标（容差0.5s），确认数据真正到达后再更新UI，彻底解决冷启动回弹。

链表是一种物理存储结构上非连续、非顺序的存储结构，数据元素的逻辑顺序是通过链表中的指针链接次序实现的。

递归算法是一种编程技术，其基本思想是将一个复杂的问题分解为更小的子问题，然后逐个解决这些子问题。在递归中，函数会直接或间接地调用自身，这就是为什么它被称为"递归"。每个递归函数通常都有两个基本部分：基线条件（base case）和递归条件（recursive case）。基线条件（base case）是递归结束的条件，也就是说，当满足这个条件时，函数将停止调用自身。递归条件（recursive case）是在满足这个条件的情况下，函数会继续调用自身，通常是在处理一个更小的子问题。