---
title: "Cosmic Vortex Shader — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Abhrajit Ray · Backgrounds. WebGL swirling energy vortex background"
canonical: "https://framer.elliotli.dev/component/cosmic-vortex-shader"
---

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

# Cosmic Vortex Shader

WebGL swirling energy vortex background

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

![Cosmic Vortex Shader preview image 1](https://framer.elliotli.dev/og/component/cosmic-vortex-shader/8f591510c5bf5754/1600x1200.jpg)

## Summary

WebGL swirling energy vortex background

## Description

## Cosmic Vortex

Static gradients feel cheap. Stock video feels rented. A shader feels alive. Cosmic Vortex is a beautiful background shader that responds to motion, scales to any container, and feels super premium without the breaking your website's performance.

### Best for:

-   Hero sections, landing pages, and product launches
    
-   Splash and waitlist screens that need cinematic weight
    
-   Premium SaaS, AI, fintech, and crypto brands
    
-   Music, gaming, and creative-tool sites
    

### Controls:

-   **Accent** — primary spiral colour
    
-   **Secondary** — outer colour the gradient blends to
    
-   **Speed** — animation pace (0–2)
    
-   **Swirl** — spiral tightness (0–6)
    
-   **Angle** — rotational orientation (0–360°)
    
-   **Intensity** — brightness/glow (0.1–3)
    
-   **Hover effect** — cursor-driven gravity distortion
    
-   **Quality** — render DPR (0.5–2)
    

### Built for production:

WebGL2, 99% browser coverage. Auto-pauses offscreen and in Framer's canvas. Respects \`prefers-reduced-motion\`. Resizes any aspect ratio.

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

-   All · #10437

## Details

- **Author**: Abhrajit Ray
- **Price**: $10.00
- **Published**: 2026-05-12
- **Updated**: 2026-05-12
- **Added**: 2026-05-11
- **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