---
title: "InteractiveHero Blob — Framer component · Best of Framer"
description: "$9.00 · Framer component · by MJ Jung · Sections. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/interactivehero-blob"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/InteractiveHero Blob

# InteractiveHero Blob

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

![InteractiveHero Blob preview image 1](https://framer.elliotli.dev/og/component/interactivehero-blob/af50b994aac817d0/1600x1200.jpg)

## Summary

1.

## Description

## 1\. Introduction

The Interactive\_Hero\_Blob component creates an engaging, animated background of interactive blobs that respond to mouse movements, enhancing visual appeal.

## 2\. Features

-   Five customizable blobs with varying colors and sizes.
    
-   Multiple theme options including custom color configurations.
    
-   Smooth animations with adjustable speed and intensity.
    
-   Mouse interaction for dynamic movement and cursor glow effects.
    
-   GPU-accelerated blur effects for a gooey appearance.
    

## 3\. Installation & Setup

-   Open your Framer project.
    
-   Navigate to the components panel.
    
-   Search for "Interactive\_Hero\_Blob" and click on it to add it to your canvas.
    
-   Adjust the size of the component as needed.
    

## 4\. How to Use

-   Select the Interactive\_Hero\_Blob component in your Framer project.
    
-   In the properties panel, configure the following settings:-**Color Mode**: Choose a theme from the dropdown or select "custom" to define your colors.-**Custom Colors**: If "custom" is selected, specify your desired colors for the blobs and background.-**Intensity**: Adjust the glow intensity of the blobs.-**Speed**: Set the animation speed of the blobs.-**Scale**: Change the size of all blobs proportionally.-**Blur**: Define the amount of blur for the gooey effect.-**Interactive**: Toggle whether blobs should react to mouse movements.-**Cursor Glow**: Enable or disable the glowing effect at the cursor position.
    

-   Preview your changes in the Framer canvas to see the effects in real-time.
    

## 5\. Property Controls Reference

-   **colorMode** (Enum, Default: aqua) - Select a preset theme or choose Custom for your own colors.
    
-   **customColor1** (Color, Default: #ff6b6b) - First blob color (visible when using custom mode).
    
-   **customColor2** (Color, Default: #4ecdc4) - Second blob color (visible when using custom mode).
    
-   **customColor3** (Color, Default: #ffe66d) - Third blob color (visible when using custom mode).
    
-   **customBackground** (Color, Default: #0a0a0a) - Background color (recommended dark colors).
    
-   **intensity** (Number, Default: 0.8) - Glow intensity of the blobs.
    
-   **speed** (Number, Default: 1) - Animation speed of the blobs.
    
-   **scale** (Number, Default: 1) - Size multiplier for all blobs.
    
-   **blur** (Number, Default: 10) - Blur amount for the gooey effect.
    
-   **interactive** (Boolean, Default: true) - Blobs follow mouse movement.
    
-   **cursorGlow** (Boolean, Default: true) - Show glowing effect at cursor position.
    

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

-   All · #10479

## Details

- **Author**: MJ Jung
- **Price**: $9.00
- **Published**: 2025-12-20
- **Updated**: 2025-12-19
- **Added**: 2025-12-11
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove