Components
Loading preview...
@easemize
npx shadcn@latest add https://21st.dev/r/easemize/material-design-3-rippleimport React, { useState } from "react";
import { Ripple } from "@/components/ui/material-design-3-ripple";
import { Fingerprint, Lock, Unlock, ChevronRight } from "lucide-react";
export default function SpotlightRippleDemo() {
const [unlocked, setUnlocked] = useState(false);
return (
<div className="relative min-h-[600px] h-screen w-full flex items-center justify-center bg-[#09090b] overflow-hidden font-sans selection:bg-indigo-500/30">
{/* 1. DOTTED BACKGROUND */}
{/* We create a pattern using radial gradients */}
<div className="absolute inset-0 z-0 h-full w-full bg-[radial-gradient(#27272a_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]" />
{/* 2. SHINY SPOTLIGHT EFFECT */}
{/* A massive gradient glow from the top to simulate a light source */}
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[300px] bg-indigo-500/20 blur-[120px] rounded-full pointer-events-none" />
{/* 3. THE HERO CARD */}
<div className="relative z-10 group">
{/* Glow behind the card */}
<div className="absolute -inset-0.5 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-[32px] blur opacity-20 group-hover:opacity-50 transition duration-1000 group-hover:duration-200" />
{/* Main Container */}
<div className="relative w-[340px] bg-zinc-950 rounded-[30px] border border-white/10 shadow-2xl flex flex-col overflow-hidden">
{/* --- RIPPLE LAYER --- */}
{/* We place the ripple here as an overlay.
Using 'text-white' allows the currentColor to be white,
creating a "Flash" effect on the dark card. */}
<Ripple
className="cursor-pointer"
color="text-white"
opacity={0.15} // Higher opacity for dramatic effect
onClick={() => setUnlocked(!unlocked)}
>
{/* CARD CONTENT */}
<div className="h-full w-full p-8 flex flex-col justify-between relative z-20 pointer-events-none">
{/* Header */}
<div className="flex justify-between items-start">
<div className="space-y-1">
<h3 className="text-zinc-400 text-xs font-medium uppercase tracking-[0.2em]">Security Level</h3>
<p className="text-white font-bold text-xl">Class A</p>
</div>
<div className={`p-2 rounded-full border transition-colors duration-500 ${unlocked ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-500' : 'bg-rose-500/10 border-rose-500/20 text-rose-500'}`}>
{unlocked ? <Unlock className="w-5 h-5" /> : <Lock className="w-5 h-5" />}
</div>
</div>
{/* Central Graphic */}
<div className="flex-1 flex items-center justify-center">
<div className="relative">
<div className={`absolute inset-0 bg-indigo-500 blur-[40px] transition-opacity duration-700 ${unlocked ? 'opacity-40' : 'opacity-0'}`} />
<Fingerprint
className={`w-24 h-24 transition-all duration-700 ${unlocked ? 'text-indigo-400 scale-110 drop-shadow-[0_0_15px_rgba(129,140,248,0.8)]' : 'text-zinc-700 scale-100'}`}
strokeWidth={1}
/>
</div>
</div>
{/* Footer */}
<div className="space-y-6">
<div className="h-px w-full bg-gradient-to-r from-transparent via-white/10 to-transparent" />
<div className="flex items-center justify-between">
<div>
<p className="text-zinc-500 text-xs">Biometric Scan</p>
<p className="text-zinc-300 text-sm font-medium mt-0.5">
{unlocked ? "Access Granted" : "Touch to Authorize"}
</p>
</div>
{/* Small decorative arrow that moves on hover */}
<div className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center border border-white/5 group-hover:bg-white/10 transition-colors">
<ChevronRight className="w-5 h-5 text-zinc-400" />
</div>
</div>
</div>
</div>
</Ripple>
</div>
</div>
{/* Instruction Label */}
<div className="absolute bottom-12 text-zinc-500 text-xs font-mono tracking-widest opacity-60">
INTERACTIVE SURFACE • CLICK ANYWHERE
</div>
</div>
);
}