InteractiveHero Blob

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.