What is it?

Circles brings a playful, floating pattern of circles to your web elements, using smooth colors and dynamic movement to add depth and interest to your design. With different color presets inspired by nature, seasons, and other themes, the animation is fully customizable and responsive, adjusting smoothly across screen sizes.

How to set it up?

To activate the Circles Animation on an element, simply add the data-circles-animation attribute to the target container. You can specify one of the preset themes or define custom values for a tailored look.

'data-circles-animation'. Activates the Circles Animation effect on the specified container.

'data-circles-preset'. Specifies a theme for the circle colors, count, size, and speed.

'data-circles-colors' (Optional). Sets custom colors for the circles. Provide a comma-separated list of rgba values to define the colors. Example: rgba(255,87,34,0.6),rgba(255,152,0,0.6),rgba(255,235,59,0.6).

'data-circles-count' (Optional). Defines the number of circles in the animation. Type: Number (e.g., 12). Default: Preset dependent (e.g., nordic has 12 circles).

'data-circles-min-size' (Optional). Sets the minimum size of the circles in pixels. Type: Number (in pixels, e.g., 150). Default: Preset dependent.

'data-circles-max-size' (Optional). Defines the maximum size of the circles in pixels. Type: Number (e.g., 400). Default: Preset dependent.

'data-circles-speed' (Optional). Controls the movement speed of the circles. Type: Decimal (e.g., 1.5). Default: Preset dependent.

'data-circles-responsive' (Optional). Adjusts the animation to suit different screen sizes. Default: auto.