What is it?

Aura Fluid element provides a dynamic, colorful fluid animation effect within a container. This immersive effect mimics fluid motions and responds to user interactions like mouse movement, creating an engaging visual experience.

Important note

The quickest way to achieve an animated fluid effect is by selecting a preset. Each preset includes pre-configured colors, intensity, and animation styles, so no additional attributes are needed. If you only use a preset, all other settings will automatically follow its configuration.

How to set it up?

Add the following attributes to the container element to configure the Aura Fluid effect:

'data-fluid'. Activates the Aura Fluid effect.

'data-fluid-preset' (Optional). Defines the color and animation style. Available presets include:

'data-fluid-opacity' (Optional). Sets the opacity level of the fluid animation (default is 0.9).

'data-fluid-intensity' (Optional). Controls the overall color intensity of the effect. Decimal (e.g., 1.0, 0.8)

'data-fluid-glow' (Optional). Adjusts the glow effect level in the animation. Decimal (e.g., 1.0, 0.8).

'data-fluid-electric' (Optional). Modifies the “electric” energy-like effect. Decimal (e.g., 1.0, 1.2).

'data-fluid-radius' (Optional). Specifies the radius of the effect's reach from the center. Numeric value (e.g., 100, 150).

'data-fluid-pulse-speed' (Optional). Sets the speed at which the animation pulses. Decimal (e.g., 8.0, 5.5).

'data-fluid-color1' (Optional). Sets custom colors for the fluid animation (hex format).

'data-fluid-color2' (Optional). Sets custom colors for the fluid animation (hex format).

'data-fluid-color3' (Optional). Sets custom colors for the fluid animation (hex format).