---
title: "ReactionDiffusion — Framer component · Best of Framer"
description: "$9.00 · Framer component · by FramerHub.io  · Backgrounds. Pattern Shader Abstract Animation WebGL"
canonical: "https://framer.elliotli.dev/component/reactiondiffusion"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/ReactionDiffusion

# ReactionDiffusion

Pattern Shader Abstract Animation WebGL

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

![ReactionDiffusion preview image 1](https://framer.elliotli.dev/og/component/reactiondiffusion/e4f8e349ad6c5737/1600x1200.jpg)

## Summary

Pattern Shader Abstract Animation WebGL

## Description

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-tnfofbg1-voTGDFYumWIzg7UuPh8ACAmelpL0O9)](https://framerhub.io/components?utm_source=framer_marketplace&utm_medium=framer_marketplace_components&utm_content=ReactionDiffusion)

### Overview

Create hypnotic, organic patterns that evolve over time. This component simulates a reaction-diffusion chemical process using efficient WebGL shaders, resulting in beautiful, biological-looking textures that never repeat.

### Features

**Procedural Patterns** Generates infinite variations of organic patterns resembling fingerprints, zebra stripes, or coral growth.

**Fully Customizable** Adjust the zoom, scale, complexity, and edge softness to create everything from large smooth blobs to intricate, high-density textures.

**Performance Optimized** Runs seamlessly on the GPU to ensure high frame rates without impacting your site's performance.

### Use Cases

**Dynamic Backgrounds** — Create subtle, moving backgrounds for hero sections or full-page immersive experiences.

**Brand Textures** — Generate unique, on-brand patterns by mixing your brand colors in organic ways.

### Properties

-   **Primary Color**: Main color of the pattern.
    
-   **Animation Speed**: How fast the pattern animates.
    
-   **Zoom Level**: Zoom into the pattern for more detail.
    
-   **Pattern Scale**: Overall size of the pattern elements.
    
-   **Pattern Density**: Add more detail and waves to the pattern.
    
-   **Edge Softness**: Soften or sharpen the pattern edges.
    

### Customization

Customize the look and feel through the property controls right in Framer.

**Appearance**

-   **Colors**: Set the Primary color to match your theme.
    
-   **Edge Softness**: Control how sharp or soft the transition between colors is.
    

**Pattern Structure**

-   **Zoom Level**: Zoom in or out of the fractal-like pattern.
    
-   **Pattern Scale**: Scale the entire texture up or down.
    
-   **Pattern Density**: Increase complexity for more detailed, intricate lines.
    

## License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

## Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

### Version

1.0.0

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

-   All · #11153

## Details

- **Author**: FramerHub.io
- **Price**: $9.00
- **Published**: 2026-02-16
- **Updated**: 2026-04-07
- **Added**: 2026-01-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