🌌 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! 🚀