Components
Loading preview...
Athlete profile card with a glassmorphism gradient overlay over a full-bleed background image. Default state shows name + title + description; hovering scales the image, fades the gradient up, lifts the text, and reveals a 3-column stats grid (lucide icons + label + value) with a staggered 60ms cascade. Built with framer-motion variant choreography (5 coordinated transitions), shadcn Card primitive, and lucide-react icons (Award, Bike, TrendingUp).
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/glassmorphism-statistics-card"use client";
import { GlassmorphismStatisticsCard } from "@/components/ui/glassmorphism-statistics-card";
export default function GlassmorphismStatisticsCardDemo() {
return (
<div className="flex w-full min-h-screen items-center justify-center overflow-hidden bg-background p-8">
<GlassmorphismStatisticsCard />
</div>
);
}
export { GlassmorphismStatisticsCardDemo };