@nauverse/react-aurora-background v1.0.12
🌌 React Aurora Component
My personal, lightweight, customizable and beautiful take for the typical background aurora effect we see in some websites using the glassmorphism style. Plug and play!
🎞️ Demo
You can see it working by yourself in this little demo: https://thenaubit.github.io/react-aurora-background/
✨ Features
- Uses TypeScript by default.
- It has both ESM and CJS modules, as well as type definitions.
- Minimal - Almost no dependencies!
- Fast
- SSR compatible! (and of course, it works in Next.JS 13 as a Server Component!)
- Customizable. Change everything. Colors, speed, blur...
- Compatible. It works in Chrome, Edge, Firefox, Webkit... desktop and mobile devices!
🔧 How to install?
Just type this in your terminal:
npm install @nauverse/react-aurora-background
Or in case you are using yarn
:
yarn add @nauverse/react-aurora-background
Also for pnpm
:
pnpm i @nauverse/react-aurora-background
❓ How to use it?
Just wrap your app with it, like another provider.
// 1. Import the provider
import { AuroraBackgroundProvider } from '@nauverse/react-aurora-background';
const MyApp = () => {
return (
// 2. Wrap your app with the provider and done!
<AuroraBackgroundProvider>
// The rest of your app
</AuroraBackgroundProvider>
);
};
If you want an example, you can check this one.
🛠️ Settings
You can set some props to the provider to customize the behavior: |Prop Name |Description |Default Value | |--- |--- |--- | |colors |It contains an array of color strings (hex, rgb or rgba) that will be used in the aurora background. |"#FC466B", "#3f5efb", "#F8FF00", "#3AD59F" | |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 | |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) | |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" | |bgColor |It is the color of the background of the div containing the aurora. It is a color string (hex, rgb or rgba). |"#3f5efb" | |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 | |className |An optional string containing the extra class/classes to be added to the container. | | |style |An optional object containing styles to be added to the container. | |
🐛 Bugs, Issues and Contributing
This is an Open Source package so feel free to create an Issue or a Pull Request (or even to Fork it) if you want!
🐣 About me!
Find me on Twitter: @naucode
💭 Changelog
- v1.0.12: Improved the internal structure 🔧
- v1.0.11: Added extra props and fixed build issues 🔧
- v1.0.10: Updated dependencies and fixed broken links 🔗
- v1.0.9: Improved default settings ✨
- v1.0.8: Fixed Firefox support 🔧
- v1.0.7: Fixed iOS blur issue 🔧
- v1.0.6: Added some performance improvements (now we use the GPU when possible) ✨
- v1.0.5: Fixed optimization in bubble items 🔧
- v1.0.4: Fixed build generation - part 2 🔧
- v1.0.3: Fixed build generation 🔧
- v1.0.2: Fixed demo link 🔧
- v1.0.1: Fixed docs 🔧
- v1.0.0: This is the first public version of the package, let's go! 🚀