LIVE NOW

Visual Configurator is now active — Customize 50+ professional animations Visual Configurator is live!

Get Started

Premium element

Core Background

Video Overlay

Video Overlay provides a dynamic, full-screen video that plays behind content within a container. It allows for smooth transitions between an initial preview video and the main looping video.

Preview

Open preview

Drip of Time

Contemporary Art

Quick Setup

data-video-background=true

Required

Applied to the container to enable the video background functionality.

data-video-src

Required

Specifies the source URL of the video file that will be played in the background.

data-video-control=toggle

Optional

Applied to an element inside the container to allow users to toggle between play and pause for the main video.

data-pause-icon

Optional

A class that changes the appearance of the toggle element to a "pause" icon when the video is playing.

Key features

  • Muted Playback: The videos (preview and main) are muted.
  • Customizable Button: You can customize the play/pause button using the data-pause-icon attribute to change its appearance.
  • Responsive Handling: The video resizes and adjusts its position to fit the container, ensuring optimal display without stretching or distortion.

We're here to help

Choose how you'd like to connect with our support team

Contact Support

Get help from our team of experts

Response within 24 hours

Fluid Path Animation Configurator

How to Use in Bricks Builder

  1. Customize your fluid path animation using the controls below
  2. Click the Get Code button and copy the JavaScript
  3. In Bricks Builder, add a Code element and paste the JavaScript
  4. Add the attribute
    data-path-animation📋
    to any container element
This tool creates a custom script with your settings built-in. You only need to add the data attribute to implement your fluid path animation effect!
BricksFusion Exclusive Get Your Fluid Path Animation

Add an elegant flowing path animation to your website with this custom-crafted JavaScript snippet.

  • Easy implementation with simple data attributes
  • Fully responsive and mobile-friendly
  • Customizable colors and animation speed
  • Accessibility toggle option for reduced motion
Path Settings
Number of Paths 24
Path Color
Choose 'currentColor' to inherit from text color by selecting white
Path Base Opacity 0.1
Path Width 0.5
Animation Speed 0.5
Z-Index 0
Blend Mode
For dark backgrounds, "screen" generally offers better visibility

JavaScript Code