The Interactive_Hero_Blob component creates an engaging, animated background of interactive blobs that respond to mouse movements, enhancing visual appeal.
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.
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.
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.
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.
MJ Jung
