When I was designing the hero section for my developer portfolio, I had a very specific visual in mind:
Some sort of comet, meteor, or shooting star gliding across the screen.
Not just a fast-moving dot,
Not just an animated shooting line.
But a real comet with a fading, trailing tail behind it.
Sounds like something you would find many existing examples of, right?
Spoiler: Wrong.
The Problem
I figured this would be an easy win.
So I did what we all do first:
I scoured the internet for some example I could drop-in and move on.
What I found instead:
- ❌ single-pixel “shooting stars”
- ❌ basic fading-line animations
- ❌ effects that didn’t feel like a comet or shooting star at all
Everything looked more like:
“a particle or fading-line that moves fast across the screen”.
What I wanted was:
- a head (somewhat glowing)
- a tail
- motion blur
- decay
- something that actually felt like a comet moving through space
After a lot of searching, I realized:
Examples of this basically don’t exist!
So… I built it.
Enter:
comet-js
👉 GitHub: https://github.com/elliottprogrammer/comet-js
Codepen demo: https://codepen.io/melliatto/pen/VYjXjbV
You can also see it in action on my Dev Portfolio website.
comet-js is a small, JavaScript example of a comet / meteor / shooting star effect on the web – complete with a fading, trailing tail.
This isn’t a single particle or a CSS trick.
It’s an effect that simulates the visual behavior of a comet moving across a scene.
What Makes It Different?
Most “shooting star” effects do this:
- spawn one particle (or short line)
- move it from A → B
- remove it
comet-js does something more interesting:
✨ A True Trailing Tail
Instead of one object, a comet is made up of:
- a head
- many dust-like particles emitting from the comet, forming the tail
- each dust particle fades out over time
The result:
- natural motion
- a tail trail that feels alive instead of static
- smooth fading-out (decay)
🚀 Use-cases
You can:
- use it as a background effect
- layer it behind hero text
- combine it with starfields, gradients, or canvas scenes
Perfect for:
- 🌌 portfolio sites
- 🚀 landing pages
- 🛰️ sci-fi / space themes
- 🎮 Game UI backgrounds
- ✨ subtle ambient motion
Subtle motion goes a long way when done right — and comets are eye-catching without being distracting.
Open Source & Hackable
comet-js is open source and intentionally approachable.
If you want to:
- tweak the visuals
- change decay timing
- adjust speed or direction
- fork it into something wild
…you absolutely can.
👉 Repo: https://github.com/elliottprogrammer/comet-js
If you like it, please give it a GitHub Star! ⭐️
Final Thoughts
This project is a reminder of one of my favorite parts of being a developer:
When the thing you want doesn’t exist —
…you can just make it!
If you’re building something and need a proper comet, meteor, or shooting star effect (not just a fast moving dot), I hope comet-js saves you the same frustration I ran into.
If you end up using it, forking it, or improving it, I’d love to see what you build 🌠