Tilt Card Glare Demo

1"use client";
2 
3import { TiltCard } from "@/components/sora-ui/effects/tilt-card";
4 
5export interface TiltCardGlareDemoProps {
6  glareMaxOpacity?: number;
7  rotationFactor?: number;
8}
9 
10export function TiltCardGlareDemo({
11  glareMaxOpacity = 0.05,
12  rotationFactor = 15,
13}: TiltCardGlareDemoProps) {
14  return (
15    <TiltCard
16      className="w-[280px] overflow-hidden rounded-xl bg-gradient-to-br from-zinc-800 to-zinc-950 p-6"
17      glare
18      glareMaxOpacity={glareMaxOpacity}
19      rotationFactor={rotationFactor}
20    >
21      <div
22        className="flex flex-col gap-3"
23        style={{ transform: "translateZ(40px)" }}
24      >
25        <p className="font-medium text-sm text-zinc-50">Glare</p>
26        <p className="text-sm text-zinc-400">
27          A light reflection sweeps across the surface as the card tilts,
28          selling the material.
29        </p>
30      </div>
31    </TiltCard>
32  );
33}
34 
35export default TiltCardGlareDemo;