Motion Prompt #153｜3D 倾斜 · 3D tilt on hover（中文译文）

请使用“3D tilt on hover”（3Dチルト），它是“Landing page & web effects, part 2”中的一个名称。
Motion Prompt #153

定义：卡片跟随光标进行三维倾斜。
示例展示：光标在卡片上移动时，卡片根据光标位置向纵深倾斜，反光扫过表面；光标离开后回到平面。
规格：
- 视口511×168，中央卡片220×132、圆角半径14。光标进入后每0.6 s访问一个靠近卡片角部的位置，再离开，采用三次ease-in-out。单次4.7 s，在9.4 s包循环内播放两次。
- 倾斜：光标相对卡片中心的偏移，分别除以半宽、半高，得到−1…1。水平偏移 × 0.32 rad（约18°）为绕Y轴旋转，垂直偏移 × 0.32 rad为绕X轴旋转；光标所在侧向远处倾斜。
- 纵深：视点距离520 px，相当于perspective: 520px；较近部分绘制得更大。
- 悬停时倾斜和反光在0.4 s内以三次ease-out增强；离开时卡片同样在0.4 s内恢复平面。
- 反光为以光标为中心、半径130 px的白色径向光，中心不透明度0.42；地面阴影沿倾斜的反方向最多偏移10 px。
何时使用：用于会员卡、产品包装或价格卡，让它们像可以拿起的实物。

参考实现（Canvas 2D，画面仅由时间决定的函数）：https://showheyohtaki.github.io/motion-prompt/api/v1/en/e/153.txt
共享辅助代码：https://showheyohtaki.github.io/motion-prompt/api/v1/kit/lp2.js
请保持参考实现的形状、时间安排和缓动数值不变，只调整文字、颜色和素材，以适配我正在制作的项目。