Snow Pile
Snow that actually SETTLES on your headings, buttons and images — hover to brush it off.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Flakes land on the top edges of the elements you choose and build soft, bumpy piles (thinner at the edges). Hover an element and its snow falls off as powder. All of it is drawn on one canvas.
Installation
$ npm i @guetix/snow-pile
Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.
vanilla.ts · any framework
import { snowPile } from "@guetix/snow-pile";
const snow = snowPile({ selector: "h1, h2, .card, button", density: 180 });
// snow.destroy() when the season is over ☃Usage
example.tsx
import { SnowPile } from "@/components/guetix/snow-pile";
<SnowPile fullscreen selector="h1, h2, button, [data-snow]" />Winter / holiday seasonProduct launchesPersonal sites
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01Piles are per-element height columns, smoothed with their neighbours, and re-anchored to the element's position every frame.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| selector | string | "h1, h2, h3, button, img, [data-snow]" | Elements snow settles on. |
| density | number | 160 | Flakes alive at once. |
| maxPile | number | 18 | Max pile height (px). |
| wind | number | 0.2 | -1 … 1. |
| color | string | "255,255,255" | "r,g,b". |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Decorative layers are aria-hidden and never block clicks.
- prefers-reduced-motion: frozen or disabled.