Snow Cap

Written for the variant you picked above: Snow

Build a pill button that snow settles on. Props: children, weather (snowfall or a dusting of powdered sugar), tone {face, label}, onClick, type and motion. The button is 56px tall and at least 220px wide, with a vertical gradient on its face, a top highlight and a bottom inner shadow. A canvas overlay sits over it with pointer-events none, extending 70px above, 18px either side and 36px below, and draws in the button's own coordinates. The drift (pure functions): the pill's top edge as y(x) — 0 on the flat, rising round the semicircular ends; a height per 2px column, each limited by how steep the edge is there (full on the flat, falling to nothing as the slope passes 1.6), so snow slides off the shoulders; a deposit that spreads each landing over seven columns with a Gaussian; and a slump pass that moves snow from any step taller than 1.2px into its neighbour, so the drift stays soft. While hovered, flakes spawn at the top of the overlay across the button's width plus the margins (46 a second, radius 1.2–2.8px, falling 26–48px/s faster for bigger flakes and swaying), fading in over the first 14px. A flake that reaches the drift surface adds to it; if that column is full it slides off as a little drop; one that misses falls out of the overlay. The drift is filled as one path — along the surface minus the height and back along the surface — with a white-to-blue-grey gradient underneath and a soft shadow, plus a few twinkling glints. Once the drift averages 3px, icicles grow from the bottom edge's flat part at least 9px apart (a tapered quadratic shape, white to translucent blue, with a highlight line), up to 6–19px long at 7px/s, each dripping a drop now and then. On leave it melts: each column sinks at about 5px/s, icicles shrink and drip, and drops fall from the bottom edge with gravity. A press knocks loose half of the drift as a spray of drops. The animation stops when nothing is left. Keyboard focus starts the snow; touch gets a 2.6s fall on press. Reduced motion shows a finished drift and four icicles on hover, with nothing falling. Selected variant — Snow (snow): Snowfall on a midnight-blue button (#1c2b4a, label #f4f8ff) over a pale winter sky gradient (#b9cde6 to #e6eef7): flakes 1.2–2.8px at 46 a second, a drift up to 13px with white-to-#c9dcf2 shading and glints, and icicles that drip. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Point at the button and it snows on it; press to knock the snow loose. Keyboard focus starts the snow too. Motion: Flakes fall at 26–48px/s and build a drift up to 13px deep over a few seconds; icicles grow at 7px/s; everything melts away on leave. Reduced motion shows a still drift. Accessibility: A real button with its text label; the canvas is decorative, hidden and doesn't take the pointer. The snow never covers the label. Responsive behavior: Leave about 70px of room above the button for the snowfall and 36px below for icicles. Touch: A press starts a short snowfall and knocks some loose. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Point at the button and it snows on it; press to knock the snow loose. Keyboard focus starts the snow too.

Motion

Flakes fall at 26–48px/s and build a drift up to 13px deep over a few seconds; icicles grow at 7px/s; everything melts away on leave. Reduced motion shows a still drift.

Accessibility

A real button with its text label; the canvas is decorative, hidden and doesn't take the pointer. The snow never covers the label.

Responsive

Leave about 70px of room above the button for the snowfall and 36px below for icicles.

On touch

A press starts a short snowfall and knocks some loose.