# Northern lights background

> Soft bands of light rippling across a starry sky, as a full-screen animated background in pure HTML and CSS.

- Category: [Backgrounds](https://library.aimran.es/components/patterns)
- Built with: HTML + CSS
- Live editor: https://library.aimran.es/blocks/pt-aurora
- Library: AIMRAN Library (https://library.aimran.es), free, no sign-up, by Aimran Oukham

## Where to use it

This aurora background makes an instant hero for anything tied to night skies and calm: a tour company selling Northern Lights trips to Lapland, the landing page of a sleep or meditation app, or an astronomy club’s event page. The light bands drift and bend slowly while small stars twinkle, all with CSS and no canvas.

If you put a headline on top, lower the opacity or the speed a little so the text stays the star. Greens with violet feel like a real aurora; swapping in your brand colors turns it into a softer, more abstract gradient backdrop.

## Code

### HTML

```html
<div class="pt-aurora"><b></b><b></b><b></b><i style="left:0.0%;top:29.6%;--z:1.5;--t:-1.1s"></i><i style="left:59.8%;top:49.3%;--z:1.3;--t:-0.1s"></i><i style="left:3.8%;top:60.3%;--z:1.3;--t:-1.7s"></i><i style="left:49.3%;top:7.8%;--z:1.3;--t:-1.8s"></i><i style="left:1.3%;top:1.7%;--z:1.3;--t:-0.6s"></i><i style="left:25.2%;top:4.5%;--z:2.4;--t:-2.4s"></i><i style="left:53.9%;top:43.6%;--z:1.5;--t:-2.9s"></i><i style="left:24.8%;top:7.8%;--z:2.3;--t:-0.9s"></i><i style="left:78.7%;top:10.7%;--z:1.4;--t:-3.0s"></i><i style="left:89.8%;top:20.2%;--z:2.8;--t:-0.3s"></i><i style="left:74.1%;top:71.1%;--z:1.3;--t:-0.8s"></i><i style="left:95.5%;top:16.4%;--z:2.6;--t:-2.0s"></i><i style="left:81.8%;top:23.2%;--z:1.5;--t:-1.3s"></i><i style="left:71.3%;top:61.9%;--z:1.1;--t:-1.5s"></i><i style="left:46.0%;top:52.0%;--z:2.3;--t:-0.5s"></i><i style="left:71.4%;top:38.5%;--z:2.0;--t:-2.9s"></i><i style="left:96.0%;top:36.1%;--z:2.4;--t:-0.8s"></i><i style="left:84.3%;top:16.6%;--z:1.9;--t:-0.5s"></i><i style="left:83.1%;top:55.6%;--z:2.1;--t:-1.2s"></i><i style="left:82.3%;top:11.3%;--z:1.5;--t:-0.9s"></i><i style="left:48.3%;top:28.2%;--z:1.1;--t:-0.2s"></i><i style="left:60.5%;top:66.6%;--z:1.4;--t:-0.5s"></i><i style="left:99.8%;top:49.9%;--z:2.3;--t:-2.8s"></i><i style="left:5.3%;top:40.5%;--z:2.4;--t:-1.6s"></i><i style="left:23.6%;top:39.3%;--z:2.5;--t:-0.7s"></i><i style="left:61.2%;top:30.3%;--z:2.6;--t:-1.6s"></i><i style="left:46.1%;top:53.6%;--z:1.7;--t:-0.3s"></i><i style="left:60.3%;top:37.2%;--z:2.6;--t:-0.7s"></i><i style="left:66.4%;top:50.4%;--z:2.6;--t:-1.6s"></i><i style="left:47.9%;top:47.9%;--z:1.3;--t:-1.2s"></i><i style="left:27.3%;top:61.8%;--z:1.0;--t:-0.7s"></i><i style="left:8.1%;top:9.7%;--z:2.5;--t:-2.2s"></i><i style="left:54.3%;top:71.4%;--z:2.2;--t:-2.9s"></i><i style="left:45.1%;top:3.3%;--z:1.3;--t:-0.5s"></i><i style="left:49.9%;top:33.2%;--z:2.4;--t:-1.6s"></i><i style="left:77.0%;top:65.0%;--z:2.2;--t:-1.3s"></i><i style="left:95.0%;top:17.0%;--z:1.8;--t:-2.1s"></i><i style="left:75.6%;top:34.9%;--z:1.7;--t:-2.6s"></i><i style="left:37.8%;top:44.9%;--z:2.7;--t:-2.7s"></i><i style="left:38.0%;top:71.5%;--z:2.6;--t:-1.2s"></i><i style="left:74.4%;top:32.2%;--z:1.3;--t:-1.8s"></i><i style="left:8.5%;top:52.9%;--z:1.5;--t:-1.3s"></i><i style="left:84.2%;top:17.3%;--z:1.7;--t:-2.0s"></i><i style="left:27.7%;top:36.5%;--z:1.4;--t:-0.3s"></i><i style="left:75.9%;top:30.4%;--z:1.6;--t:-1.1s"></i><i style="left:4.9%;top:26.8%;--z:1.8;--t:-2.4s"></i><i style="left:95.5%;top:48.4%;--z:1.1;--t:-2.2s"></i><i style="left:75.0%;top:43.7%;--z:1.7;--t:-1.6s"></i><i style="left:80.1%;top:34.0%;--z:1.5;--t:-1.2s"></i><i style="left:85.4%;top:67.4%;--z:1.6;--t:-1.4s"></i><i style="left:6.7%;top:8.0%;--z:2.7;--t:-2.6s"></i><i style="left:55.4%;top:65.1%;--z:2.1;--t:-1.6s"></i><i style="left:31.0%;top:18.2%;--z:2.3;--t:-1.9s"></i><i style="left:32.0%;top:14.2%;--z:2.1;--t:-0.4s"></i><i style="left:40.2%;top:9.0%;--z:1.4;--t:-0.2s"></i><i style="left:65.8%;top:43.1%;--z:1.7;--t:-0.6s"></i><i style="left:14.0%;top:35.0%;--z:1.0;--t:-0.1s"></i><i style="left:59.9%;top:56.2%;--z:2.1;--t:-2.0s"></i><i style="left:63.2%;top:31.3%;--z:1.6;--t:-2.9s"></i><i style="left:64.7%;top:25.4%;--z:2.7;--t:-1.6s"></i><i style="left:64.5%;top:23.9%;--z:1.7;--t:-1.3s"></i><i style="left:9.5%;top:47.6%;--z:2.8;--t:-1.4s"></i><i style="left:89.1%;top:63.7%;--z:1.0;--t:-0.0s"></i><i style="left:32.0%;top:13.7%;--z:2.7;--t:-0.8s"></i><i style="left:4.7%;top:3.1%;--z:2.1;--t:-1.5s"></i><i style="left:12.7%;top:36.5%;--z:1.5;--t:-0.7s"></i><i style="left:29.2%;top:66.7%;--z:2.2;--t:-1.9s"></i><i style="left:24.3%;top:12.5%;--z:2.5;--t:-2.5s"></i><i style="left:17.0%;top:60.6%;--z:1.1;--t:-2.6s"></i><i style="left:33.1%;top:26.4%;--z:1.5;--t:-2.5s"></i></div>
```

### CSS

```css
.pt-aurora {
  --c1: #22d3a0;
  --c2: #8b5cf6;
  --c3: #0071e3;
  --k: 1;
  /* velocidad */
  --d: 1;
  /* densidad / escala */
  --o: 1;
  /* opacidad */
  --bg: #05060a;
  --fg: #ffffff;
  --blend: screen;
  min-height: 100vh;
}

.pt-aurora {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg);
  container-type: size;
  isolation: isolate;
}

.pt-aurora>* {
  opacity: var(--o);
}

.pt-aurora b {
  position: absolute;
  left: -25%;
  width: 150%;
  height: 40%;
  top: 8%;
  border-radius: 50%;
  filter: blur(40px);
  mix-blend-mode: var(--blend,screen);
  will-change: transform;
  animation: pt-aurora-w calc(14s / var(--k)) ease-in-out infinite alternate;
}

.pt-aurora b:nth-child(1) {
  background: linear-gradient(90deg,transparent,var(--c1),color-mix(in srgb,var(--c1),var(--c3)),transparent);
  transform-origin: 30% 50%;
}

.pt-aurora b:nth-child(2) {
  top: 22%;
  height: 30%;
  background: linear-gradient(90deg,transparent 10%,var(--c2),transparent 85%);
  animation-duration: calc(18s / var(--k));
  animation-delay: -6s;
}

.pt-aurora b:nth-child(3) {
  top: 0;
  height: 25%;
  background: linear-gradient(90deg,transparent 20%,var(--c3),var(--c1),transparent);
  animation-duration: calc(11s / var(--k));
  animation-direction: alternate-reverse;
}

@keyframes pt-aurora-w {
  0% {
    transform: translateX(-8%) skewY(-6deg) scaleY(.8);
  }
  50% {
    transform: translateX(6%) skewY(4deg) scaleY(1.25);
  }
  100% {
    transform: translateX(-2%) skewY(-2deg) scaleY(.9);
  }
}

.pt-aurora i {
  position: absolute;
  width: calc(var(--z) * 1px * var(--d));
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--fg,#fff);
  animation: pt-aurora-t calc(3s / var(--k)) ease-in-out infinite;
  animation-delay: var(--t);
}

@keyframes pt-aurora-t {
  0%,100% {
    opacity: calc(var(--o) * .15);
  }
  50% {
    opacity: var(--o);
  }
}
```

### React

```tsx
// @ts-nocheck
import { useEffect, useRef } from "react";

const css = `
.pt-aurora {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg);
  container-type: size;
  isolation: isolate;
}

.pt-aurora>* {
  opacity: var(--o);
}

.pt-aurora b {
  position: absolute;
  left: -25%;
  width: 150%;
  height: 40%;
  top: 8%;
  border-radius: 50%;
  filter: blur(40px);
  mix-blend-mode: var(--blend,screen);
  will-change: transform;
  animation: pt-aurora-w calc(14s / var(--k)) ease-in-out infinite alternate;
}

.pt-aurora b:nth-child(1) {
  background: linear-gradient(90deg,transparent,var(--c1),color-mix(in srgb,var(--c1),var(--c3)),transparent);
  transform-origin: 30% 50%;
}

.pt-aurora b:nth-child(2) {
  top: 22%;
  height: 30%;
  background: linear-gradient(90deg,transparent 10%,var(--c2),transparent 85%);
  animation-duration: calc(18s / var(--k));
  animation-delay: -6s;
}

.pt-aurora b:nth-child(3) {
  top: 0;
  height: 25%;
  background: linear-gradient(90deg,transparent 20%,var(--c3),var(--c1),transparent);
  animation-duration: calc(11s / var(--k));
  animation-direction: alternate-reverse;
}

@keyframes pt-aurora-w {
  0% {
    transform: translateX(-8%) skewY(-6deg) scaleY(.8);
  }
  50% {
    transform: translateX(6%) skewY(4deg) scaleY(1.25);
  }
  100% {
    transform: translateX(-2%) skewY(-2deg) scaleY(.9);
  }
}

.pt-aurora i {
  position: absolute;
  width: calc(var(--z) * 1px * var(--d));
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--fg,#fff);
  animation: pt-aurora-t calc(3s / var(--k)) ease-in-out infinite;
  animation-delay: var(--t);
}

@keyframes pt-aurora-t {
  0%,100% {
    opacity: calc(var(--o) * .15);
  }
  50% {
    opacity: var(--o);
  }
}

`;

export default function PatternAurora() {
  const ref = useRef(null);
  return (
    <>
      <style>{css}</style>
      <div
        ref={ref}
        className="pt-aurora"
        style={{
          "--c1": "#22d3a0",
          "--c2": "#8b5cf6",
          "--c3": "#0071e3",
          "--k": 1,
          "--d": 1,
          "--o": 1,
          "--bg": "#05060a",
          "--fg": "#ffffff",
          "--blend": "screen",
          minHeight: "100vh",
        }}
      >
        <b></b><b></b><b></b><i style={{ left: "0.0%", top: "29.6%", "--z": "1.5", "--t": "-1.1s" } as CSSProperties}></i><i style={{ left: "59.8%", top: "49.3%", "--z": "1.3", "--t": "-0.1s" } as CSSProperties}></i><i style={{ left: "3.8%", top: "60.3%", "--z": "1.3", "--t": "-1.7s" } as CSSProperties}></i><i style={{ left: "49.3%", top: "7.8%", "--z": "1.3", "--t": "-1.8s" } as CSSProperties}></i><i style={{ left: "1.3%", top: "1.7%", "--z": "1.3", "--t": "-0.6s" } as CSSProperties}></i><i style={{ left: "25.2%", top: "4.5%", "--z": "2.4", "--t": "-2.4s" } as CSSProperties}></i><i style={{ left: "53.9%", top: "43.6%", "--z": "1.5", "--t": "-2.9s" } as CSSProperties}></i><i style={{ left: "24.8%", top: "7.8%", "--z": "2.3", "--t": "-0.9s" } as CSSProperties}></i><i style={{ left: "78.7%", top: "10.7%", "--z": "1.4", "--t": "-3.0s" } as CSSProperties}></i><i style={{ left: "89.8%", top: "20.2%", "--z": "2.8", "--t": "-0.3s" } as CSSProperties}></i><i style={{ left: "74.1%", top: "71.1%", "--z": "1.3", "--t": "-0.8s" } as CSSProperties}></i><i style={{ left: "95.5%", top: "16.4%", "--z": "2.6", "--t": "-2.0s" } as CSSProperties}></i><i style={{ left: "81.8%", top: "23.2%", "--z": "1.5", "--t": "-1.3s" } as CSSProperties}></i><i style={{ left: "71.3%", top: "61.9%", "--z": "1.1", "--t": "-1.5s" } as CSSProperties}></i><i style={{ left: "46.0%", top: "52.0%", "--z": "2.3", "--t": "-0.5s" } as CSSProperties}></i><i style={{ left: "71.4%", top: "38.5%", "--z": "2.0", "--t": "-2.9s" } as CSSProperties}></i><i style={{ left: "96.0%", top: "36.1%", "--z": "2.4", "--t": "-0.8s" } as CSSProperties}></i><i style={{ left: "84.3%", top: "16.6%", "--z": "1.9", "--t": "-0.5s" } as CSSProperties}></i><i style={{ left: "83.1%", top: "55.6%", "--z": "2.1", "--t": "-1.2s" } as CSSProperties}></i><i style={{ left: "82.3%", top: "11.3%", "--z": "1.5", "--t": "-0.9s" } as CSSProperties}></i><i style={{ left: "48.3%", top: "28.2%", "--z": "1.1", "--t": "-0.2s" } as CSSProperties}></i><i style={{ left: "60.5%", top: "66.6%", "--z": "1.4", "--t": "-0.5s" } as CSSProperties}></i><i style={{ left: "99.8%", top: "49.9%", "--z": "2.3", "--t": "-2.8s" } as CSSProperties}></i><i style={{ left: "5.3%", top: "40.5%", "--z": "2.4", "--t": "-1.6s" } as CSSProperties}></i><i style={{ left: "23.6%", top: "39.3%", "--z": "2.5", "--t": "-0.7s" } as CSSProperties}></i><i style={{ left: "61.2%", top: "30.3%", "--z": "2.6", "--t": "-1.6s" } as CSSProperties}></i><i style={{ left: "46.1%", top: "53.6%", "--z": "1.7", "--t": "-0.3s" } as CSSProperties}></i><i style={{ left: "60.3%", top: "37.2%", "--z": "2.6", "--t": "-0.7s" } as CSSProperties}></i><i style={{ left: "66.4%", top: "50.4%", "--z": "2.6", "--t": "-1.6s" } as CSSProperties}></i><i style={{ left: "47.9%", top: "47.9%", "--z": "1.3", "--t": "-1.2s" } as CSSProperties}></i><i style={{ left: "27.3%", top: "61.8%", "--z": "1.0", "--t": "-0.7s" } as CSSProperties}></i><i style={{ left: "8.1%", top: "9.7%", "--z": "2.5", "--t": "-2.2s" } as CSSProperties}></i><i style={{ left: "54.3%", top: "71.4%", "--z": "2.2", "--t": "-2.9s" } as CSSProperties}></i><i style={{ left: "45.1%", top: "3.3%", "--z": "1.3", "--t": "-0.5s" } as CSSProperties}></i><i style={{ left: "49.9%", top: "33.2%", "--z": "2.4", "--t": "-1.6s" } as CSSProperties}></i><i style={{ left: "77.0%", top: "65.0%", "--z": "2.2", "--t": "-1.3s" } as CSSProperties}></i><i style={{ left: "95.0%", top: "17.0%", "--z": "1.8", "--t": "-2.1s" } as CSSProperties}></i><i style={{ left: "75.6%", top: "34.9%", "--z": "1.7", "--t": "-2.6s" } as CSSProperties}></i><i style={{ left: "37.8%", top: "44.9%", "--z": "2.7", "--t": "-2.7s" } as CSSProperties}></i><i style={{ left: "38.0%", top: "71.5%", "--z": "2.6", "--t": "-1.2s" } as CSSProperties}></i><i style={{ left: "74.4%", top: "32.2%", "--z": "1.3", "--t": "-1.8s" } as CSSProperties}></i><i style={{ left: "8.5%", top: "52.9%", "--z": "1.5", "--t": "-1.3s" } as CSSProperties}></i><i style={{ left: "84.2%", top: "17.3%", "--z": "1.7", "--t": "-2.0s" } as CSSProperties}></i><i style={{ left: "27.7%", top: "36.5%", "--z": "1.4", "--t": "-0.3s" } as CSSProperties}></i><i style={{ left: "75.9%", top: "30.4%", "--z": "1.6", "--t": "-1.1s" } as CSSProperties}></i><i style={{ left: "4.9%", top: "26.8%", "--z": "1.8", "--t": "-2.4s" } as CSSProperties}></i><i style={{ left: "95.5%", top: "48.4%", "--z": "1.1", "--t": "-2.2s" } as CSSProperties}></i><i style={{ left: "75.0%", top: "43.7%", "--z": "1.7", "--t": "-1.6s" } as CSSProperties}></i><i style={{ left: "80.1%", top: "34.0%", "--z": "1.5", "--t": "-1.2s" } as CSSProperties}></i><i style={{ left: "85.4%", top: "67.4%", "--z": "1.6", "--t": "-1.4s" } as CSSProperties}></i><i style={{ left: "6.7%", top: "8.0%", "--z": "2.7", "--t": "-2.6s" } as CSSProperties}></i><i style={{ left: "55.4%", top: "65.1%", "--z": "2.1", "--t": "-1.6s" } as CSSProperties}></i><i style={{ left: "31.0%", top: "18.2%", "--z": "2.3", "--t": "-1.9s" } as CSSProperties}></i><i style={{ left: "32.0%", top: "14.2%", "--z": "2.1", "--t": "-0.4s" } as CSSProperties}></i><i style={{ left: "40.2%", top: "9.0%", "--z": "1.4", "--t": "-0.2s" } as CSSProperties}></i><i style={{ left: "65.8%", top: "43.1%", "--z": "1.7", "--t": "-0.6s" } as CSSProperties}></i><i style={{ left: "14.0%", top: "35.0%", "--z": "1.0", "--t": "-0.1s" } as CSSProperties}></i><i style={{ left: "59.9%", top: "56.2%", "--z": "2.1", "--t": "-2.0s" } as CSSProperties}></i><i style={{ left: "63.2%", top: "31.3%", "--z": "1.6", "--t": "-2.9s" } as CSSProperties}></i><i style={{ left: "64.7%", top: "25.4%", "--z": "2.7", "--t": "-1.6s" } as CSSProperties}></i><i style={{ left: "64.5%", top: "23.9%", "--z": "1.7", "--t": "-1.3s" } as CSSProperties}></i><i style={{ left: "9.5%", top: "47.6%", "--z": "2.8", "--t": "-1.4s" } as CSSProperties}></i><i style={{ left: "89.1%", top: "63.7%", "--z": "1.0", "--t": "-0.0s" } as CSSProperties}></i><i style={{ left: "32.0%", top: "13.7%", "--z": "2.7", "--t": "-0.8s" } as CSSProperties}></i><i style={{ left: "4.7%", top: "3.1%", "--z": "2.1", "--t": "-1.5s" } as CSSProperties}></i><i style={{ left: "12.7%", top: "36.5%", "--z": "1.5", "--t": "-0.7s" } as CSSProperties}></i><i style={{ left: "29.2%", top: "66.7%", "--z": "2.2", "--t": "-1.9s" } as CSSProperties}></i><i style={{ left: "24.3%", top: "12.5%", "--z": "2.5", "--t": "-2.5s" } as CSSProperties}></i><i style={{ left: "17.0%", top: "60.6%", "--z": "1.1", "--t": "-2.6s" } as CSSProperties}></i><i style={{ left: "33.1%", top: "26.4%", "--z": "1.5", "--t": "-2.5s" } as CSSProperties}></i>
      </div>
    </>
  );
}
```

## Prompt for AI assistants

Paste this into ChatGPT, Claude, Cursor, v0 or Lovable to adapt the block to your stack (Tailwind, Vue, Svelte…):

````text
I want to add the “Northern lights background” block (Backgrounds) from AIMRAN Library to my project.

## What it is
Soft bands of light rippling across a starry sky, as a full-screen animated background in pure HTML and CSS.

## Chosen settings
- Color 1: #22d3a0
- Color 2: #8b5cf6
- Color 3: #0071e3
- Speed: 1x (from 0.2 to 3x)
- Density / scale: 1x (from 0.5 to 2x)
- Opacity: 1 (from 0.2 to 1)

## What I need
1. Add it to my project with the same look and animation as the reference code: same sizes, colours, radii, shadows, timings and easing.
2. It is built with plain HTML and CSS (the reference wraps it in a React component with its CSS). If my project uses something else (Vue, Svelte, Astro, plain HTML…), translate it without losing any behaviour. If I use Tailwind, turn the styles into classes; if not, keep the CSS in its own file.
3. Expose the settings above as props (or CSS variables) with those values as defaults.
4. Make it work well on phones: nothing that depends only on hover, touch targets of at least 44 px and no overflow on 320 px screens.
5. Make it look right in light and dark mode.
6. Keep it accessible: semantic HTML, roles and aria-* where needed, visible focus and keyboard support.
7. Respect prefers-reduced-motion: with reduced motion, no big animations but the same end result.

## Reference code
```tsx
// @ts-nocheck
import { useEffect, useRef } from "react";

const css = `
.pt-aurora {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg);
  container-type: size;
  isolation: isolate;
}

