求教：如何实现powell-studio.com同款光标文字模糊效果？

一、先解决SplitText文本拆分问题 #

SplitText是GSAP的插件，必须先正确引入并注册才能使用：

// 引入并注册GSAP与SplitText
import { gsap } from "gsap";
import { SplitText } from "gsap/SplitText";
gsap.registerPlugin(SplitText);

// 按字符拆分目标标题元素
const titleEl = document.querySelector(".target-title");
const splitChars = new SplitText(titleEl, {
  type: "chars",
  charsClass: "split-char" // 自定义字符类，方便样式控制
});
const chars = splitChars.chars; // 获取所有拆分后的字符span

拆分后每个字符会被包裹在<span class="split-char">中，可通过CSS调整字符间距避免布局错乱：

.split-char {
  display: inline-block;
  margin: 0 0.1em;
}

二、核心模糊效果实现逻辑 #

效果本质是根据字符与鼠标的距离动态调整模糊度：鼠标附近的字符清晰，远离的字符模糊。实现代码如下：

// 初始化所有字符为最大模糊状态
gsap.set(chars, { filter: "blur(8px)" });

// 监听鼠标移动事件
document.addEventListener("mousemove", (e) => {
  const mouseX = e.clientX;
  const mouseY = e.clientY;

  chars.forEach(char => {
    // 获取字符的中心坐标
    const rect = char.getBoundingClientRect();
    const charCenterX = rect.left + rect.width / 2;
    const charCenterY = rect.top + rect.height / 2;

    // 计算鼠标与字符的直线距离
    const distance = Math.sqrt(
      Math.pow(mouseX - charCenterX, 2) + Math.pow(mouseY - charCenterY, 2)
    );

    // 根据距离计算模糊值（可自行调整参数）
    const maxBlur = 8; // 最大模糊像素值
    const clearRange = 120; // 鼠标周围120px内的字符逐渐清晰
    const blurValue = Math.min(maxBlur, (distance / clearRange) * maxBlur);

    // 用GSAP平滑更新模糊滤镜
    gsap.to(char, {
      filter: `blur(${blurValue}px)`,
      duration: 0.25,
      ease: "power2.out"
    });
  });
});

三、常见问题排查 #

• SplitText拆分失败：检查插件是否正确注册、目标元素是否在DOM加载完成后获取、是否有其他脚本修改了目标元素的DOM结构。
• 模糊效果无变化：检查CSS是否覆盖了filter属性，或浏览器是否支持filter: blur()（现代浏览器均支持）。
• 动画卡顿：可减少duration值，GSAP本身已做性能优化，一般无需额外处理。

如果你的代码还有具体问题，贴出相关片段可进一步定位问题。

内容的提问来源于stack exchange，提问作者Athena Bikaki