ADVANCED CURSOR INTERACTION

光标,
身体的延伸

自定义光标 · 惯性跟随 · 磁性按钮 · 聚光灯 · 3D 视差 · 弹簧物理

SCROLL / CLICK / MOVE 开始体验 ↓ 弹簧小球

01磁性按钮 Magnetic Buttons

按钮被光标吸引,内层文字位移更大——双层磁性,营造出"拉扯"的空间感。

02聚光灯卡片 Spotlight Cards

卡片用 radial-gradient 高光跟踪光标位置,像一束光在表面扫过。

性能优先

全部用 rAF 驱动 + CSS 变量写入,无布局抖动;transform 走 GPU 合成层。

🧲

lerp 插值

光标位置按帧向鼠标真实位置收敛,产生惯性跟手的手感,而非生硬贴附。

🎨

反色混合

光标使用 mix-blend-mode: difference,划过任何颜色都会自动反色显示。

033D 视差倾斜 Parallax Tilt

把鼠标在卡片上的相对位置映射成 rotateX / rotateY,内部元素用 translateZ 分层。

PERSPECTIVE 900PX

分层 3D 卡片

背景光晕、文字、角标分别位于不同 Z 深度,随卡片一起转动,形成视差。

04弹簧小球 Spring Physics

小球用弹簧公式(F = k·Δx 加阻尼)追光标,速度越快拉伸越明显——squash & stretch 是动画的十二原则之一。

在框内移动鼠标 ↝