The screenshot shows the current Savant hero layout which looks good -- the main change needed is the background interaction. Let me study marrow.au's effect first.
Now I understand the marrow.au effect -- it uses multiple colorful blobs that each follow the cursor with different physics (different stiffness/damping/mass), creating a rich, layered, multi-chromatic glow field. Currently the hero only has 2 blobs (both indigo). I need to add more blobs with varied colors (lavender, periwinkle, soft pink, pale blue, violet) each with unique spring parameters so they separate and recombine fluidly.
Hero 背景交互已重写为 Marrow.au 风格的多色晕场系统。7 个独立的 GlowBlob 组件,每个拥有不同的颜色(indigo、periwinkle、lavender、soft rose、ice blue、violet、pale lilac)、不同的尺寸(300-700px)、不同的 blur 强度(70-140px),以及关键的 -- 每个 blob 都有独立的 spring 物理参数(stiffness 15-45、damping 25-55、mass 0.8-3.0),使得光标移动时这些色晕以不同的速度和延迟分离、交织、重聚,形成丰富的多层色彩深度感。
Now I understand the full code. The current blobs all follow the cursor (translate toward it). The user wants the opposite: blobs stay in fixed positions and only get squeezed/pushed away when the cursor gets close, like a magnetic repulsion. More blobs, more visible color, and the push effect should be noticeable.
Hero 背景交互已完全重写为 Canvas 磁性排斥系统:11 个色晕(indigo、periwinkle、lavender、rose、ice blue、violet 等)固定在预设位置,鼠标不靠近时完全静止;光标进入 280-400px 半径内时,smoothstep 衰减驱动色晕沿反方向被推开 80-130px,每个 blob 有独立的 lerp 速度(0.03-0.07),产生轻重不同的粘滞排斥感,鼠标移开后平滑回归原位。
参考设计底稿: 请完全参考我上传的图片中的整体排版、字体和配色。
背景核心效果: 我需要实现一种类似“流体渐变跟随鼠标滑动”的动态背景效果。
技术拆解与要求:
背景底层: 保持底稿中的那种非常柔和、模糊的(Large Blur)蓝紫色和浅灰色混合的流体渐变作为基础。
鼠标跟随: 需要添加一个或多个“光影色块”(大尺寸、高模糊度的圆环或色块),这些色块要跟随用户的鼠标光标移动。
关键质感(缓动): 不要让色块生硬地死盯着鼠标,而是要有一种物理惯性(Ease-in-out / Spring / Damping)。鼠标移动时,色块会稍微滞后,当鼠标停下,色块会丝滑地“滑行”一段距离后才完全停下,营造出一种高级、像液体漂浮的感觉。
图层混合: 将此动态背景层置于文字层("One centralized context layer...")下方。
建议工具: 首选使用 framer-motion 中的 useMotionValue 和 useSpring 钩子来精准控制这个缓动效果。
最终目标: 让背景看起来不是静止的图片,而是像一块有生命力的、在屏幕背后随光影滑动的柔和画布。
参考网址https://www.marrow.au/
You can send messages while the preview loads