{"id":18947856,"url":"https://github.com/thenaubit/react-aurora-background","last_synced_at":"2025-04-15T23:30:30.467Z","repository":{"id":64534329,"uuid":"575948055","full_name":"TheNaubit/react-aurora-background","owner":"TheNaubit","description":"🌌 React Aurora background component. Lightweight, customizable, beautiful.","archived":false,"fork":false,"pushed_at":"2023-08-11T21:09:11.000Z","size":4758,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-09-16T03:19:48.103Z","etag":null,"topics":["css","glassmorphism","react","react-components","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://thenaubit.github.io/react-aurora-background/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TheNaubit.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-12-08T16:55:29.000Z","updated_at":"2024-09-08T03:39:39.000Z","dependencies_parsed_at":"2022-12-11T04:02:04.337Z","dependency_job_id":null,"html_url":"https://github.com/TheNaubit/react-aurora-background","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheNaubit%2Freact-aurora-background","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheNaubit%2Freact-aurora-background/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheNaubit%2Freact-aurora-background/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheNaubit%2Freact-aurora-background/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TheNaubit","download_url":"https://codeload.github.com/TheNaubit/react-aurora-background/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223688707,"owners_count":17186298,"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":["css","glassmorphism","react","react-components","reactjs","typescript"],"created_at":"2024-11-08T13:11:44.096Z","updated_at":"2024-11-08T13:11:44.958Z","avatar_url":"https://github.com/TheNaubit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌌 React Aurora Component\n\nMy personal, lightweight, customizable and beautiful take for the typical background aurora effect we see in some websites using the glassmorphism style. Plug and play!\n\n![React Aurora Component](./projectImage.jpg)\n\n## 🎞️ Demo\n\nYou can see it working by yourself in this little demo: [https://thenaubit.github.io/react-aurora-background/](https://thenaubit.github.io/react-aurora-background/)\n\n## ✨ Features\n\n- Uses TypeScript by default.\n- It has both ESM and CJS modules, as well as type definitions.\n- Minimal - Almost no dependencies!\n- Fast\n- SSR compatible! (and of course, it works in Next.JS 13 as a Server Component!)\n- Customizable. Change everything. Colors, speed, blur...\n- Compatible. It works in Chrome, Edge, Firefox, Webkit... desktop and mobile devices!\n\n## 🔧 How to install?\n\nJust type this in your terminal:\n\n```\nnpm install @nauverse/react-aurora-background\n```\n\nOr in case you are using `yarn`:\n\n```\nyarn add @nauverse/react-aurora-background\n```\n\nAlso for `pnpm`:\n\n```\npnpm i @nauverse/react-aurora-background\n```\n\n## ❓ How to use it?\n\nJust wrap your app with it, like another provider.\n\n```javascript\n// 1. Import the provider\nimport { AuroraBackgroundProvider } from '@nauverse/react-aurora-background';\n\nconst MyApp = () =\u003e {\n  return (\n    // 2. Wrap your app with the provider and done!\n    \u003cAuroraBackgroundProvider\u003e\n      // The rest of your app\n    \u003c/AuroraBackgroundProvider\u003e\n  );\n};\n```\n\nIf you want an example, you can check this [one](https://github.com/TheNaubit/react-aurora-background/blob/main/docs/docs.tsx).\n\n### 🛠️ Settings\n\nYou can set some props to the provider to customize the behavior:\n|Prop Name |Description |Default Value |\n|--- |--- |--- |\n|colors |It contains an array of color strings (hex, rgb or rgba) that will be used in the aurora background. |[\"#FC466B\", \"#3f5efb\", \"#F8FF00\", \"#3AD59F\"] |\n|numBubbles |It is the number of bubbles that creates the aurora effect. It can be an integer between 2 and 9 (both inclusive). I recommend to pick a number closer to the middle for the best experience. |4 |\n|animDuration |It is a number greater than 0 (can be decimal). It is the duration in seconds of the aurora animation before it loops. |5 (seconds) |\n|blurAmount |It can be a number or a string. It specifies the amount of blur the aurora will have. It sets a backdropFilter CSS property so the value must be a valid CSS value. If you pass a number, it will be converted to pixels by appending a \"px\" string after the number. If you pass a string, it must be a valid CSS value (like \"5vw\", \"100%\"...). |\"10vw\" |\n|bgColor |It is the color of the background of the div containing the aurora. It is a color string (hex, rgb or rgba). |\"#3f5efb\" |\n|useRandomness |It is a boolean. If enabled, instead of using always the same values for width, height and animation-delay properties on each bubble item, it will add some small randomness. |false |\n|className |An optional string containing the extra class/classes to be added to the container. |\u003cempty\u003e |\n|style |An optional object containing styles to be added to the container. |\u003cempty\u003e |\n\n## 🐛 Bugs, Issues and Contributing\n\nThis is an Open Source package so feel free to create an Issue or a Pull Request (or even to Fork it) if you want!\n\n## 🐣 About me!\n\nFind me on Twitter: [@naucode](https://twitter.com/naucode)\n\n## 💭 Changelog\n\n- **v1.0.12:** Improved the internal structure 🔧\n- **v1.0.11:** Added extra props and fixed build issues 🔧\n- **v1.0.10:** Updated dependencies and fixed broken links 🔗\n- **v1.0.9:** Improved default settings ✨\n- **v1.0.8:** Fixed Firefox support 🔧\n- **v1.0.7:** Fixed iOS blur issue 🔧\n- **v1.0.6:** Added some performance improvements (now we use the GPU when possible) ✨\n- **v1.0.5:** Fixed optimization in bubble items 🔧\n- **v1.0.4:** Fixed build generation - part 2 🔧\n- **v1.0.3:** Fixed build generation 🔧\n- **v1.0.2:** Fixed demo link 🔧\n- **v1.0.1:** Fixed docs 🔧\n- **v1.0.0:** This is the first public version of the package, let's go! 🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthenaubit%2Freact-aurora-background","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthenaubit%2Freact-aurora-background","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthenaubit%2Freact-aurora-background/lists"}