{"id":13902897,"url":"https://github.com/hcodes/snowflakes","last_synced_at":"2025-05-15T04:00:20.249Z","repository":{"id":44796239,"uuid":"48637349","full_name":"hcodes/snowflakes","owner":"hcodes","description":"❄️ Falling snowflakes","archived":false,"fork":false,"pushed_at":"2025-01-15T22:21:55.000Z","size":2213,"stargazers_count":384,"open_issues_count":7,"forks_count":62,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-14T14:42:08.560Z","etag":null,"topics":["christmas","falling-snowflakes","happy-new-year","snowflake","snowflakes"],"latest_commit_sha":null,"homepage":"https://hcodes.github.io/snowflakes/examples/constructor","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hcodes.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2015-12-27T07:57:28.000Z","updated_at":"2025-04-17T03:54:15.000Z","dependencies_parsed_at":"2024-01-14T18:13:22.981Z","dependency_job_id":"a11cf505-7ebf-489c-a874-97173bd23026","html_url":"https://github.com/hcodes/snowflakes","commit_stats":{"total_commits":185,"total_committers":3,"mean_commits":"61.666666666666664","dds":"0.45945945945945943","last_synced_commit":"cfd331e7a1bd00f70ed746226adf9cb87c25b14d"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hcodes%2Fsnowflakes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hcodes%2Fsnowflakes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hcodes%2Fsnowflakes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hcodes%2Fsnowflakes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hcodes","download_url":"https://codeload.github.com/hcodes/snowflakes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254183870,"owners_count":22028590,"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","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","falling-snowflakes","happy-new-year","snowflake","snowflakes"],"created_at":"2024-08-06T22:01:29.218Z","updated_at":"2025-05-15T04:00:20.214Z","avatar_url":"https://github.com/hcodes.png","language":"TypeScript","readme":"❄️☃️🎄 [Falling snowflakes](https://hcodes.github.io/demo-snowflakes/)\n==================\n[![NPM version](https://img.shields.io/npm/v/magic-snowflakes.svg)](https://www.npmjs.com/package/magic-snowflakes)\n[![NPM Downloads](https://img.shields.io/npm/dm/magic-snowflakes.svg?style=flat)](https://www.npmjs.org/package/magic-snowflakes)\n[![install size](https://packagephobia.com/badge?p=magic-snowflakes)](https://packagephobia.com/result?p=magic-snowflakes)\n\n\u003cimg width=\"600\" src=\"./img/flakes.png\" /\u003e\n\n## Details\n- Only one JavaScript file\n- CSS Animation\n- Rubber design\n- Flexible settings\n\n## [Examples](https://hcodes.github.io/demo-snowflakes/)\n- 🔍 [Constructor](https://hcodes.github.io/snowflakes/examples/constructor): change settings and copy code for your site\n- 🎲 [3D Cube](https://hcodes.github.io/snowflakes/examples/3d_cube.html)\n- ❄ [Simple](https://hcodes.github.io/snowflakes/examples/simple.html)\n- 🎨 [Multicolor](https://hcodes.github.io/snowflakes/examples/multicolor.html)\n- 🐘 [Big](https://hcodes.github.io/snowflakes/examples/big.html)\n- 🍋 [Blend mode](https://hcodes.github.io/snowflakes/examples/blend_mode.html)\n- 🪟 [Layer](https://hcodes.github.io/snowflakes/examples/layer.html)\n- 🏠 [Some layers](https://hcodes.github.io/snowflakes/examples/some_layers.html)\n- 💛 [Own kind](https://hcodes.github.io/snowflakes/examples/balls.html)\n- 🗻[Own z-index](https://hcodes.github.io/snowflakes/examples/z-index.html)\n\n[See details](https://github.com/hcodes/snowflakes/tree/master/examples)\n\n## Using\n\n```\nnpm i magic-snowflakes --save-dev\n```\n\n### Without settings\nPaste anywhere in your page's HTML:\n```html\n\u003cscript src=\"https://unpkg.com/magic-snowflakes/dist/snowflakes.auto.min.js\"\u003e\u003c/script\u003e\n```\n\n### With settings\n```html\n\u003chtml\u003e\n\u003cbody\u003e\n    ...\n    \u003cscript src=\"https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n        new Snowflakes({\n            wind: false,\n            rotation: false\n        });\n    \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Advanced settings\n```html\n\u003chtml\u003e\n\u003chead\u003e\n\u003cstyle\u003e\n    #snowflakes-container {\n        width: 500px;\n        height: 500px;\n        position: relative;\n        overflow: hidden;\n    }\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv id=\"snowflakes-container\"\u003e\u003c/div\u003e\n    \u003cscript src=\"https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n        var snowflakes = new Snowflakes({\n            color: '#f00', // Default: \"#5ECDEF\"\n            container: document.querySelector('#snowflakes-container'), // Default: document.body\n            count: 100, // 100 snowflakes. Default: 50\n            minOpacity: 0.1, // From 0 to 1. Default: 0.6\n            maxOpacity: 0.95, // From 0 to 1. Default: 1\n            minSize: 20, // Default: 10\n            maxSize: 50, // Default: 25\n            rotation: true, // Default: true\n            speed: 2, // The property affects the speed of falling. Default: 1\n            wind: false, // Without wind. Default: true\n            width: 500, // Default: width of container\n            height: 250, // Default: height of container\n            zIndex: 100, // Default: 9999,\n            autoResize: true // Default: true\n        });\n    \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Typescript or ES6\n```js\nimport Snowflakes from 'magic-snowflakes';\nconst snowflakes = new Snowflakes();\n// ...\nsnowflakes.stop();\n// ...\nsnowflakes.start();\n// ...\nsnowflakes.destroy();\n```\n\n## API\n\n```js\nimport Snowflakes from 'magic-snowflakes';\nconst snowflakes = new Snowflakes();\n```\n\n### .start()\nStart CSS Animation.\n\n### .stop()\nStop CSS Animation.\n\n### .show()\nShow snowflakes.\n\n### .hide()\nHide snowflakes.\n\n### .resize()\nResize snowflakes.\n\n### .destroy()\nDestroy the instance of snowflakes.\n\n## Different Builds\nIn the `dist/` directory of [the NPM package](https://unpkg.com/magic-snowflakes/dist/) you will find many different builds of snowflakes.js.\n\n|Type                   |Filename                 |Description         |\n|-----------------------|-------------------------|--------------------|\n|Full (UMD)             |`snowflakes.js`          |                    |\n|Full (UMD, production) |`snowflakes.min.js`      |                    |\n|Full auto              |`snowflakes.auto.js`     | Without API        |\n|Full auto (production) |`snowflakes.auto.min.js` | Without API        |\n|ES6 or Typescript      |`snowflakes.esm.js`      |                    |\n|Light (UMD)            |`snowflakes.light.js`    | Without SVG images |\n|Light (UMD, production)|`snowflakes.light.min.js`| Without SVG images |\n\n\n## Development\n```\ngit clone git@github.com:hcodes/snowflakes.git ./snowflakes\ncd ./snowflakes\n\nnpm i\nnpm run build\nnpm test\n\nopen ./examples/\n```\n\n## [License](LICENSE)\nMIT License\n\n\n## Friends\n- [Check device online](https://checkdevice.online/?from=github-snowflakes)\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhcodes%2Fsnowflakes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhcodes%2Fsnowflakes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhcodes%2Fsnowflakes/lists"}