Tilt Card

Tilt Card 是用 React、Motion 與 Tailwind CSS 做的 3D 傾斜卡片（3D tilt card、hover 視差卡片）元件，以 CSS perspective 與 rotateX／rotateY 呈現立體感，搭配 TiltCardItem 可以讓標題或按鈕浮在卡面上方。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<TiltCard/>

    </div>
  );
}

適用情境

• 電商或作品集的商品卡、專案卡
• 定價頁的方案卡，讓滑鼠停留的方案更突出
• 會員卡、票券、徽章這類想呈現實體感的展示
• 遊戲或活動頁的角色、獎品介紹卡
• 不適合：主要使用者在手機上的頁面，觸控時不會傾斜；想要彩虹反光的收藏卡效果可以看 Holographic Card

安裝

npx webberui@latest add https://webberui.com/r/tilt-card.json

使用

import { TiltCard, TiltCardItem } from "@/components/ui/tilt-card";

<TiltCard maxTilt={12} scale={1.02}>
  <div className="h-40 rounded-t-xl bg-neutral-100 dark:bg-neutral-800" />
  <TiltCardItem z={40} className="p-5">
    <h3 className="font-semibold">標題</h3>
    <p className="text-sm text-neutral-500">這段內容浮在卡面上方 40px。</p>
  </TiltCardItem>
</TiltCard>

範例

搭配 Next.js Image 的商品卡

卡片本體不能加 overflow-hidden，滿版圖片請在圖片本身加上圓角。

import Image from "next/image";
import { TiltCard, TiltCardItem } from "@/components/ui/tilt-card";

<TiltCard className="w-72">
  <Image
    src="/products/headphones.jpg"
    alt="無線降噪耳機"
    width={288}
    height={192}
    className="h-48 w-full rounded-t-xl object-cover"
  />
  <TiltCardItem z={30} className="space-y-1 p-5">
    <h3 className="font-semibold">無線降噪耳機</h3>
    <p className="text-sm text-neutral-500">續航 30 小時，支援多點連線</p>
  </TiltCardItem>
</TiltCard>

自訂眩光顏色

眩光顏色讀取 --wb-tilt-glare CSS 變數，可以透過 style 設定在 TiltCard 上。

<TiltCard
  className="w-64 bg-neutral-950 p-6 text-white"
  style={{ "--wb-tilt-glare": "rgba(56, 189, 248, 0.35)" } as React.CSSProperties}
>
  <TiltCardItem z={50}>
    <p className="text-xs uppercase tracking-widest text-sky-300">Member</p>
    <p className="mt-2 text-2xl font-semibold">年度會員</p>
  </TiltCardItem>
</TiltCard>

低調的方案卡

在並排的定價卡上，降低 maxTilt、把 scale 設為 1 並關閉 glare，效果會比較收斂。

<div className="grid gap-6 sm:grid-cols-3">
  {plans.map((plan) => (
    <TiltCard key={plan.id} maxTilt={6} scale={1} glare={false} className="p-6">
      <h3 className="font-semibold">{plan.name}</h3>
      <p className="mt-2 text-sm text-neutral-500">{plan.summary}</p>
    </TiltCard>
  ))}
</div>

Props

TiltCard

其餘 <div> 屬性（onClick、aria-* 等）透傳至外層 perspective 容器。

TiltCardItem

細節

• 3D 透視：外層容器固定 perspective: 1000px，卡片本體 transform-style: preserve-3d；rotateX / rotateY 依游標相對中心位置線性映射至 ±maxTilt
• 眩光：radial-gradient 白色高光跟隨游標位置，強度隨游標離中心的距離增強（正對中心時為 0，越傾斜越亮）；可透過 --wb-tilt-glare CSS 變數覆蓋高光顏色（預設 rgba(255, 255, 255, 0.4)）
• spring 回正：所有變形以 useMotionValue + useSpring 驅動，游標離開後帶慣性回正、眩光淡出
• 浮起層次：TiltCardItem 以 translateZ 讓內容浮出卡面；需為 TiltCard 的直接子元素，若中間隔了其他容器，請為該容器加上 transform-style: preserve-3d
• 避免 overflow-hidden：卡片本體若設 overflow-hidden 會強制攤平 3D（translateZ 失效），滿版圖片請改為在圖片自身加上圓角（如 rounded-t-xl）
• 穩定不抖動：pointer 事件掛在未變形的外層容器，避免卡片旋轉中讀取到變形後的邊界造成回饋抖動
• 觸控裝置自動停用：僅回應滑鼠的 pointer 事件（pointerType === "mouse"），觸控時就是一張普通卡片
• 使用者系統開啟「減少動態效果」時停用傾斜與眩光，卡片保持靜態、內容與功能不受影響

常見問題

可以在 Next.js App Router 使用嗎？

可以。元件檔案開頭已有 "use client"，在 Server Component 頁面中照常 import 即可。

為什麼 TiltCardItem 沒有浮起來？

TiltCardItem 需要是 TiltCard 的直接子元素；中間如果多包一層容器，請替該容器加上 transform-style: preserve-3d（Tailwind 可寫 [transform-style:preserve-3d]）。另外卡片本體加了 overflow-hidden 也會讓 3D 被攤平。

手機上有效果嗎？

沒有。元件只回應 pointerType 為 mouse 的指標事件，觸控裝置上會顯示成一般卡片，內容與點擊都不受影響。

怎麼調整傾斜幅度與手感？

maxTilt 設定游標移到邊緣時的最大角度，scale 設定 hover 時的放大倍率，springConfig 接受 Motion 的 SpringOptions，可以調整回正的速度與彈性。

需要哪些依賴？

motion、clsx 與 tailwind-merge。不想用 CLI 的話，可以在安裝區的「手動」分頁照步驟複製原始碼。