← Back to Skills / Marketplace / shooting-stars
SKL · 36PRO

Shooting Stars.

Diagonal streaks of glowing light with soft comet tails raining across a black sky, color-shifting as they fall under a faint cinematic camera shake — a dreamy, magical meteor shower rendered live by a shader.

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

Shooting Stars is a meteor-shower background — diagonal streaks of glowing light raining across a black sky, each one trailing a soft comet tail and slowly shifting color as it falls. There's a faint camera shake underneath it all that makes the whole scene feel cinematic, like you're watching a real meteor shower through a lens. Drop it behind a hero with light text on top and your page instantly feels dreamy, magical, and a little bit epic. This is the skill for that "make a wish" moment that makes a landing page memorable.

● Looks Like
Meteor shower time-lapsesDreamy startup launch pagesWish-upon-a-star and night-sky themed sitesCosmic music and creative app heroesThe kind of dark, glowing background that makes a headline feel like a promise
02 · Best For / Avoid If
＋ Best For
+Hero sections for landing pages and product launches
+Creative, lifestyle, and wellness products that want a dreamy, aspirational feel
+Waitlist, coming-soon, and announcement pages
+Music, art, and entertainment sites
+Personal brands and portfolios that want a touch of magic
+Any dark-themed page where you want motion and atmosphere with a softer, more romantic edge
× Avoid If
×Your design is light or minimal — Shooting Stars lives on a black sky and won't fit a bright, airy look
×Your brand is sharp, corporate, or built on restraint — the effect is dreamy and atmospheric by nature
×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 background would pull focus from what matters
03 · Design Philosophy
01

The color shift is the magic

What sets Shooting Stars apart is that each meteor shimmers through nearby colors as it falls, so the streaks never look flat or repetitive. That subtle drift is what makes the field feel alive and natural instead of like a looping animation. The shimmer is the detail that turns a simple effect into something people actually watch.

02

The dark sky lets the light glow

The whole scene sits on a black background, which is what lets the glowing streaks and comet tails stand out and keeps light text readable on top. The darkness is the night sky — it gives the meteors somewhere to shine and keeps the motion from feeling cluttered. Keep the surrounding design dark so the shower stays the focus.

03

Subtlety keeps it dreamy

The faint camera shake and the soft, unhurried pace of the meteors are what give the effect its romantic, cinematic quality. Pushing the speed or density too hard turns a dreamy night sky into a busy one. The restraint is what makes it feel magical rather than chaotic.

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 bright streak
The meteors move, so a headline can briefly get crossed by a glowing streak. Keep your text in the calmer central area and add a subtle dark gradient behind it so it stays readable through the motion.
! WARNING
Too much density
A storm of meteors looks dramatic but can overwhelm your content. Use a lighter density for focused messages and save the heavier showers for pure splash moments.
! WARNING
Performance on mobile
It's a real-time shader that runs on the GPU and can heat up phones or drain battery. Tone the density down on mobile, and always respect reduced-motion settings by freezing the field to a still frame.
! WARNING
Using it behind everything
Shooting Stars 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 →