{"id":25916087,"url":"https://github.com/apollo79/solid-snowfall","last_synced_at":"2025-09-20T09:54:17.780Z","repository":{"id":65141240,"uuid":"581862876","full_name":"apollo79/solid-snowfall","owner":"apollo79","description":"A solid component that creates a snowfall effect","archived":false,"fork":false,"pushed_at":"2024-12-27T12:03:31.000Z","size":8102,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-14T13:20:35.124Z","etag":null,"topics":["christmas","snowfall","solidjs","typescript","winter"],"latest_commit_sha":null,"homepage":"https://apollo79.github.io/solid-snowfall/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/apollo79.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-24T16:22:48.000Z","updated_at":"2024-12-27T11:37:25.000Z","dependencies_parsed_at":"2024-12-26T17:37:39.051Z","dependency_job_id":null,"html_url":"https://github.com/apollo79/solid-snowfall","commit_stats":{"total_commits":34,"total_committers":1,"mean_commits":34.0,"dds":0.0,"last_synced_commit":"95ddf257bcf0051d2ca90fad23f45b86acce8ef2"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/apollo79/solid-snowfall","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apollo79%2Fsolid-snowfall","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apollo79%2Fsolid-snowfall/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apollo79%2Fsolid-snowfall/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apollo79%2Fsolid-snowfall/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apollo79","download_url":"https://codeload.github.com/apollo79/solid-snowfall/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apollo79%2Fsolid-snowfall/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275431615,"owners_count":25463752,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-16T02:00:10.229Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["christmas","snowfall","solidjs","typescript","winter"],"created_at":"2025-03-03T12:19:11.119Z","updated_at":"2025-09-20T09:54:17.764Z","avatar_url":"https://github.com/apollo79.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Snowfall Demo](./assets/snowfall-demo.gif)\n\n# Solid Snowfall\n\n[![npm](https://img.shields.io/npm/v/solid-snowfall.svg)](https://www.npmjs.com/package/solid-snowfall)\n[![GitHub stars](https://img.shields.io/github/stars/apollo79/solid-snowfall.svg)](https://github.com/apollo79/solid-snowfall/stargazers)\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)\n\nA solid component that creates a snowfall effect\n\n- [Live Example](https://apollo79.github.io/solid-snowfall)\n- [Demo Playground](https://codesandbox.io/s/github/apollo79/solid-snowfall/tree/main/apps/demo)\n\n## Installation\n\nWith npm\n\n```\nnpm i solid-snowfall\n```\n\nWith yarn\n\n```\nyarn add solid-snowfall\n```\n\nOr wit pnpm\n\n```\npnpm add solid-snowfall\n```\n\n## Usage\n\nBasic usage requires no properties - it will grow to fill the nearest relative positioned parent element.\n\n```tsx\nimport { render } from \"solidjs/web\";\nimport SnowFall from \"solid-snowfall\";\n\nrender(\n  () =\u003e (\n    \u003c\u003e\n      \u003cSnowFall /\u003e\n  ),\n  document.getElementById(\"root\") as HTMLDivElement,\n);\n```\n\n## Configuration\n\nOptional properties can be provided to customise the animation.\n\n```tsx\n\u003cSnowfall\n  // The color of the snowflake, can be any valid CSS color.\n  color=\"#fff\"\n  // Applied to the canvas element.\n  style={{ background: '#fff' }}\n  // Controls the number of snowflakes that are created (defaults to 150).\n  snowflakeCount={200}\n/\u003e\n```\n\nAll available properties are detailed below.\n\n| Property          | Description                                                                                                                                                                                                                                                                              | Default       |\n| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |\n| `changeFrequency` | The frequency in frames that the wind and speed values will update.                                                                                                                                                                                                                      | `200`         |\n| `color`           | The color of the snowflake, can be any valid CSS color.                                                                                                                                                                                                                                  | `'#dee4fd'`   |\n| `images`          | An array of images that will be rendered as the snowflakes instead of the default circle shapes.                                                                                                                                                                                         | `undefined`   |\n| `radius`          | The minimum and maximum radius of the snowflake in pixels.\u003cbr/\u003e\u003cbr/\u003eThe value for each snowflake will be randomly selected within this range.                                                                                                                                            | `[0.5, 3.0]`  |\n| `rotationSpeed`   | The minimum and maximum rotation speed of the snowflake (in degrees of rotation per frame).\u003cbr/\u003e\u003cbr/\u003eThe rotation speed determines how quickly the snowflake rotates when an image is being rendered.\u003cbr/\u003e\u003cbr/\u003eThe value for each snowflake will be randomly selected within this range. | `[-1.0, 1.0]` |\n| `snowflakeCount`  | The number of snowflakes to be rendered.                                                                                                                                                                                                                                                 | `150`         |\n| `speed`           | The minimum and maximum speed of the snowflake (in pixels per frame).\u003cbr/\u003e\u003cbr/\u003eThe speed determines how quickly the snowflake moves along the y axis (vertical speed).\u003cbr/\u003e\u003cbr/\u003eThe value for each snowflake will be randomly selected within this range.                                | `[1.0, 3.0]`  |\n| `style`           | Any style properties that will be passed to the canvas element.                                                                                                                                                                                                                          | `undefined`   |\n| `wind`            | The minimum and maximum wind of the snowflake (in pixels per frame).\u003cbr/\u003e\u003cbr/\u003eThe wind determines how quickly the snowflake moves along the x axis (horizontal speed).\u003cbr/\u003e\u003cbr/\u003eThe value for each snowflake will be randomly selected within this range.                                | `[-0.5, 2.0]` |\n## Using Images\n\nInstead of rendering colored circles you can instead pass in an array of image elements\nthat will be randomly selected and used as the snowflake instead.\n\n\u003e _NOTE_: If the images provided are not square they will be stretched into a 1:1 aspect ratio.\n```tsx\nconst snowflake1 = document.createElement('img')\nsnowflake1.src = '/assets/snowflake-1.png'\nconst snowflake2 = document.createElement('img')\nsnowflake2.src = '/assets/snowflake-2.jpg'\nconst images = [snowflake1, snowflake2]\nconst Demo = () =\u003e {\n  return (\n    \u003cSnowfall\n      // Applied to the canvas element\n      style={{ background: '#fff' }}\n      // Controls the number of snowflakes that are created (default 150)\n      snowflakeCount={200}\n      // Pass in the images to be used\n      images={images}\n    \u003e\n  )\n}\n```\n\n## Positioning\n\nThe 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)):\n\n```css\nposition: absolute;\ntop: 0;\nleft: 0;\nwidth: 100%;\nheight: 100%;\n```\nIf you want the component to cover the entire screen then you can change the position to `fixed` by passing in an overriding styles object:\n```tsx\n\u003cSnowfall\n  style={{\n    position: 'fixed',\n    top: 0,\n    bottom: 0,\n    right: 0,\n    left: 0\n  }}\n/\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapollo79%2Fsolid-snowfall","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapollo79%2Fsolid-snowfall","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapollo79%2Fsolid-snowfall/lists"}