Demo to preview the plugin:
Introduction
The Interactive Background – Fog Reveal plugin allows you to add stunning, dynamic backgrounds to your Bubble application.
It creates a fog-reveal effect that reacts to user interaction, adding depth and modern animation to your app’s design.
You can upload any image and control the stroke width, line style, and blur intensity to create a captivating “fog and reveal” effect behind your app content.
Key Features
Prerequisite(s)
Before adding the Interactive Background – Fog Reveal plugin:
- Ensure your page Background Style is set to “None” under Page Properties → Appearance.
- Place the Interactive Background element behind all other visual elements (text, images, groups, etc.) so it functions as a background layer.
- For best results, use high-quality JPG or PNG images with subtle contrast.
How to setup
Step 1. Install the Plugin
Step 2. Add the Plugin Element
Step 3. Configure Element Properties
Step 4. Preview and test
Plugin Element - Interactive Background
Fields:
Title | Description | Type |
Image | Upload or link to an image that will serve as the base layer of the fog reveal background. | Image |
Keep Cleared | Determines if the cleared (revealed) areas should remain visible or gradually fade back under the fog. | Checkbox (yes/no) |
Stroke Width | Controls the size of the brush stroke that clears fog when a user interacts. Higher values = thicker reveal area. | Number |
Line Style | Defines how the brush stroke behaves at its ends. Options: round, square, butt. | Dropdown |
Auto Blur | Automatically applies the blur/fog effect as soon as the page loads. | Checkbox (yes/no) |
Blur Strength | Sets how strong the fog effect is, in pixels. Works when Auto Blur is enabled. | Number |
