Premium element

Visual Effect

Circles

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.

Preview

Quick Setup

data-circles-animation=true

Required

Activates the Circles Animation effect on the specified container.

Available Presets

data-circles-preset="preset-name"

Optional

nordic

ocean

sunset

forest

cosmic

desert

arctic

spring

neon

pastel

Custom Colors

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)

Advanced configuration

data-circles-count

Optional

Defines the number of circles in the animation.

Default: 12

data-circles-min-size

Optional

Sets the minimum size of the circles in pixels.

Default: Preset dependent

data-circles-max-size

Optional

Defines the maximum size of the circles in pixels.

Default: Preset dependent

data-circles-speed

Optional

Controls the movement speed of the circles.

Default: Preset dependent

data-circles-responsive

Optional

Adjusts the animation to suit different screen sizes

auto

Automatically adjusts count and size based on screen width.

minimal

Minimal circle size and count for smaller screens.

moderate

Moderate size and count for a balanced look.

none

Disables responsiveness, keeping the initial configuration.

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