Beyond standard layout structures, Uncode introduces a new dynamic dimension with Interactive Backgrounds, which sit alongside the Multiple Backgrounds effects you were already familiar with. This suite of motion-driven effects is designed to transform static sections into immersive, high-end digital experiences that react fluidly to user interaction. Whether you want to create a playful atmosphere or a sophisticated portfolio showcase, these interactive layers bring your content to life, breaking the boundaries of traditional web design.

Please find below a simple example page from our demo site:

• Backgrounds Interactive

Each effect in the Interactive Backgrounds suite offers a unique way to engage your visitors. Here is an overview of the four main styles:

• Magnetic: This effect creates a three-dimensional environment where images are distributed randomly in space. As the user moves the mouse, the gallery reacts with a 3D parallax motion, giving a sense of depth and physical presence to your media.
• Mouse Trail: Perfect for creating a dynamic path of discovery, this method generates a continuous trail of images that appear and fade away as they follow the cursor’s movement across the screen.
• Particles: Images are spawned randomly throughout the container and disappear after a short duration. This creates a lively, atmospheric effect that feels organic and constantly evolving.
• Drop: Using a realistic physics simulation, images "drop" from the top of the container and interact with the boundaries of the section, providing a playful and tactile feel to the background.

How it works

To use this feature, navigate to the Style tab and select a main Background Media. Once this is done, the Background Multiple option will become available, revealing a dedicated Backgrounds tab where you can add additional media and select your desired options, screenshot .

Common Settings

These options are available across most interactive methods and control the foundational behavior of the effect:

• Shuffle: Randomizes the order of the images in your gallery so the sequence feels different on every page load.
• Resolution: Sets the density of the interactive grid. A higher resolution allows for more precise tracking and placement but requires more processing power.
• Max/Min Width: Defines the size of the images. We recommend using responsive units (like clamp or vw) to ensure the effect looks great on all screen sizes.
• Safe Area (Width & Height): Creates a "protected zone" (usually in the center) where images will not appear. This is vital for keeping your main text or buttons readable and free from distractions.
• Count: Limits the maximum number of images visible at once. Use this to balance visual richness with browser performance.
• Disable on Mobile: A simple toggle to prevent the effect from running on mobile devices, ensuring a faster experience for users on devices with limited resources.

Methods Reference

Magnetic

This effect creates a three-dimensional environment where images are distributed in space, reacting with a 3D parallax motion as the user moves the mouse.

• Depth: Toggles the 3D perspective. When active, images will shift at different speeds based on their "virtual distance" from the viewer, creating a realistic sense of depth.
• Move X & Move Y: Determines the maximum displacement range for the gallery movement relative to the mouse position.
• No Overlap: A smart algorithm that prevents images from stacking directly on top of each other, maintaining a clean and balanced distribution.
• Min/Max Opacity: Sets the transparency range for the images, allowing you to create a layered and atmospheric look.

Mouse Trail

Generates a continuous trail of images that follow the cursor, appearing and fading away to create a dynamic path of discovery.

• Distance: Defines the amount of mouse movement (in pixels) required before a new image is spawned in the trail.
• Animation In/Out Time: Precisely controls how quickly images fade in when created and how long they take to fade out as they expire.
• Drift: Once an image is spawned, it will continue to float or move slightly even if the mouse stops, adding a more organic feel.
• Rotate Range: Defines the maximum random rotation (in degrees) applied to each image in the trail for a more natural, non-linear look.

Particles

A rhythmic effect where images appear and disappear at random intervals throughout the container, creating a lively and constantly evolving background.

• Interval: Sets the timing (in milliseconds) between the creation of new particles.
• Duration: Determines exactly how long each particle remains visible on the screen before fading away.
• On Scroll: When enabled, new particles are triggered by the user’s scrolling action rather than just a time-based interval.
• Rotate Range: Adds random orientation to each particle to ensure the distribution feels varied and organic.

Drop

Uses a physics simulation to make images "drop" into the container, interacting with gravity and boundaries for a tactile and playful experience.

• Origin: Determines where the images fall from—choose between a "Random" horizontal point or a fixed starting location.
• Gravity: Adjusts the strength of the downward pull. Higher values make the images fall faster and feel "heavier."
• Interactive: If active, the images will react to the mouse cursor even after they have finished falling, allowing users to "push" or move them around.
• Delay: Manages the pause between consecutive drops, allowing you to control the intensity and pace of the falling elements.