{"id":14990242,"url":"https://github.com/h0rn0chse/nightsky","last_synced_at":"2025-04-12T02:10:17.601Z","repository":{"id":41551410,"uuid":"445909157","full_name":"H0rn0chse/NightSky","owner":"H0rn0chse","description":"WebComponent for a night sky full of stars parallax background made with css only","archived":false,"fork":false,"pushed_at":"2024-03-09T10:38:25.000Z","size":11111,"stargazers_count":12,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T21:47:39.364Z","etag":null,"topics":["background","css","css-animation","field","night","nightsky","parallax","sky","star","starfield","webcomponent"],"latest_commit_sha":null,"homepage":"https://h0rn0chse.github.io/NightSky","language":"JavaScript","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/H0rn0chse.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-01-08T19:24:04.000Z","updated_at":"2024-07-22T10:53:11.000Z","dependencies_parsed_at":"2024-09-24T16:01:14.077Z","dependency_job_id":null,"html_url":"https://github.com/H0rn0chse/NightSky","commit_stats":{"total_commits":48,"total_committers":2,"mean_commits":24.0,"dds":"0.16666666666666663","last_synced_commit":"a40631bfd507b752b3d631a044b163e9336d9848"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/H0rn0chse%2FNightSky","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/H0rn0chse%2FNightSky/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/H0rn0chse%2FNightSky/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/H0rn0chse%2FNightSky/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/H0rn0chse","download_url":"https://codeload.github.com/H0rn0chse/NightSky/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505929,"owners_count":21115354,"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":["background","css","css-animation","field","night","nightsky","parallax","sky","star","starfield","webcomponent"],"created_at":"2024-09-24T14:19:46.081Z","updated_at":"2025-04-12T02:10:17.579Z","avatar_url":"https://github.com/H0rn0chse.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NightSky\n\nThis WebComponent is inspired by the CodePen [Parallax Star background in CSS](https://codepen.io/saransh/pen/BKJun) from [Saransh Sinha](https://codepen.io/saransh). Since this is a WebComponent it can be easily integrated in any React or Vue app. Check out the [live demo](https://h0rn0chse.github.io/NightSky).\n\n- [Libraries](#libraries)\n- [Usage](#usage)\n- [Documentation](#documentation)\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"./assets/animation.gif\" /\u003e\n\u003c/p\u003e\n\n## Libraries\n\n- Approach [Parallax Star background in CSS](https://codepen.io/saransh/pen/BKJun)\n- Font [Google Font Poppins](https://fonts.google.com/specimen/Poppins)\n  - Fetched via [github.com/majodev/google-webfonts-helper](https://github.com/majodev/google-webfonts-helper)\n- Feather Icons [github.com/feathericons/feather](https://github.com/feathericons/feather)\n- Github Corners [github.com/YuskaWu/github-corner-element](https://github.com/YuskaWu/github-corner-element)\n\n## Usage\n\nPlease checkout the [demo](https://h0rn0chse.github.io/NightSky). You can add the resources either locally or via a CDN (or as [npm package](https://www.npmjs.com/package/@h0rn0chse/night-sky)):\n\n```html\n\u003cscript src=\"https://unpkg.com/@h0rn0chse/night-sky/dist/bundle.min.js\"\u003e\u003c/script\u003e\n```\n\nYou can add the background as WebComponent.\n\n```html\n\u003cnight-sky\n  id=\"nightSky\"\n  layers=\"4\"\n  density=\"30\"\n  velocity-x=\"60\"\n  velocity-y=\"60\"\n  star-color=\"#FFF\"\n  background-color=\"transparent\"\n\u003e\n\u003c/night-sky\u003e\n```\n\nYou have to set a size on the background.\n\n```css\n#nightSky {\n  width: 100vw;\n  height: 100vh;\n  overflow: hidden;\n}\n```\n\n## Documentation\n\nThe WebComponent allows for some customizations via its attributes:\n\n### layers\n\nThe amount of `layers` provided as positive integer.\n\n### density\n\n`density` describes the amount of stars in the first layer in screen with 192x1080px. Each additional layer doubles the amount of stars. It should be provided as positive integer.\n\n### velocity-x\n\n`velocity-x` describes the speed of the last layer. Each layer above moves with nth time of this speed. It should be\nprovided as positive or negative integer.\n\n### velocity-y\n\n`velocity-y` describes the speed of the last layer. Each layer above moves with nth time of this speed. It should be\nprovided as positive or negative integer.\n\n### star-color\n\n`star-color` is the color of the star. It should be provided as valid css color.\n\n### background-color\n\n`background-color` currently only supports the value `transparent` to disable the predefined background.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fh0rn0chse%2Fnightsky","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fh0rn0chse%2Fnightsky","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fh0rn0chse%2Fnightsky/lists"}