---
title: "Cosmic Morph — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Abhrajit Ray · Backgrounds. Cosmic Morph WebGL2 particle engine that morphs between images with physics-based mouse interaction."
canonical: "https://framer.elliotli.dev/component/cosmic-morph"
---

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

# Cosmic Morph

WebGL particle morph between any images.

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

![Cosmic Morph preview image 1](https://framer.elliotli.dev/og/component/cosmic-morph/08be6c07e262443a/1600x1200.jpg)

## Summary

Cosmic Morph WebGL2 particle engine that morphs between images with physics-based mouse interaction.

## Description

## Cosmic Morph

WebGL2 particle engine that morphs between images with physics-based mouse interaction. Each image is sampled into a brightness map, then rendered as thousands of glowing particles that scatter, drift, and reassemble into the next frame.

### Features:

-   Drop-In Images: Upload any number of images through Framer's native image control. One image stays static; two or more auto-cycle with smooth scatter-and-reassemble transitions.
    
-   Physics-Based Hover: Choose how the particles react to your cursor. Repel for a magnetic push, Attract to pull them in, or None for a hands-off look. Tune radius and strength to match the vibe.
    
-   Color Control: Set any particle color and background. The component auto-detects whether to use additive glow or standard blending based on contrast. So light particles on dark backgrounds glow beautifully, and dark particles on light backgrounds stay sharp.
    
-   Timing Control: Dial in morph duration (0.5s–4s) and hold duration (0.5s–6s) to match the rhythm of your page.
    
-   Glow Intensity: Crank it up for a dreamy, blurred look, or dial it down for a crisp, pixel-perfect feel.
    
-   Responsive by Default: A built-in ResizeObserver rebuilds the particle grid the moment your layout changes. No manual resizing, no aspect ratio headaches.
    

### How It Works:

Each image is sampled into a brightness map the moment it loads. A WebGL2 vertex shader interpolates between two brightness maps per frame while particles ease from scattered positions back to their home coordinates using sine curves. Mouse forces resolve on the CPU with spring-based damping, then upload as offsets to the GPU. The result: buttery-smooth morphs running at 60fps across thousands of particles, on every device, zero compromises.

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

-   All · #9444

## Details

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