Snow Drift

Pricing

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Snow Drift to your project and fits it to your theme.

Code

How Snow Drift is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}