> ## Documentation Index
> Fetch the complete documentation index at: https://docs.squeditor.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Built-in Modules
## Magic Cursor
*Attribute: `data-sq-cursor`*
The Magic Cursor module replaces the default system pointer with a custom interactive dot and following circle. The cursor scales up when hovering over interactive elements such as links and buttons.
**Usage**
Simply add `data-sq-cursor` to the `` element. In the Squeditor framework, you can enable this globally or per page by setting the variable `$enable_cursor = true` in the PHP template.
**Basic example**
```html theme={null}
```
**Advanced example with options**
```html theme={null}
```
**Options**
| Option | Type | Default | Description |
| ---------------- | ------ | ---------- | ---------------------------------------------------------------------------------- |
| `size` | number | `32` | Diameter of the cursor's outer circle in pixels. |
| `color` | string | `#000000` | Hex, RGB, or standard CSS color value. |
| `blend` | string | `'normal'` | CSS `mix-blend-mode` (e.g., `'difference'`, `'multiply'`). |
| `scale-on-hover` | number | `2` | Multiplier for how large the cursor grows when hovering over interactive elements. |
**Interactive Elements Check**
The cursor automatically grows when hovering over elements matching the following selectors:
* `a`
* `button`
* `[data-sq-cursor-hover]`
* `input`
* `label`
***
## Cursor Preview
*Attribute: `data-sq-preview`*
The **Cursor Tracking Image Preview** module reveals an image that tracks the mouse movement when hovering over list items. This is widely used for portfolio lists, team directories, and visual indices.
**Usage**
Apply `data-sq-preview` to the wrapper parent element (e.g., a ``), and then give each child element a `data-preview-src` pointing to the image URL.
**Basic Example**
```html theme={null}
```
**PHP Component Example**
```php theme={null}
```
**Options**
These attributes are added to the *child* elements of the `data-sq-preview` wrapper.
| Attribute | Type | Required | Description |
| ------------------ | ------ | -------- | -------------------------------------------------------- |
| `data-preview-src` | string | **Yes** | Absolute or relative URL to the image to preview. |
| `data-preview-alt` | string | No | The `alt` text attribute applied to the generated image. |
***
## Infinite Loop Panels
*Attribute: `data-sq-loop-panels`*
This module stacks full-height sections naturally. As you scroll, each new panel snaps into the viewport, layering atop the previous section.
**Usage**
Apply `data-sq-loop-panels` to a wrapper. Its direct children become the panels.
**Basic Example**
```html theme={null}
```
***
## Directional Marquee
*Attribute: `data-sq-marquee`*
[View Demo](#)
The Directional Marquee creates an infinite horizontal scrolling banner. It clones the content inside the wrapper to seamlessly loop. It observes scroll velocity, speeding up momentarily if the user scrolls quickly, and switches direction depending on whether the user scrolls up or down.
**Usage**
Wrap the items in a container with the `data-sq-marquee` attribute.
**Basic Example**
```html theme={null}
Design
Development
Strategy
```
**Advanced Example**
```html theme={null}
Design
•
Development
•
Strategy
```
**Options**
| Option | Type | Default | Description |
| ----------- | --------------------- | -------- | ----------------------------------------- |
| `speed` | number | `50` | The scrolling speed in pixels per second. |
| `gap` | number | `40` | Gap between elements in pixels. |
| `direction` | `'left'` or `'right'` | `'left'` | Initial scroll direction. |
***
## Pinned Panels
*Attribute: `data-sq-panels`*
The Pinned Panels module pins a section to the top of the viewport and creates an overscroll effect where the next panel scales down the current one and slides over it. Designed for impactful storytelling sections, long-form content, and case study breakdowns.
**Usage**
Wrap your individual panel sections in a parent `div` that has the `data-sq-panels` attribute.
**Basic Example**
```html theme={null}
Panel One
Panel Two
Panel Three
```
**Advanced Example**
```html theme={null}
```
**Options**
| Option | Type | Default | Description |
| --------- | ------- | ------- | ------------------------------------------------------------------------ |
| `rounded` | boolean | `true` | Adds rounded bottom corners (`24px`) to each panel during the pin phase. |
***
## Swipe Slider
*Attribute: `data-sq-swipe`*
The Swipe Slider creates an event-based slider that responds to mouse wheel, touch swipe, and keyboard (`ArrowUp`/`ArrowDown`). No actual DOM scrolling occurs.
**Never** apply `data-sq-swipe` and UIKit3 Slider to the same wrapper.
**Usage**
Apply `data-sq-swipe` to the slider container with immediate children acting as the slides.
**Basic Example**
```html theme={null}
Slide One
Slide Two
Slide Three
```
**Advanced Example**
```html theme={null}
```
**Options**
| Option | Type | Default | Description |
| ----------- | ------- | ---------------- | ------------------------------- |
| `duration` | number | `1` | Transition duration in seconds. |
| `ease` | string | `'power4.inOut'` | GSAP ease equation. |
| `show-nav` | boolean | `false` | Display previous/next buttons. |
| `show-dots` | boolean | `false` | Display pagination dots. |
***
## Text Masking Reveal
*Attribute: `data-sq-mask`*
This module uses `SplitText` to break text into lines or words, then adds an `overflow: hidden` wrap to mask the text as it animates vertically into view. An elegant way to format large headings and stylized paragraphs.
**Never** apply `data-sq-mask` to elements with child HTML tags (such as `` or ``).
**Usage**
Apply `data-sq-mask` directly to a text element containing plain text.
**Basic Example**
```html theme={null}
Welcome to our creative studio.
```
**Advanced Example**
```html theme={null}
A highly customized paragraph revealing word-by-word.
```
**Options**
| Option | Type | Default | Description |
| ---------- | ---------------------- | -------------- | -------------------------------------------- |
| `type` | `'lines'` or `'words'` | `'lines'` | Method for text splitting. |
| `duration` | number | `0.85` | Animation duration per split item (seconds). |
| `stagger` | number | `0.1` | Initial stagger delay (seconds). |
| `ease` | string | `'power4.out'` | Animation easing type. |
| `scroll` | boolean | `true` | Enable ScrollTrigger reveal on scroll. |
| `start` | string | `'top 85%'` | Custom scroll start trigger point. |
***
## Cursor Driven Perspective Tilt
*Attribute: `data-sq-tilt`*
The Perspective Tilt module adds an interactive 3D rotation to an element when hovered, giving it a tactile, card-like feel. It's often used for team members, featured projects, or pricing cards.
**Never** apply `data-sq-tilt` to UIKit3 Sticky elements.
**Usage**
Simply add the `data-sq-tilt` attribute to any element.
**Basic Example**
```html theme={null}
Card content
```
**Advanced Example**
```html theme={null}
Card content
```
**Options**
| Option | Type | Default | Description |
| ------- | ------ | ------- | ---------------------------------------------- |
| `max` | number | `12` | The maximum rotation angle in degrees. |
| `scale` | number | `1.04` | How much the element should scale up on hover. |
| `speed` | number | `400` | The transition speed in milliseconds. |