# Tab 1 - Website Details

The **Website Details** tab lets you improve how your site feels and behaves globally.

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

It contains three main sections:

* Smooth Scrolling
* Custom Marker
* Custom Scrollbar

All changes apply to your entire website.

***

### 1. Smooth Scrolling

Smooth Scrolling enables **Lenis smooth scrolling** on your website, which makes scrolling feel softer and more natural.

Instead of reacting instantly to mouse input, the scroll movement is slightly smoothed out, creating a more premium experience.

#### Available Settings

**Lerp (Linear Interpolation)**

Lerp controls how strongly the scroll movement is smoothed.

* Lower value → smoother, more delayed motion
* Higher value → more direct, faster response

Default: **0.1**

{% hint style="info" %}
We recommend not going below **0.08**, as very low values can make the site feel slow and less responsive.
{% endhint %}

**Wheel Multiplier**

Wheel Multiplier controls how fast the page scrolls relative to the user’s mouse wheel input.

* Higher value → faster scrolling
* Lower value → slower scrolling

Default: **0.9**

{% hint style="info" %}
We recommend not going below **0.7**, as very low values can make scrolling feel heavy and tiring for users.
{% endhint %}

{% hint style="warning" %}
**Important UX Note: Extreme values can negatively affect usability.**

Smooth scrolling should improve the experience, not make the site feel slow or hard to control.\
Always test on the live site after changing these values.
{% endhint %}

***

### 2. Custom Marker

Custom Marker lets you change how **selected text is highlighted** on your live website.

By default, browsers use a blue highlight color. Aura Suite allows you to customize both the background and text color of selected text.

#### Available Settings

* **Marker Color** - background color of selected text
* **Text Color** - color of the text while selected

#### Design Recommendations

For best readability and visual harmony:

* Use your website’s **accent color** for the marker
* or use the **opposite of your background color**
  * light background → darker marker
  * dark background → lighter marker

Always choose a text color that contrasts well with the marker color so the text stays readable when selected.

***

### 3. Custom Scrollbar

Custom Scrollbar lets you style or hide the scrollbar on your website.

#### Scrollbar Style

You can choose between:

* **Auto** - default browser scrollbar
* **Thin** - slimmer scrollbar
* **None** - hides the scrollbar completely

{% hint style="warning" %}
**Note:**\
Hiding the scrollbar can look clean and minimal, especially for interactive experiences, but it may reduce usability and UX. Some users rely on scrollbars for orientation.
{% endhint %}

#### Scrollbar Colors

You can also customize:

* **Scrollbar Color (Thumb Color)** - the draggable part of the scrollbar
* **Track Color** - the background of the scrollbar

These colors apply to the entire website.

***

### Saving Your Changes

After adjusting any settings:

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

This will:

* upload your settings
* regenerate your optimized script file
* apply changes to your live site automatically

Your updates are usually visible on the live website within a few seconds.

***

### What’s Next?

Next, you can continue with:

* [**Tab 2- Apply Custom interactive Cursors**](/interactive-studio/aura-suite/get-started/tab-2-custom-cursors.md)
* [**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 focuses on a different type of visual enhancement.


---

# 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-1-website-details.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.
