---
title: "Cosmic Starfield — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Can Girgin · Backgrounds. Key Controls (what they do) Palette — Galaxy (built-in) or Custom (pick two colors)."
canonical: "https://framer.elliotli.dev/component/cosmic-starfield"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Cosmic Starfield

# Cosmic Starfield

[View on Framer](https://framer.com/marketplace/components/cosmic-starfield/?via=elliot-li)

![Cosmic Starfield preview image 1](https://framer.elliotli.dev/og/component/cosmic-starfield/7b7a2b37e84aed79/1600x1200.jpg)

## Summary

Key Controls (what they do) Palette — Galaxy (built-in) or Custom (pick two colors).

## Description

Key Controls (what they do)

-   **Palette** — _Galaxy_ (built-in) or _Custom_ (pick two colors).
    
-   **Tint Strength** — How strongly stars take on the palette color (0 = white, 1 = full tint).
    
-   **Density** — How many stars (0–1). Higher = busier sky.
    
-   **Star Size** — Scales star radii. Pair with Density for balance.
    
-   **Twinkle** — Amount of “breathing”/shimmer (0–1).
    
-   **Drift** — Slow movement speed (0–1).
    
-   **Parallax** / **Parallax px** — 3D depth that follows the cursor; nearer stars shift more.
    
-   **Mouse Repel** / **Repel Radius** — Stars gently open around the cursor with a natural falloff.
    
-   **Background** — Solid backdrop color (named, hex, rgb/rgba, hsl/hsla all supported).
    
-   **Seed** — Regenerates a new, but stable star layout.
    

Quick Recipes

-   **Calm & Deep**Density **0.6** · Twinkle **0.45** · Drift **0.25** · Grain **0.06** · Tint **0.8–1.0**
    
-   **Lively & Energetic**Density **0.75** · Twinkle **0.65** · Drift **0.50** · Grain **0.05** · Tint **0.9–1.0**
    
-   **Minimal & Clean**Density **0.45** · Twinkle **0.30** · Drift **0.20** · Grain **0–0.04** · Tint **0.6–0.8**
    

Notes & Best Practices

-   **Animate off = no motion:** With **Animated** off, **Twinkle** and **Drift** won’t have an effect (by design).
    
-   **Balance Density & Size:** Raising both together can look crowded. If one goes up, trim the other.
    
-   **Performance tips:** If FPS dips, first lower **Density**, then **Star Size**. **Grain** has minimal cost.
    
-   **Color tips:** To really see your **Custom** palette, set **Tint Strength** around **0.8–1.0** and choose two distinct colors
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #10149

## Details

- **Author**: Can Girgin
- **Price**: $10.00
- **Published**: 2025-08-27
- **Updated**: 2025-08-27
- **Added**: 2025-08-17
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background