← Back to Skills / Marketplace / aurora-background
SKL · 32PRO

Aurora Background.

A soft, flowing animated mesh gradient that drifts across the screen like northern lights — calm, premium, and quietly alive behind your hero.

UNLOCK WITH PRO →
● Live preview · Aurora Background demo
● This is a real WebGL shader, not a screenshot
↗ New tab
01 · The Vibe

Aurora Background is a soft, flowing animated gradient that drifts across the screen like northern lights — deep color fields melting into each other, slow and dreamy, with a faint gauzy sheen layered on top that gives it a silky depth. It's a real-time mesh gradient, so the colors actually move and blend on their own, never looping in an obvious way. Drop it behind a hero section and the whole page feels calm, premium, and quietly alive. This is the skill for that soft, modern, color-drenched background you've seen on the best product launch pages.

● Looks Like
Apple's softer product backdropsNorthern lights time-lapsesPremium app onboarding screensThe dreamy gradient heroes on the best-designed SaaS sitesAmbient color fields that feel like they're slowly breathing
02 · Best For / Avoid If
＋ Best For
+Hero sections for landing pages and product sites
+SaaS, AI, and wellness products that want a calm, premium feel
+App onboarding and sign-up flows
+Waitlist and coming-soon pages
+Portfolio and personal sites that want a soft, modern entrance
+Any page where you want color and atmosphere without sharp edges or hard structure
× Avoid If
×Your brand is built on sharp, high-contrast, or structured visuals — Aurora is soft and flowing by nature
×You need maximum performance on low-end devices — it layers live WebGL canvases that lean on the GPU
×Your page is dense with content and a drifting color background would pull focus from what matters
×You want a single flat brand color — Aurora is built to blend multiple hues, not hold one solid tone
03 · Design Philosophy
01

Two layers create the depth

The signature of this look is two gradients stacked together — a flowing color field underneath and a faint wireframe sheen on top. That second layer is what gives the aurora its silky, gauzy quality instead of looking like a flat gradient. The depth comes from the layering, which is why it reads as atmospheric rather than simple.

02

A dark anchor makes the colors sing

Every preset keeps a near-black tone woven between the vivid colors, which gives the bright hues something to push against and keeps the whole thing from washing out. It also means white text always stays readable on top. The contrast between deep dark and saturated color is what makes the gradient feel rich.

03

Slow movement is the whole point

The colors drift at a gentle, unhurried pace, which is what makes Aurora feel calm and premium rather than busy. Fast motion would turn a soothing background into a distraction. The slow, ambient flow is what gives it that "quietly alive" quality that draws people in without demanding attention.

04 · Use With Claude / Cursor
Claude
01Click 'Customize', then go to 'Skills'
02Go to 'Create Skills' and upload the skill.md file
03Put the design.md file in your project's knowledge base
04Mention the skill name as you build — Claude applies it automatically
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — mention the skill name to invoke it automatically
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Text contrast as the colors shift
Because the gradient moves, a spot that's dark enough for white text one moment can brighten the next. Keep your text over the consistently darker zones, or add a subtle dark gradient behind it.
! WARNING
Picking clashing brand colors
Aurora's brand-color mode is great, but two colors that fight each other turn muddy when they blend. Choose brand hues that sit near each other or complement cleanly, and let the dark anchor do the separating.
! WARNING
Performance on mobile
It layers live WebGL canvases, which can heat up phones and drain battery. Use one instance per page, tone it down on mobile, and respect reduced-motion settings by freezing it to a static gradient.
! WARNING
Using it behind everything
Aurora is a hero moment, not a whole-site treatment. Putting it behind every section tires the eye and kills the impact of the one place it actually lands.
● 07 · Download

Beautiful designs in minutes.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

UNLOCK WITH PRO →