Skip to content

🌌 React Aurora background component. Lightweight, customizable, beautiful.

Notifications You must be signed in to change notification settings

TheNaubit/react-aurora-background

Repository files navigation

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

React Aurora Component

🎞️ 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! πŸš€