Tilt Card Image Demo

1"use client";
2 
3import Image from "next/image";
4import { TiltCard } from "@/components/sora-ui/effects/tilt-card";
5 
6export interface TiltCardImageDemoProps {
7  isReverse?: boolean;
8  rotationFactor?: number;
9}
10 
11/** motion-primitives `tilt-card-1` */
12export function TiltCardImageDemo({
13  isReverse = true,
14  rotationFactor = 8,
15}: TiltCardImageDemoProps) {
16  return (
17    <TiltCard isReverse={isReverse} rotationFactor={rotationFactor}>
18      <div className="flex w-67.5 flex-col overflow-hidden rounded-xl border border-zinc-950/10 bg-white dark:border-zinc-50/10 dark:bg-zinc-900">
19        <div className="relative h-48 w-full">
20          <Image
21            alt="Shibuya crossing at night, Tokyo"
22            className="object-cover"
23            fill
24            sizes="270px"
25            src="https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?w=540&h=384&fit=crop"
26          />
27        </div>
28        <div className="p-2">
29          <h1 className="font-mono text-zinc-950 leading-snug dark:text-zinc-50">
30            Tokyo
31          </h1>
32          <p className="text-zinc-700 dark:text-zinc-400">Shibuya at night</p>
33        </div>
34      </div>
35    </TiltCard>
36  );
37}
38 
39export default TiltCardImageDemo;