Astro Snowfall - Premium Snow Animations for Astro

Installation

Add the component to your project using the shadcn CLI or manually copy the source.

Zero Dependencies

Pure TypeScript & HTML Canvas

Because it uses native browser APIs, you don't need to bloat your node_modules with heavy animation libraries. It just works.

~3kb

Gzipped

60fps

Target Fluidity

1

Using NPM Recommended

Install as a standard dependency.

Terminal

npm install astro-snowfall

OR

2

Using Shadcn CLI

Install automatically with all dependencies.

Terminal

npx shadcn@latest add https://fermeridamagni.github.io/astro-snowfall/r/snowfall.json

OR

3

Manual Installation

Step A: Lib Files

Terminal

cp -r src/lib/snowfall your-project/src/lib/

Step B: Component

Terminal

cp src/components/Snowfall.astro your-project/src/components/

Why Astro Snowfall?

Everything you need for a wintery web experience.

⚡

Optimized Performance

Uses requestAnimationFrame and batch rendering for 60fps performance on any device.

🎨

Highly Configurable

Control snowflake color, size, speed, density, wind, and more with simple props.

📱

Fully Responsive

Canvas automatically resizes and handles window resizing efficiently.

🌀

3D Rotation

Realistic tumbling motion with optional 3D transformation matrices.

🛡️

Type Safe

Built with TypeScript for full autocomplete and type safety.

🚀

Zero Runtime Overhead

Astro island architecture ensures minimal JS payload.

Usage

Quick Start

Basic Implementation

Import the component and drop it on your page. By default, it will cover the container it is placed in.

Default configuration looks great out of the box
Auto-resizes with container

src/pages/index.astro

---
import Snowfall from 'astro-snowfall';

/**
 * or if you are using the library directly:
 * import Snowfall from '../components/Snowfall.astro';
 */
---

<div class="relative min-h-[500px]">
  <Snowfall /> 
  <div class="relative z-10">
    <h1>Winter is coming</h1>
  </div>
</div>

Popular

Full Screen Background

To create a fixed background that stays in place while you scroll, use standard CSS positioning.

FullScreen.astro

<Snowfall 
  class="fixed inset-0 z-0 pointer-events-none"
  color="#fff"
  snowflakeCount={200}
/>

Examples

Heavy Blizzard

<Snowfall 
  snowflakeCount={100}
  speed={[3, 8]}
  wind={[-2, 2]}
  radius={[0.5, 3]}
/>

Gentle Flurries

<Snowfall 
  snowflakeCount={40}
  speed={[0.5, 1.5]}
  wind={[-0.5, 0.5]}
  radius={[1, 2]}
/>

Confetti Party

<Snowfall 
  color="#EC4899"
  enable3DRotation={true}
  snowflakeCount={50}
  rotationSpeed={[-5, 5]}
  radius={[2, 6]}
/>

Props API

Prop	Type	Default	Description
color	string	'#dee4fd'	Color of snowflakes. Can be any CSS color.
snowflakeCount	number	150	Number of snowflakes to render.
radius	[number, number]	[0.5, 3.0]	Min and max radius in pixels.
speed	[number, number]	[1.0, 3.0]	Min and max vertical falling speed.
wind	[number, number]	[-0.5, 2.0]	Min and max horizontal wind speed.
enable3DRotation	boolean	false	Enables 3D tumbling chips effect.
rotationSpeed	[number, number]	[-1.0, 1.0]	Rotation speed in degrees per frame (only with 3D).