.pt-aurora>* {
  opacity: var(--o);
}

.pt-aurora b {
  position: absolute;
  left: -25%;
  width: 150%;
  height: 40%;
  top: 8%;
  border-radius: 50%;
  filter: blur(40px);
  mix-blend-mode: var(--blend,screen);
  will-change: transform;
  animation: pt-aurora-w calc(14s / var(--k)) ease-in-out infinite alternate;
}

.pt-aurora b:nth-child(1) {
  background: linear-gradient(90deg,transparent,var(--c1),color-mix(in srgb,var(--c1),var(--c3)),transparent);
  transform-origin: 30% 50%;
}

.pt-aurora b:nth-child(2) {
  top: 22%;
  height: 30%;
  background: linear-gradient(90deg,transparent 10%,var(--c2),transparent 85%);
  animation-duration: calc(18s / var(--k));
  animation-delay: -6s;
}

.pt-aurora b:nth-child(3) {
  top: 0;
  height: 25%;
  background: linear-gradient(90deg,transparent 20%,var(--c3),var(--c1),transparent);
  animation-duration: calc(11s / var(--k));
  animation-direction: alternate-reverse;
}

@keyframes pt-aurora-w {
  0% {
    transform: translateX(-8%) skewY(-6deg) scaleY(.8);
  }
  50% {
    transform: translateX(6%) skewY(4deg) scaleY(1.25);
  }
  100% {
    transform: translateX(-2%) skewY(-2deg) scaleY(.9);
  }
}

.pt-aurora i {
  position: absolute;
  width: calc(var(--z) * 1px * var(--d));
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--fg,#fff);
  animation: pt-aurora-t calc(3s / var(--k)) ease-in-out infinite;
  animation-delay: var(--t);
}

@keyframes pt-aurora-t {
  0%,100% {
    opacity: calc(var(--o) * .15);
  }
  50% {
    opacity: var(--o);
  }
}

`;

export default function PatternAurora() {
  const ref = useRef(null);
  return (
    <>
      <style>{css}</style>
      <div
        ref={ref}
        className="pt-aurora"
        style={{
          "--c1": "#22d3a0",
          "--c2": "#8b5cf6",
          "--c3": "#0071e3",
          "--k": 1,
          "--d": 1,
          "--o": 1,
          "--bg": "#05060a",
          "--fg": "#ffffff",
          "--blend": "screen",
          minHeight: "100vh",
        }}
      >
        <b></b><b></b><b></b><i style={{ left: "0.0%", top: "29.6%", "--z": "1.5", "--t": "-1.1s" } as CSSProperties}></i><i style={{ left: "59.8%", top: "49.3%", "--z": "1.3", "--t": "-0.1s" } as CSSProperties}></i><i style={{ left: "3.8%", top: "60.3%", "--z": "1.3", "--t": "-1.7s" } as CSSProperties}></i><i style={{ left: "49.3%", top: "7.8%", "--z": "1.3", "--t": "-1.8s" } as CSSProperties}></i><i style={{ left: "1.3%", top: "1.7%", "--z": "1.3", "--t": "-0.6s" } as CSSProperties}></i><i style={{ left: "25.2%", top: "4.5%", "--z": "2.4", "--t": "-2.4s" } as CSSProperties}></i><i style={{ left: "53.9%", top: "43.6%", "--z": "1.5", "--t": "-2.9s" } as CSSProperties}></i><i style={{ left: "24.8%", top: "7.8%", "--z": "2.3", "--t": "-0.9s" } as CSSProperties}></i><i style={{ left: "78.7%", top: "10.7%", "--z": "1.4", "--t": "-3.0s" } as CSSProperties}></i><i style={{ left: "89.8%", top: "20.2%", "--z": "2.8", "--t": "-0.3s" } as CSSProperties}></i><i style={{ left: "74.1%", top: "71.1%", "--z": "1.3", "--t": "-0.8s" } as CSSProperties}></i><i style={{ left: "95.5%", top: "16.4%", "--z": "2.6", "--t": "-2.0s" } as CSSProperties}></i><i style={{ left: "81.8%", top: "23.2%", "--z": "1.5", "--t": "-1.3s" } as CSSProperties}></i><i style={{ left: "71.3%", top: "61.9%", "--z": "1.1", "--t": "-1.5s" } as CSSProperties}></i><i style={{ left: "46.0%", top: "52.0%", "--z": "2.3", "--t": "-0.5s" } as CSSProperties}></i><i style={{ left: "71.4%", top: "38.5%", "--z": "2.0", "--t": "-2.9s" } as CSSProperties}></i><i style={{ left: "96.0%", top: "36.1%", "--z": "2.4", "--t": "-0.8s" } as CSSProperties}></i><i style={{ left: "84.3%", top: "16.6%", "--z": "1.9", "--t": "-0.5s" } as CSSProperties}></i><i style={{ left: "83.1%", top: "55.6%", "--z": "2.1", "--t": "-1.2s" } as CSSProperties}></i><i style={{ left: "82.3%", top: "11.3%", "--z": "1.5", "--t": "-0.9s" } as CSSProperties}></i><i style={{ left: "48.3%", top: "28.2%", "--z": "1.1", "--t": "-0.2s" } as CSSProperties}></i><i style={{ left: "60.5%", top: "66.6%", "--z": "1.4", "--t": "-0.5s" } as CSSProperties}></i><i style={{ left: "99.8%", top: "49.9%", "--z": "2.3", "--t": "-2.8s" } as CSSProperties}></i><i style={{ left: "5.3%", top: "40.5%", "--z": "2.4", "--t": "-1.6s" } as CSSProperties}></i><i style={{ left: "23.6%", top: "39.3%", "--z": "2.5", "--t": "-0.7s" } as CSSProperties}></i><i style={{ left: "61.2%", top: "30.3%", "--z": "2.6", "--t": "-1.6s" } as CSSProperties}></i><i style={{ left: "46.1%", top: "53.6%", "--z": "1.7", "--t": "-0.3s" } as CSSProperties}></i><i style={{ left: "60.3%", top: "37.2%", "--z": "2.6", "--t": "-0.7s" } as CSSProperties}></i><i style={{ left: "66.4%", top: "50.4%", "--z": "2.6", "--t": "-1.6s" } as CSSProperties}></i><i style={{ left: "47.9%", top: "47.9%", "--z": "1.3", "--t": "-1.2s" } as CSSProperties}></i><i style={{ left: "27.3%", top: "61.8%", "--z": "1.0", "--t": "-0.7s" } as CSSProperties}></i><i style={{ left: "8.1%", top: "9.7%", "--z": "2.5", "--t": "-2.2s" } as CSSProperties}></i><i style={{ left: "54.3%", top: "71.4%", "--z": "2.2", "--t": "-2.9s" } as CSSProperties}></i><i style={{ left: "45.1%", top: "3.3%", "--z": "1.3", "--t": "-0.5s" } as CSSProperties}></i><i style={{ left: "49.9%", top: "33.2%", "--z": "2.4", "--t": "-1.6s" } as CSSProperties}></i><i style={{ left: "77.0%", top: "65.0%", "--z": "2.2", "--t": "-1.3s" } as CSSProperties}></i><i style={{ left: "95.0%", top: "17.0%", "--z": "1.8", "--t": "-2.1s" } as CSSProperties}></i><i style={{ left: "75.6%", top: "34.9%", "--z": "1.7", "--t": "-2.6s" } as CSSProperties}></i><i style={{ left: "37.8%", top: "44.9%", "--z": "2.7", "--t": "-2.7s" } as CSSProperties}></i><i style={{ left: "38.0%", top: "71.5%", "--z": "2.6", "--t": "-1.2s" } as CSSProperties}></i><i style={{ left: "74.4%", top: "32.2%", "--z": "1.3", "--t": "-1.8s" } as CSSProperties}></i><i style={{ left: "8.5%", top: "52.9%", "--z": "1.5", "--t": "-1.3s" } as CSSProperties}></i><i style={{ left: "84.2%", top: "17.3%", "--z": "1.7", "--t": "-2.0s" } as CSSProperties}></i><i style={{ left: "27.7%", top: "36.5%", "--z": "1.4", "--t": "-0.3s" } as CSSProperties}></i><i style={{ left: "75.9%", top: "30.4%", "--z": "1.6", "--t": "-1.1s" } as CSSProperties}></i><i style={{ left: "4.9%", top: "26.8%", "--z": "1.8", "--t": "-2.4s" } as CSSProperties}></i><i style={{ left: "95.5%", top: "48.4%", "--z": "1.1", "--t": "-2.2s" } as CSSProperties}></i><i style={{ left: "75.0%", top: "43.7%", "--z": "1.7", "--t": "-1.6s" } as CSSProperties}></i><i style={{ left: "80.1%", top: "34.0%", "--z": "1.5", "--t": "-1.2s" } as CSSProperties}></i><i style={{ left: "85.4%", top: "67.4%", "--z": "1.6", "--t": "-1.4s" } as CSSProperties}></i><i style={{ left: "6.7%", top: "8.0%", "--z": "2.7", "--t": "-2.6s" } as CSSProperties}></i><i style={{ left: "55.4%", top: "65.1%", "--z": "2.1", "--t": "-1.6s" } as CSSProperties}></i><i style={{ left: "31.0%", top: "18.2%", "--z": "2.3", "--t": "-1.9s" } as CSSProperties}></i><i style={{ left: "32.0%", top: "14.2%", "--z": "2.1", "--t": "-0.4s" } as CSSProperties}></i><i style={{ left: "40.2%", top: "9.0%", "--z": "1.4", "--t": "-0.2s" } as CSSProperties}></i><i style={{ left: "65.8%", top: "43.1%", "--z": "1.7", "--t": "-0.6s" } as CSSProperties}></i><i style={{ left: "14.0%", top: "35.0%", "--z": "1.0", "--t": "-0.1s" } as CSSProperties}></i><i style={{ left: "59.9%", top: "56.2%", "--z": "2.1", "--t": "-2.0s" } as CSSProperties}></i><i style={{ left: "63.2%", top: "31.3%", "--z": "1.6", "--t": "-2.9s" } as CSSProperties}></i><i style={{ left: "64.7%", top: "25.4%", "--z": "2.7", "--t": "-1.6s" } as CSSProperties}></i><i style={{ left: "64.5%", top: "23.9%", "--z": "1.7", "--t": "-1.3s" } as CSSProperties}></i><i style={{ left: "9.5%", top: "47.6%", "--z": "2.8", "--t": "-1.4s" } as CSSProperties}></i><i style={{ left: "89.1%", top: "63.7%", "--z": "1.0", "--t": "-0.0s" } as CSSProperties}></i><i style={{ left: "32.0%", top: "13.7%", "--z": "2.7", "--t": "-0.8s" } as CSSProperties}></i><i style={{ left: "4.7%", top: "3.1%", "--z": "2.1", "--t": "-1.5s" } as CSSProperties}></i><i style={{ left: "12.7%", top: "36.5%", "--z": "1.5", "--t": "-0.7s" } as CSSProperties}></i><i style={{ left: "29.2%", top: "66.7%", "--z": "2.2", "--t": "-1.9s" } as CSSProperties}></i><i style={{ left: "24.3%", top: "12.5%", "--z": "2.5", "--t": "-2.5s" } as CSSProperties}></i><i style={{ left: "17.0%", top: "60.6%", "--z": "1.1", "--t": "-2.6s" } as CSSProperties}></i><i style={{ left: "33.1%", top: "26.4%", "--z": "1.5", "--t": "-2.5s" } as CSSProperties}></i>
      </div>
    </>
  );
}
```

Give me the complete final code, ready to paste, and tell me in one line where to put it in my project.
````