Element ID
Description: Enter the IDs of the bubble elements to which you want to apply the effect.

Example: If you want the effect to be applied to a group with the ID my-element, enter 'my-element'

Max Tilt

Description: Sets the maximum tilt (in degrees) of the element when the mouse moves over it.

Example: If you enter 30, the element can tilt up to 30 degrees in each direction. This controls the intensity of the parallax effect.

Start X

Description: Sets the initial rotation of the element on the X axis (to control the tilt forward or backward).

Example: To start with the element tilted slightly forward, enter 10. To make it straight, enter 0. To start it tilted backward, enter -10.

Start Y

Description: Sets the initial rotation of the element on the Y axis (to control the tilt to the sides).

Example:
To start with the element tilted slightly to the left, enter -10.
To start it straight, enter 0.
To start it tilted slightly to the right, enter 10.
Perspective

Description: Defines the 3D perspective distance (in pixels) that determines how intense the tilt effect appears. A higher value will make the tilt less pronounced, while a lower value will make the tilt more dramatic.

Example: Enter 1000 for a moderate perspective effect.

Scale

Description: Defines the scaling factor applied to the element when the mouse hovers over it. A value greater than 1 will scale the element up, while a value less than 1 will scale it down.

Example: Enter 1.05 to increase the element's size by 5%. Enter 0.95 to reduce the element's size by 5%.

Speed

Description: Controls the speed of the effect. A higher value makes the effect slower, while a lower value makes it faster.

Example: Enter 500 for a moderate speed, where the tilt and scale change smoothly.

Gyroscope

Description: Enables or disables the gyroscope effect, which adjusts the tilt based on the device's movement.

Example: Set to true to enable gyroscope support for mobile and tablet devices. Set to false to disable gyroscope support.

Gyroscope Min Angle X

Description: Sets the minimum angle of the element on the X axis when gyroscope support is enabled.

Example: Enter -45 to allow a minimum tilt of -45 degrees on the X axis.

Gyroscope Max Angle X

Description: Sets the maximum angle of the element on the X axis when gyroscope support is enabled.

Example: Enter 45 to allow a maximum tilt of 45 degrees on the X axis.

Gyroscope Min Angle Y

Description: Sets the minimum angle of the element on the Y axis when gyroscope support is enabled.

Example: Enter -45 to allow a minimum tilt of -45 degrees on the Y axis.

Gyroscope Max Angle Y

Description: Sets the maximum angle of the element on the Y axis when gyroscope support is enabled.

Example: Enter 45 to allow a maximum tilt of 45 degrees on the Y axis.

Gyroscope Samples

Description: Defines the number of samples used by the gyroscope to detect movement. A higher value increases precision but may impact performance.

Example: Enter 10 for normal gyroscope sensitivity.
Transition

Description: Enables or disables a smooth transition effect when applying the tilt or scale effect.

Example: Set to true for a smooth transition between states. Set to false for a sudden change in tilt and scale.

Axis

Description: Specifies which axis the effect should be applied to. You can select "x" for X-axis only, "y" for Y-axis only, or leave it empty for both axes.
Example: Set to x to apply the effect only on the X-axis. Set to y to apply the effect only on the Y-axis.
Leave it empty to apply the effect to both axes.

Reset

Description: Enables or disables the reset of the element's tilt and scale when the mouse leaves the element.

Example: Set to true to reset the element to its original position when the mouse leaves.
Set to false to keep the element in its last state.

Reset to Start

Description: Enables or disables resetting the element's position to the starting values (set by Start X and Start Y) when the effect is reset.

Example: Set to true to reset to the initial Start X and Start Y positions when the effect resets.
Set to false to retain the element's current position.

Opacity

Description: Enables or disables the opacity effect, which adds a shining light effect to the element based on the mouse position.

Example: Set to true to enable opacity. Set to false to disable opacity.

Max opacity

Description: Controls the intensity of the glare effect. A value between 0 and 1 determines how strong the glare will appear.

Example: Enter 0.5 for moderate glare intensity.

Full Page Listening

Description: Enables or disables the full-page listening mode, which listens for mouse movements across the entire page rather than just the element.

Example: Set to true to listen for mouse movements across the whole page. Set to false to only apply the effect when the mouse is over the element.