---
title: "Cosmic Ray — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Sirrah Space · Backgrounds. Transport your website visitors into deep space with the Cosmic Ray background component."
canonical: "https://framer.elliotli.dev/component/cosmic-ray"
---

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

# Cosmic Ray

Starry sky & cosmic light beam.

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

![Cosmic Ray preview image 1](https://framer.elliotli.dev/og/component/cosmic-ray/b4ab9487b4a5b31b/1600x1200.jpg)

## Summary

Transport your website visitors into deep space with the Cosmic Ray background component.

## Description

Transport your website visitors into deep space with the **Cosmic Ray** background component. This high-performance Framer background renders a stunning, atmospheric scene featuring a powerful, animated light beam radiating from a customizable core star. Behind the beam, a vast field of twinkling, parallax-scrolling stars adds incredible depth and motion to your layout.

Built using custom GLSL shaders, this component offers immense visual flexibility. You can choose from four distinct core shapes (Round, Lens Flare, Diamond, Comet) and freely position the beam's origin anywhere on the canvas. Adjust the beam's angle, spread, and speed, and toggle the dense starry background on or off. Designed with an intelligent Intersection Observer, the animation automatically pauses when scrolled out of view to preserve device battery and CPU performance.

**Functions (Key Features):**

-   🌠 **Dynamic Starfield:** A multi-layered, twinkling starry background that moves with a subtle parallax effect.
    
-   🔦 **Cosmic Light Beam:** An animated, textured light beam with customizable spread, length, angle, and speed.
    
-   🌟 **Custom Core Shapes:** Choose from 4 unique origins for the light beam: Round, Lens Flare, Diamond, or Comet.
    
-   🎨 **Deep Color Control:** Granular control over the Background color, Core Color, and the surrounding Beam Aura.
    
-   🚀 **WebGL Performance:** Lightweight, pure shader-based rendering ensures perfectly smooth 60fps animations with auto-pause optimization.
    

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

-   All · #4035

## Details

- **Author**: Sirrah Space
- **Price**: $5.00
- **Published**: 2026-06-25
- **Updated**: 2026-07-26
- **Added**: 2026-06-25
- **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