悬浮卡片

复刻来源unseen.co

React · Vue3卡片变换ReactVue3指针交互

指针在卡片内移动时轻微 3D 倾斜，静止时保持缓慢浮动。

业务项目无源码 → 我们复刻实现，自动适配 React，复制代码拿去即可使用。

下载 React 代码下载 Vue3 代码

下载 ZIP（含 React + Vue3）

演示预览实时时长 1x

3D Tilt Card

自适应物理倾斜卡片

根据鼠标光标与陀螺仪向量，自适应产生平滑物理透视与反光高光跟随。

Raycast · 物理微动效进入卡片

播放速度已适配 prefers-reduced-motion

TiltCard.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/**
 * OmniMotion — 悬浮卡片 / TiltCard (React 18+ · 指针跟随倾斜)
 * 复刻来源: unseen.co — 指针在卡片内移动时轻微 3D 倾斜
 * 用法: <TiltCard tilt range={2}>...</TiltCard>
 */
import { useRef } from "react";

export default function TiltCard({ tilt = true, range = 2, children }) {
  const ref = useRef(null);

  function onMove(event) {
    if (!tilt || !ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    const x = (event.clientX - rect.left) / rect.width - 0.5;
    const y = (event.clientY - rect.top) / rect.height - 0.5;
    ref.current.style.transform =
      "perspective(600px) rotateY(" + x * range * 2 + "deg) rotateX(" + -y * range * 2 + "deg)";
  }

  function onLeave() {
    if (ref.current) ref.current.style.transform = "";
  }

  return (
    <div ref={ref} className="mk-tilt" onMouseMove={onMove} onMouseLeave={onLeave}>
      {children}
    </div>
  );
}

/* 样式（可直接放入全局 CSS）
.mk-tilt {
  display: flex; flex-direction: column; gap: 8px; width: 118px;
  padding: 14px 14px 16px; border-radius: 8px;
  background: var(--mk-stage-surface); border: 1px solid var(--mk-stage-line);
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: mk-tilt 4s cubic-bezier(0.3, 0, 0, 1) infinite;
}
@keyframes mk-tilt {
  0%, 100% { transform: translateY(-6px) rotate(-2deg); }
  50% { transform: translateY(6px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) { .mk-tilt { animation: none } }
*/

属性 · Props

属性	类型	默认值	说明
tilt	boolean	true	是否开启指针跟随倾斜
range	number	2	最大倾斜角度（deg）