Tilt Card Demo

1"use client";
2 
3import { TiltCard } from "@/components/sora-ui/effects/tilt-card";
4 
5export interface TiltCardDemoProps {
6  isReverse?: boolean;
7  perspective?: number;
8  rotationFactor?: number;
9  scaleOnHover?: number;
10}
11 
12export function TiltCardDemo({
13  isReverse = false,
14  perspective = 1000,
15  rotationFactor = 8,
16  scaleOnHover = 1,
17}: TiltCardDemoProps) {
18  return (
19    <TiltCard
20      className="w-[280px] rounded-xl border border-zinc-200 bg-zinc-50 p-6 dark:border-zinc-800 dark:bg-zinc-900"
21      isReverse={isReverse}
22      perspective={perspective}
23      rotationFactor={rotationFactor}
24      scaleOnHover={scaleOnHover}
25    >
26      <div
27        className="flex flex-col gap-3"
28        style={{ transform: "translateZ(40px)" }}
29      >
30        <div className="h-10 w-10 rounded-full bg-gradient-to-br from-violet-500 to-fuchsia-500" />
31        <p className="font-medium text-sm text-zinc-900 dark:text-zinc-50">
32          Sora UI
33        </p>
34        <p className="text-sm text-zinc-500 dark:text-zinc-400">
35          Move your cursor around — the card tilts toward it on a spring, and
36          this content floats above the surface.
37        </p>
38      </div>
39    </TiltCard>
40  );
41}
42 
43export default TiltCardDemo;