https://github.com/apollo79/solid-snowfall
A solid component that creates a snowfall effect
https://github.com/apollo79/solid-snowfall
christmas snowfall solidjs typescript winter
Last synced: 3 months ago
JSON representation
A solid component that creates a snowfall effect
- Host: GitHub
- URL: https://github.com/apollo79/solid-snowfall
- Owner: apollo79
- License: other
- Created: 2022-12-24T16:22:48.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-27T12:03:31.000Z (5 months ago)
- Last Synced: 2025-01-27T15:49:38.197Z (4 months ago)
- Topics: christmas, snowfall, solidjs, typescript, winter
- Language: TypeScript
- Homepage: https://apollo79.github.io/solid-snowfall/
- Size: 7.73 MB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Solid Snowfall
[](https://www.npmjs.com/package/solid-snowfall)
[](https://github.com/apollo79/solid-snowfall/stargazers)
[](https://conventionalcommits.org)
A solid component that creates a snowfall effect
- [Live Example](https://apollo79.github.io/solid-snowfall)
- [Demo Playground](https://codesandbox.io/s/github/apollo79/solid-snowfall/tree/main/apps/demo)
## Installation
With npm
```
npm i solid-snowfall
```
With yarn
```
yarn add solid-snowfall
```
Or wit pnpm
```
pnpm add solid-snowfall
```
## Usage
Basic usage requires no properties - it will grow to fill the nearest relative positioned parent element.
```tsx
import { render } from "solidjs/web";
import SnowFall from "solid-snowfall";
render(
() => (
<>
),
document.getElementById("root") as HTMLDivElement,
);
```
## Configuration
Optional properties can be provided to customise the animation.
```tsx
```
All available properties are detailed below.
| Property | Description | Default |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `changeFrequency` | The frequency in frames that the wind and speed values will update. | `200` |
| `color` | The color of the snowflake, can be any valid CSS color. | `'#dee4fd'` |
| `images` | An array of images that will be rendered as the snowflakes instead of the default circle shapes. | `undefined` |
| `radius` | The minimum and maximum radius of the snowflake in pixels.
The value for each snowflake will be randomly selected within this range. | `[0.5, 3.0]` |
| `rotationSpeed` | The minimum and maximum rotation speed of the snowflake (in degrees of rotation per frame).
The rotation speed determines how quickly the snowflake rotates when an image is being rendered.
The value for each snowflake will be randomly selected within this range. | `[-1.0, 1.0]` |
| `snowflakeCount` | The number of snowflakes to be rendered. | `150` |
| `speed` | The minimum and maximum speed of the snowflake (in pixels per frame).
The speed determines how quickly the snowflake moves along the y axis (vertical speed).
The value for each snowflake will be randomly selected within this range. | `[1.0, 3.0]` |
| `style` | Any style properties that will be passed to the canvas element. | `undefined` |
| `wind` | The minimum and maximum wind of the snowflake (in pixels per frame).
The wind determines how quickly the snowflake moves along the x axis (horizontal speed).
The value for each snowflake will be randomly selected within this range. | `[-0.5, 2.0]` |
## Using Images
Instead of rendering colored circles you can instead pass in an array of image elements
that will be randomly selected and used as the snowflake instead.
> _NOTE_: If the images provided are not square they will be stretched into a 1:1 aspect ratio.
```tsx
const snowflake1 = document.createElement('img')
snowflake1.src = '/assets/snowflake-1.png'
const snowflake2 = document.createElement('img')
snowflake2.src = '/assets/snowflake-2.jpg'
const images = [snowflake1, snowflake2]
const Demo = () => {
return (
)
}
```
## Positioning
The snowfall container is absolute positioned and has the following default styles (see [the definition](https://github.com/apollo79/solid-snowfall/blob/main/packages/solid-snowfall/src/config.ts#L4-L10)):
```css
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
```
If you want the component to cover the entire screen then you can change the position to `fixed` by passing in an overriding styles object:
```tsx
```