# Tab 2 - Custom Cursors

The **Custom Cursors** tab lets you replace the default mouse cursor with interactive, animated cursor styles.

You can find this tab by clicking the **cursor icon** in the left vertical menu of the Aura Suite panel.

***

### Step 1: Enable Custom Cursors

To activate custom cursors, simply enable the **Custom Cursor Toggle** at the top of the panel.

Once enabled, you will see a list of available cursor styles.

The cursor will be applied automatically to your live website - no extra setup required.

***

### Step 2: Choosing a Cursor Style

Aura Suite includes a growing library of optimized cursor templates.\
New cursor styles are added and updated regularly.

To use a cursor:

1. Click on any cursor style
2. It becomes active immediately

You can switch between cursors at any time to test what fits your design best.

{% hint style="success" %}

### Automatic Hover Interactions

Many cursor styles include built-in hover interactions. This means when users hover over buttons or links the cursor automatically changes or reacts

You don’t need to define hover areas or apply classes. Everything is handled automatically by Aura Suite.
{% endhint %}

{% hint style="info" %}

### Safari Compatibility

Some cursor animations are automatically disabled on **Safari**. This is because Safari does not handle certain heavy animations well, which could cause stuttering or poor performance. 

To protect the user experience, Aura Suite disables those effects automatically on Safari when needed.
{% endhint %}

***

### Step 3: Saving Your Cursor Settings

After selecting or changing a cursor:

Click the **Save** button in the top-right corner of the Aura Suite panel.

This will regenerate your optimized script and apply the new cursor to your live website automatically.

***

### Testing Cursors on the Live Site

Cursor behavior is best tested on the **live website**, not just in the editor.

We recommend:

* publishing your site
* testing different cursor styles on desktop
* checking how they feel in real interaction

Choose the cursor that matches your brand and does not distract from usability.

***

### How to use WebGL Cursors

WebGL cursors are the most visually rich and interactive cursor effects.

Because they use real-time graphics rendering, they can be more demanding on performance, especially on slower devices.

#### How WebGL Cursors Are Rendered

Our WebGL cursors are rendered as **background layers** behind your content.

This means:

* they appear behind all elements
* they do not overlay your layout

{% hint style="warning" %}

#### Required Layout Settings

To see WebGL cursors on your live website, both of the following must be true:

* the **page background** must be transparent
* the **section background** must also be transparent

If either background is solid, the WebGL cursor will not be visible.
{% endhint %}

***

### What’s Next?

Next, continue with:

* [**Tab 3 - Apply Overlays**](/interactive-studio/aura-suite/get-started/tab-3-overlay-effects.md)
* [**Tab 4 - Add GSAP Animations to Texts**](/interactive-studio/aura-suite/get-started/tab-4-gsap-text-effects.md)

Each tab adds another layer of visual polish to your site.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://insync.gitbook.io/interactive-studio/aura-suite/get-started/tab-2-custom-cursors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.