# Boreal A night sky with green and cyan curtains of light rippling over stars and a mountain range. > Boreal is an exclusive THM Componentes component that renders volumetric northern lights in a WebGL shader: green and cyan curtains of light ripple over a starry sky, behind three layers of mountains, with subtle parallax as the mouse moves. It suits night-themed heroes, product launches and featured sections. - Category: Backgrounds and atmospheres - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Heavy: WebGL or simulation; one per page, loaded on demand - Technology: Vue 3, TypeScript, WebGL - Interaction: Mouse - URL: https://vibecode.thmtecnologia.com/en/components/boreal/ ## What it looks like It looks like a winter night far up north, seen from a valley. The navy sky holds stars that twinkle at different rates, and just above the horizon thin curtains of light start green, turn cyan higher up and fade as they rise, rippling slowly with vertical rays and empty stretches between them. Three layers of mountains cut across the horizon, their ridges catching the glow. Moving the mouse shifts stars, curtains and mountains at different depths. The panel is always dark with a soft vignette, fills its parent element and keeps your content on top. ## You may be looking for this if you asked for something like - “a night sky background with the northern lights moving” - “those green northern lights at the top of my site, with mountains” - “a dark background with twinkling stars and wavy green light” - “an animated night landscape for a product launch opener” - “like a photo of the aurora in Iceland, but moving” - “a hero background with depth that shifts when I move the mouse” - “a starry night vibe for a premium brand homepage” ## Also known as northern lights shader, aurora borealis background, WebGL aurora, night sky background, starry sky with mountains, volumetric aurora, parallax night scene ## When to use - A night-themed hero for a brand, product or event that needs high impact - A launch section with a short headline over the sky - The backdrop for a featured testimonial or a manifesto line - Travel, winter tourism or outdoor experience pages ## When to avoid - Light-themed sites, since the panel is always dark and has no light mode - Pages that already run another heavy WebGL effect - Long text areas, where the curtains compete with reading ## How to ask your AI ```text Create a WebGL shader northern lights background for the homepage hero: curtains of light in my brand colors over a starry sky and mountains, subtle mouse parallax, paused when off screen, a still frame for reduced motion and a static fallback in Nuxt. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Boreal ### Does Boreal work on phones? It works on devices with WebGL. Boreal caps pixel density at 2 and lowers it by itself when frames get slow, which helps on weaker phones. The parallax depends on a cursor, so on touch screens the curtains simply keep rippling on their own. Since it is rated Heavy in THM Componentes, the prompt asks for on-demand loading. ### Can I change the green of the aurora? Yes. Boreal takes two colors: color1 paints the base of the curtains and color2 the top. The docs suggest purple and indigo for a violet variant, and the THM Componentes prompt tells your AI to use your project color tokens. You can also tune intensity and star density, or turn the mountains off. ### Does Boreal respect reduced motion settings? Yes. When the system asks for reduced motion, Boreal shows a still frame: the curtains and the star twinkle stop, and only the cursor parallax keeps responding. It also pauses when it scrolls off screen, so it stops drawing while people read other sections. ## Related components - [Névoa](https://vibecode.thmtecnologia.com/en/components/nevoa/): A CSS-only animated background with blue and violet light bands drifting slowly, like the northern lights. - [Firmamento](https://vibecode.thmtecnologia.com/en/components/firmamento/): A night sky with stars in three sizes drifting slowly upward and shifting gently when the mouse moves. - [Cosmonauta](https://vibecode.thmtecnologia.com/en/components/cosmonauta/): Stars that rush out from the center of the screen toward the edges with glowing trails, like a ship speeding up. - [Clarão](https://vibecode.thmtecnologia.com/en/components/clarao/): Dark storm clouds lit from inside by blue, gold and white lightning that comes and goes. - [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).