---
title: "Cosmic Background — Free Framer component · Best of Framer"
description: "Free Framer component · by Ahmet Loca · Backgrounds. Cosmic Background CosmicBackground is a canvas-powered animated background for Framer."
canonical: "https://framer.elliotli.dev/component/cosmic-background"
---

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

# Cosmic Background

Animated space particle background

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

![Cosmic Background preview image 1](https://framer.elliotli.dev/og/component/cosmic-background/4377d602f812d45f/1600x1200.jpg)

## Summary

Cosmic Background CosmicBackground is a canvas-powered animated background for Framer.

## Description

**MORE FRAMER COMPONENTS LIKE THIS**

**✦ Browse +38 FREE + 85 premium components:** [**https://frameze.com/components**](https://frameze.com/components)

**✦ Background Bundle:** [**https://frameze.com/components/category/background?ref=bundles**](https://frameze.com/components/category/background?ref=bundles)

## **About Cosmic Background**

CosmicBackground is a canvas-powered animated background for Framer. Five particle rings rotate around a breathing spotlight while a star field drifts with your cursor. Film grain adds cinematic depth. Built for dark, high-end websites that demand atmosphere without compromise.

Rotating particle rings — 5 rings orbit in alternating directions at variable speeds

Star field — up to 600 randomised stars with subtle parallax drift across the canvas

Parallax mouse tracking — cursor movement shifts all layers independently with smooth depth

Breathing spotlight — radial glow and cone light pulse together in a slow natural rhythm

Film grain — cinematic noise texture rendered via SVG filter for authentic atmospheric depth

Three dark themes — Deep Space, Void and Obsidian, each with a visually distinct tone

Custom color — set any background color to match your exact brand palette

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

**Donation:** [**https://ahmetloca.dub.link/donation**](https://ahmetloca.dub.link/donation)

if it saves you time, a small tip is always appreciated.

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

**Use Cases**

Dark hero sections for SaaS, AI and tech product landing pages

Creative agency, design studio and production company websites

Music, audio production and entertainment platform pages

Luxury brand, fashion editorial and high-end retail landing pages

Portfolio hero backgrounds for designers, photographers and directors

Gaming, esports and interactive entertainment websites

Blockchain, Web3 and crypto product launch pages

Architecture and interior design studio websites

**Keywords**

cosmic background, animated background, particle animation, star field, parallax background framer, dark background, space background framer, canvas animation, breathing light

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

-   All · #2554

## Details

- **Author**: Ahmet Loca
- **Published**: 2026-07-05
- **Updated**: 2026-07-27
- **Added**: 2026-07-05
- **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