← Back to Skills / Marketplace / cosmic-meteor-background
SKL · 33PRO

Cosmic Meteor Background.

Deep-space nebula clouds with glowing meteor streaks and faint stars, rendered live by a real-time shader — a cinematic backdrop that makes any dark hero feel like a launch trailer.

UNLOCK WITH PRO →
● Live preview · Cosmic Meteor Background demo
● This is a live shader, not a video
↗ New tab
01 · The Vibe

Cosmic Meteor Background drops your page into deep space — slowly rolling nebula clouds with glowing meteor streaks shooting across them and faint star points scattered through the dark. It's a real-time shader, so the clouds drift and the meteors actually streak past on their own, giving the whole thing a living, cinematic feel. Put it behind a hero with light text on top and your page instantly looks like a product launch trailer. This is the skill for that epic "launch into orbit" energy without rendering a single frame of video.

● Looks Like
Sci-fi movie title sequencesSpace-themed product launch pagesThe cosmic hero sections on ambitious startup sitesNebula photography from a telescopeThe kind of dark, atmospheric backdrop that makes a headline feel like a mission statement
02 · Best For / Avoid If
＋ Best For
+Hero sections for landing pages and product launches
+AI, tech, and developer products that want a bold, ambitious feel
+Startup sites built around big "future of" messaging
+Waitlist, coming-soon, and launch announcement pages
+Gaming, space, and sci-fi themed products
+Any dark-themed page where you want drama and motion behind the headline
× Avoid If
×Your design is light or minimal — this lives on a deep, near-black space background
×Your brand is calm, soft, or understated — the meteor streaks bring energy and drama, not quiet
×You need top performance on low-end devices — it's a real-time shader that leans on the GPU
×Your page is content-heavy and a moving cosmic background would pull focus from what matters
03 · Design Philosophy
01

Two layers make the depth

The effect is built from drifting nebula clouds in the background and meteor streaks moving across the front. That separation between the slow clouds and the fast streaks is what gives the scene real depth, like you're looking into actual space rather than at a flat image. The interplay of the two speeds is what sells the illusion.

02

The dark field keeps the focus

The whole scene sits on a near-black background, which is what lets the glowing meteors and star points pop and keeps light overlay text readable. The darkness is the canvas — it gives the bright moments somewhere to shine and stops the busy motion from overwhelming the page. Keep the surrounding design dark so the cosmos stays the star.

03

Color sets the whole world

The presets shift the entire mood by changing the cosmic palette — amber for a warm ember glow, blue for classic deep space, violet for a galaxy feel, green for an aurora-in-space look, red for a Mars-dust vibe. The palette you pick decides what kind of universe your page lives in before anyone reads a word, so choose the one that matches the feeling you're after.

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 crossing a meteor streak
The meteors move, so a headline that's perfectly readable can briefly get crossed by a bright streak. Keep your text in the calmer central area and add a subtle dark gradient behind it so it stays legible through the motion.
! WARNING
Too stormy for the moment
A dense, fast meteor field looks incredible but can fight your content for attention. Match the liveliness to the page — calmer settings for a focused message, stormier ones for a pure launch-moment splash.
! WARNING
Performance on mobile
Real-time shaders run on the GPU and can heat up phones or drain battery. Tone it down or pause it on mobile, and always respect reduced-motion settings by freezing it to a still frame.
! WARNING
Using it behind everything
This is a hero moment, not a whole-site background. 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 →