Component · Animated backgrounds

Aurora background hero

by Informeek Studio Made with Claude 11 November 2026
Live Let it run for a few seconds and watch the curtains drift

The prompt

Claude · Claude Opus 5.5

Create a full-screen aurora background behind a hero for a northern lights tour company. Draw it with a WebGL fragment shader on a canvas: a deep night sky (#050816), three soft horizontal curtains of light in teal (#2dd4bf), periwinkle (#818cf8) and pink (#f472b6) stacked from top to bottom, each one waving slowly with fractal noise and broken into faint vertical rays that drift over time. Add a sprinkle of tiny stars in the upper half, a gentle vignette and a light film grain overlay. Render the canvas at about 60% of the screen resolution to keep it fast. If WebGL is not available, show a blurred CSS radial-gradient version instead. On top, centred: a small outlined pill "Night sky tours, Tromso", an 80px extra bold white headline "Chase the lights before they chase you" and one line of pale blue-grey text. Freeze on a still frame for reduced motion.

Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.

Use it in three steps

  1. Copy the prompt with the button above.
  2. Paste it into your tool, such as v0, Lovable, Bolt or Claude.
  3. Make it yours by changing the three light colours and the headline to fit your brand.

About this aurora background

An aurora background brings slow, calm movement to a hero without a single video file. Three curtains of light in teal, periwinkle and pink drift across a deep night sky, each one rippling and breaking into faint rays that shift over time. A few stars, a soft vignette and a fine grain finish the scene.

It is drawn by a small WebGL shader, so the whole effect is a few kilobytes of code. To keep it light on laptops and phones, the canvas renders at about 60 percent of screen resolution; the softness of the aurora hides the difference completely. Browsers without WebGL get a blurred CSS gradient version, and reduced motion settings freeze it on a still frame.

Why the prompt works

  • It describes the light as layers, three curtains with their own colour, which a shader can follow.
  • It names the technique, a fragment shader with fractal noise.
  • It caps the cost with a lower render resolution.
  • It asks for a fallback and a still frame.

Where to use it

Travel, wellness, music and product launch heroes on dark sites. Keep the headline short and bold so it holds its own against the light.

The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.

Keep exploring

More prompts like this

See the collection →