An animated overlay that lets snow fall and physically pile up on top of a page's own headings, cards and buttons, with avalanches, melt and a pointer sweep that blows the snow back into the air.
"use client";
import SnowDrift from "@/components/ui/snow-drift";
const PLANS = [
{
name: "Starter",
price: "$0",
meta: "For trying it out",
cta: "Choose Starter",
},
{
name: "Team",
price: "$24",
meta: "Per seat, per month",
cta: "Choose Team",
},
{
name: "Scale",
price: "$60",
meta: "With SSO and audit log",
cta: "Choose Scale",
},
];
export default function SnowDriftDemo() {
return (
<div className="flex h-screen w-full items-center justify-center bg-[var(--color-canvas)] p-10">
<SnowDrift
intensity={110}
wind={0.12}
className="w-full max-w-3xl rounded-3xl p-10"
>
<h2
data-snow
className="mb-8 text-4xl font-semibold tracking-tight text-[var(--color-ink)]"
>
Pricing that stays put
</h2>
<div className="grid grid-cols-1 gap-5 sm:grid-cols-3">
{PLANS.map((plan) => (
<div
key={plan.name}
data-snow
className="rounded-2xl border border-[var(--color-line-strong)] bg-[var(--color-surface)] p-6 shadow-[var(--shadow-card)]"
>
<p className="text-sm font-medium text-[var(--color-ink-soft)]">
{plan.name}
</p>
<p className="mt-2 text-3xl font-semibold text-[var(--color-ink)]">
{plan.price}
</p>
<p className="mt-1 text-sm text-[var(--color-ink-soft)]">
{plan.meta}
</p>
<button
type="button"
className="mt-6 w-full rounded-full bg-[var(--color-accent)] px-4 py-2 text-sm font-semibold text-[var(--color-accent-ink)] transition-colors hover:bg-[var(--color-accent-strong)]"
>
{plan.cta}
</button>
</div>
))}
</div>
</SnowDrift>
</div>
);
}