Snow Effect

A lightweight, peaceful snowfall animation rendered on an HTML5 Canvas. Perfect for seasonal themes or adding a sense of tranquility to hero sections.

Installation

npx raya-ui@latest add snow-effect

File Structure

your-project

components

snow-effect

SnowEffect.vue

API Reference

Props

color

string

"#FFF"

The Hex color code for the snowflakes.

quantity

number

100

Total number of snowflakes rendered on the screen.

speed

number

1

Vertical fall speed multiplier. Higher values create a blizzard effect.

minRadius

number

1

Minimum size (in pixels) for the randomly generated snowflakes.

maxRadius

number

3

Maximum size (in pixels) for the randomly generated snowflakes.

Winter Mode

Dynamic Canvas Snowfall

Settings

Snow Density150 flakes

Fall Speed1.0x

Min Size

Max Size

Snow Color

#ffffff

source-code.vue

<script setup lang="ts">
import { SnowEffect } from '@/components/ui/snow-effect'
</script>

<template>
  <div class="relative w-full h-[500px] overflow-hidden bg-background">
    <SnowEffect
    :quantity="150"
    />

    <div class="relative z-10 flex items-center justify-center h-full pointer-events-none">
      <h1 class="text-4xl font-bold tracking-tighter">Winter Mode</h1>
    </div>
  </div>
</template>