Demo to preview the settings
Animated website backgrounds for full body or simple group with full customization.
Easy to use!
Can interact with mouse / touch
Customize colors & style to match your brand
No pixelation – Canvas runs at full resolution
Smaller filesize than background videos and large Background images – three.js is ~120kb minified and gzipped
Runs fast (60fps) on most laptops/desktops
Disclaimer: Some WebGL effects are slow on older computers. Not all effects work on mobile devices. Set a background image or color as a fallback.
This plugin is based on Vanta.js
How to setup
- Install plugin and put "Animated Background" element on your page.
- Open Settings -> General tab and check the mark (✔) "Expose the option to add an ID attribute to HTML elements".
- Add ID attribute (simple word) to group or page in the field "ID Attribute" at the end of the list.
- Write the above group ID in the plugin element field "Element ID".
Plugin Elements Properties
This plugin has one visual element which can be used on the page: Animated Background.
Create animated backgrounds.
Allows to select an animated theme.
The element id that should have an animated background.
Allows mouse controls.
Allows touch controls. It is used for mobile devices.
Allows the gyroscope to imitate the mouse. It is used for mobile devices.
The minimum height of the animated background. Expressed in pixels.
The minimum width of the animated background. Expressed in pixels.
The scale of background.
The scale of background on mobile devices.
The background color of the animation. This color is used for Halo, Dots, Trunk, Net, Globe, Clouds, and Birds themes.
The color of dots in Dots, lines & dots in Net, globe lines in Globe, wave in Waves.
The color of lines in Trunk, cells in Cells, birds in Birds.
The color of lines in Dots, cells in Cells, orbital lines in Globe, birds in Birds.
The size of the “Halo” circle. Accepted values between 0.1 and 3.
Base Color (Halo)
The color for the inner circle.
Defines the curviness of the inner circle line. Accepted values between 0 and 3.
The offset on the X-axis from the center of the element. Accepted values between -0.5 and 0.5.
The offset on the Y-axis from the center of the element. Accepted values between -0.5 and 0.5.
The size of animated dots. Accepted values between 0.5 and 10.
The space between animated dots. Accepted values between 5 and 100.
The space between animated lines. Accepted values between 0 and 10.
The curviness of animated lines. Accepted values between 0 and 10.
The size of cells. Accepted values between 0.2 and 5.
The speed of animation. Accepted values between 0 and 5.
The number of animated points. Accepted values between 1 and 20.
The number of lines between points. Accepted values between 10 and 40.
The space between lines. Accepted values between 10 and 20.
Enables the dots displaying on points places.
The size of the globe. Accepted values between 0.5 and 2.
The color of the sky.
The color of clouds.
Cloud Shadow Color
The color of clouds shadow.
The color of the sun.
Sun Glare Color
The color of the sun glare.
The color of sunlight.
The speed of clouds animation. Accepted values between 0 and 3.
The amount of shininess. Accepted values between 0 and 150.
The height of waves. Accepted values between 0 and 40.
The speed of waves. Accepted values between 0 and 2.
The animation zoom. Accepted values between 0.7 and 1.8.
The highlight color.
The midtone color.
The lowlight color.
Base Color (Fog)
The fog color.
The fog blur. Accepted values between 0.1 and 0.9.
The animation zoom. Accepted values between 0.1 and 3.
The animation speed. Accepted values between 0 and 5.
Defines the birds coloring.
The birds amount. Accepted values between 1 and 5.
The size of birds. Accepted values between 0.5 and 4.
The birds’ wingspan. Accepted values between 10 and 40.
The fly speed of birds. Accepted values between 1 and 10.
The space between birds. Accepted values between 1 and 100.
The birds’ alignment. Accepted values between 1 and 100.
The birds’ cohesion. Accepted values between 1 and 100.
Add animated background for the whole page
- On the page, it is placed the Animated Background element the following completed fields.
- On the page, for the Page element, the ID Attribute is set as “back”.
- The Element ID field from the plugin element is set up as “back” too.
Update 16.06.22 - Version 1.1.0
- Demo and Editor links added to description
Update 15.06.22 - Version 1.1.0
- First release. Implemented the main functionality and configuration logic