---
title: "Shooting Stars"
canonical_url: "https://framerhub.io/components/shooting-stars"
last_updated: "2026-06-15T14:46:31.453Z"
---

## Create Stunning Cosmic Experiences

A stunning 3D animation component featuring diagonal shooting star lines that streak across space with dynamic dash animations and optional background starfield.

## Features

**Diagonal Shooting Stars**
Mesmerizing diagonal lines that streak across 3D space with customizable colors and dash animations.

**Background Starfield**
Optional twinkling stars in the background add depth and atmosphere to your scene.

**Mouse Interaction**
Enable camera orbit control with mouse movement for an interactive experience.

**Customizable Colors**
Choose up to 3 vibrant colors for your shooting stars. Stars will randomly use these colors for variety.

## Use Cases

**Hero Sections** — Perfect for space/cosmic themed hero sections and landing pages

**Loading Screens** — Create engaging loading experiences with dynamic star animations

**Decorative Backgrounds** — Add visual interest to sci-fi or tech-themed websites

**Product Launches** — Eye-catching visual effects that grab attention

![Shooting Stars Preview](/framerhub/img/components/control/shooting-stars.jpg)

## How to Use

### Installation

**VIDEO PLACEHOLDER: Installation Tutorial**

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Shooting Stars in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

Use the property controls to customize your shooting stars effect.

**Star Colors**

- Color 1, 2, 3 — Customize up to 3 colors for the shooting stars

**Background**

- Background Color — Set a background color for the entire canvas
- Star Count — Number of background stars (0-2000)
- Star Color — Color of the background stars
- Star Size — Size of the background stars (0.01-0.2)

**Animation**

- Speed — Control how fast the stars streak (0.1-5)
- Line Width — Thickness of the star trails (0.01-0.2)

**Interaction**

- Enable Mouse Effect — Toggle camera orbit based on mouse movement

### Quick Tips

**Best Contrast** — Use darker background colors (black or deep blue) for better contrast with bright star colors. Try transparent backgrounds to layer over other content.

**Speed & Mood** — Adjust speed and line width together for different moods: slow + thin = elegant and atmospheric, fast + thick = energetic and dynamic.

**Background Stars** — The background starfield adds depth. Try different counts: 500-1000 for sparse elegant looks, 1500-2000 for dense cosmic atmospheres.

**Mouse Interaction** — Enable mouse effect for interactive hero sections and banners. Disable for cleaner, non-distracting backgrounds.

## Credits

Built upon [Animated Mesh Lines](https://github.com/Jeremboo/animated-mesh-lines) by [Jeremboo](https://jeremieboulay.fr/portfolio/) for [Codrops](https://tympanus.net/codrops/).

## Why Designers Love This

Transform any website into a cosmic experience with stunning 3D shooting stars. Built with Three.js for smooth 60fps performance, this component adds professional-grade visual effects to your Framer projects without any code.

---

**Need Help?** Visit framerhub.io/support for documentation and video tutorials.