基于Framer Motion实现行星移动时文本变色的技术求助

我使用Framer Motion库实现了行星在圆形区域内跟随鼠标移动的效果，核心需求是：当行星移动到文本后方时，文本颜色改为橙色。尝试过相关解决方案但未生效，试用混合模式后得到偏蓝色的效果，希望将其改为指定的橙色。

相关代码示例 #

页面结构代码 #

<div>
   <div className={styles.content}>
     <div className={styles.content__title}>
          <h1>
            Explore Your own planet <br /> In{" "}
            <span>our New </span>
            metaverse
         </h1>
      </div>
      <div className={styles.content__description}>
         <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing
          elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua. Ut enim ad minim veniam
         </p>
      </div>
  </div>
  <div>
     <Planet />
  </div>
</div>

Planet组件代码 #

const mouseX = useMotionValue(0);
const mouseY = useMotionValue(0);

const handleMouseMove = (e: React.MouseEvent<SVGCircleElement, MouseEvent>) => {
    const rect = e.currentTarget.getBoundingClientRect();
    animate(mouseX, e.clientX - rect.left - rect.width / 2);
    animate(mouseY, e.clientY - rect.top - rect.height / 2);
}

<div className="circle">
            <motion.svg
                width="526"
                height="526"
                viewBox="0 0 526 526"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                ...
                <motion.circle
                    cx="263"
                    cy="263"
                    r="263"
                    fill="transparent"
                    onMouseMove={handleMouseMove}
                    onMouseEnter={handleMouseMove}
                    onMouseLeave={(e) => {
                        animate(mouseX, 0);
                        animate(mouseY, 0);
                    }}
                    className="circle_detector"
                />
            </motion.svg>
            <motion.div
                className="image"
                style={{
                    translateX: mouseX,
                    translateY: mouseY,
                    transition: "all 3s linear",
                }}
            />
</div>

行星图片样式 #

.image {
        position: absolute;
        width: 320px;
        height: 322px;
        top: calc(526px / 2 - 322px / 2);
        left: calc(526px / 2 - 320px / 2);
        background-image: url("../src/widgets/planet/assets/planet.webp");
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

问题进展 #

• 期望效果：行星移动到文本后方时，文本颜色变为橙色
• 曾尝试过通过判断背景色修改文本颜色的方案，但没有效果
• 更新：尝试使用混合模式后，文本呈现偏蓝色，需要改为指定的橙色
• 有在线演示站点可查看当前效果

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