# Aurora Flow

> The AuroraFlow component is a custom React background effect built using WebGL with OGL. It renders a smooth, animated aurora-like gradient that constantly shifts and flows, creating a modern and immersive visual experience. The effect combines soft color gradients, subtle noise-based distortions, and a glow effect to mimic the natural look of flowing lights in the sky. Designed to be fully responsive, it automatically adapts to the size of its parent container and maintains crisp quality with device pixel ratio scaling. This makes it a great choice for hero sections, landing pages, or fullscreen interactive backgrounds where you want a dynamic yet elegant atmosphere.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: ogl
- Live preview: https://21st.dev/@ruixen.ui/components/aurora-flow

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/aurora-flow?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt