# Névoa

A CSS-only animated background with blue and violet light bands drifting slowly, like the northern lights.

> Névoa is an animated background from THM Componentes that imitates the northern lights: blue and violet bands of light drift slowly behind your content. It is pure CSS with no WebGL, so it stays light and works well in SaaS heroes, company pages and login screens, in both light and dark mode.

- Category: Backgrounds and atmospheres
- Origin: Adapted from open source under the MIT license, with a ready THM prompt
- Load weight: Light: CSS or light JavaScript, no noticeable cost
- Technology: Vue 3, TypeScript, Tailwind CSS v4
- Interaction: None: the effect runs on its own
- URL: https://vibecode.thmtecnologia.com/en/components/nevoa/

## What it looks like

Picture the northern lights seen through a fogged window. Diagonal bands of blue, indigo and lilac repeat and slide slowly sideways in a 60-second loop, with a soft blur that melts their edges. A radial mask concentrates the glow in the top right corner and keeps the rest of the area clean for text. In dark mode the bands sit on a near-black backdrop; in light mode, on an off-white gray. Whatever you place inside the component is centered on top, and the section fills the height of the screen.

## You may be looking for this if you asked for something like

- “a background with colorful light slowly moving behind the headline”
- “a northern lights background for my landing page”
- “an animated blue and purple gradient that will not slow the site down”
- “a nice hero background for my SaaS without using 3D”
- “an aurora effect at the top of the site”
- “a subtle animated background that works in dark mode”

## Also known as

drifting light bands, northern lights background, animated gradient background, aurora borealis effect, moving gradient backdrop

## When to use

- A SaaS or digital product hero that needs a refined mood
- Login or sign-up screens that should not feel plain
- Company pages where a WebGL effect would be overkill
- Launch sections with a short, large headline

## When to avoid

- Areas with long body text, where the bands get in the way of reading
- Brands with a warm palette, unless you change the component colors

## How to ask your AI

```text
Create a CSS-only northern lights background behind the homepage headline: light bands in my brand colors drifting slowly, with a soft blur and a static version for people who prefer reduced motion.
```

With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.

## Questions about Névoa

### Will Névoa slow down my site?

Usually not. Névoa uses only gradients, blur and a CSS animation, with no WebGL and no animation JavaScript, so it is rated Light in THM Componentes. On older phones the blur is the most demanding part, so it is worth checking LCP before and after adding it.

### Can I change the aurora colors?

Yes. Névoa keeps its colors in CSS variables, and the THM Componentes prompt tells your AI to replace the blue and violet tones with your project color tokens. It works in light and dark mode, with the backdrop and the bands adjusted for each.

### Does Névoa respect reduced motion settings?

The original component always animates. The THM Componentes prompt asks your AI for a static version for people who turn on reduced motion in their system settings, which is simple with Névoa: pause the CSS animation and keep the gradient still.

## Related components

- [Boreal](https://vibecode.thmtecnologia.com/en/components/boreal/): A night sky with green and cyan curtains of light rippling over stars and a mountain range.
- [Veludo](https://vibecode.thmtecnologia.com/en/components/veludo/): Dark satin fabric with diagonal folds that ripple slowly, with a cool sheen and a fine woven texture.
- [Maré](https://vibecode.thmtecnologia.com/en/components/mare/): Five thick, blurred neon light waves rolling nonstop across the middle of a dark background.
- [Ribalta](https://vibecode.thmtecnologia.com/en/components/ribalta/): A cyan line of light switches on at the top of a dark section and spreads a glow over the headline below.
- [Lusco-fusco](https://vibecode.thmtecnologia.com/en/components/lusco-fusco/): Patches of indigo, cyan and lavender that blend and drift slowly, with a light film grain on top.

---
THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).