Next.js/TypeScript复刻Webflow滚动动画模板的技术问题求助

我正在用Next.js+TypeScript复刻一个包含滚动效果与鼠标位置追踪的Webflow演示模板，目前碰到几个核心问题：

已遇到的问题 #

• 横向滚动异常：给section标签加overflow:hidden能修复，但会直接破坏粘性内容的交互逻辑
• 缺乏参考示例：找不到能对应复刻这些复杂交互的案例，不清楚该如何通过样式和DOM操作实现效果
• 鼠标事件绑定困惑：已经写了元素操作的函数，但不知道怎么正确绑定鼠标事件来触发动画

需要实现的核心交互效果 #

• 页面加载动画：标题从超大尺寸平滑缩小后归位
• 环形元素旋转：页面两侧的环形元素持续旋转
• 滚动触发动画：滚动时触发手机解锁动画，同时实现文本视差效果
• 元素淡入：元素首次进入视口时平滑淡入显示
• 明暗过渡：根据滚动的方向和速度，实现页面明暗对比的动态过渡

已编写的Hero组件代码 #

// Hero Section
const Hero = () => {
  React.useEffect(() => {
    const ellipseLeft = document.querySelector(".ellipse-left");
    const ellipseRight = document.querySelector(".ellipse-right");

    let rotateZ = 23;

    setInterval(() => {
      rotateZ++;

      if (ellipseRight) {
        ellipseRight.style.transform =
          `translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(${rotateZ}deg) skew(0deg, 0deg)`;
        ellipseRight.style.transformStyle = "preserve-3d";
        ellipseRight.style.willChange = "transform";
      }

      if (ellipseLeft) {
        ellipseLeft.style.transform =
          `translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(${rotateZ}deg) skew(0deg, 0deg)`;
        ellipseLeft.style.transformStyle = "preserve-3d";
        ellipseLeft.style.willChange = "transform";
      }
    }, 50);
  }, []);

  // 组件返回部分省略
};

内容的提问来源于stack exchange，提问作者The Old County