White-hot comets fall diagonally across HorizonX ink, fading through silver into graphite, with glowing heads, depth and a tilt-shift focus band.
About this shader
Comet Streaks is an animated WebGL background of white-hot comets falling diagonally across a dark field, their tails fading from silver into graphite. Use it for a launch page, an event hero or any section that needs directional motion. Lanes, streak width, length, coverage and fall angle shape the shower; tail fade, head glow and depth set how each comet reads; a tilt-shift band with its own angle and blur keeps one strip in focus. Grain, background opacity, variation, speed and palette are editable live, and the code exports use the same original renderer.
How this shader works
Comet Streaks shows white-hot comets falling diagonally across a dark field, their tails fading from silver into graphite. Each comet has a glowing head and sits at a different depth, and a tilt-shift band keeps one strip in focus while the rest blurs. The Look section shapes the shower, how each comet reads, and the focus band. Background opacity can drop for a transparent canvas.
Tips
- Lanes and Streak coverage set how many comets fall. Lower both for a sparse shower.
- Fall angle sets the direction the comets travel across the frame.
- Focus band and Focus angle place the sharp strip, and Tilt-shift blur sets how soft the rest is.
- Change Head, Body and Tail to colour the comets, for example warm orange tails.
Questions
How do I make a meteor shower animation for a website?
Open Comet Streaks and set Lanes, Fall speed and Fall angle. Export it as an HTML file or a React or Svelte component and place it behind your hero section.
Can I put it over an image?
Yes, with the code exports. Lower Background opacity and the comets are drawn over whatever sits behind the canvas. MP4 video exports are always opaque.
Preview and customize in the browser. Exports require membership.
Shader formats and usage guide Lines · All shaders
Animation respects your device’s reduced-motion preference.