Built-in Modules

Magic Cursor

See it in action

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 <body> 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

<body data-sq-cursor>
  <!-- Page content -->
</body>

Advanced example with options

<body data-sq-cursor="size: 40; color: #6366f1; blend: difference; scale-on-hover: 2.5">
  <!-- Page content -->
</body>

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

See it in action

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 <ul>), and then give each child element a data-preview-src pointing to the image URL. Basic Example

<ul data-sq-preview>
  <li data-preview-src="/images/project-1.jpg" data-preview-alt="Project Alpha">
    <a href="/project-1">Project Alpha</a>
  </li>
  <li data-preview-src="/images/project-2.jpg" data-preview-alt="Project Beta">
    <a href="/project-2">Project Beta</a>
  </li>
  <li data-preview-src="/images/project-3.jpg" data-preview-alt="Project Gamma">
    <a href="/project-3">Project Gamma</a>
  </li>
</ul>

PHP Component Example

<ul class="sq-preview-list" data-sq-preview>
  <?php foreach ($projects as $project): ?>
    <li data-preview-src="<?= htmlspecialchars($project['image']) ?>"
        data-preview-alt="<?= htmlspecialchars($project['title']) ?>">
      <a href="<?= htmlspecialchars($project['url']) ?>">
        <?= htmlspecialchars($project['title']) ?>
      </a>
    </li>
  <?php endforeach; ?>
</ul>

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

See it in action

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

<div data-sq-loop-panels>
  <section class="sq-loop-panel" style="background: #111;">
    <h2>Panel 1</h2>
  </section>
  <section class="sq-loop-panel" style="background: #FFF;">
    <h2>Panel 2</h2>
  </section>
  <section class="sq-loop-panel" style="background: #333;">
    <h2>Panel 3</h2>
  </section>
</div>

Directional Marquee

See it in action

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

<div data-sq-marquee>
  <span>Design</span>
  <span>Development</span>
  <span>Strategy</span>
</div>

Advanced Example

<div data-sq-marquee="speed: 60; gap: 48; direction: right">
  <span>Design</span>
  <span>•</span>
  <span>Development</span>
  <span>•</span>
  <span>Strategy</span>
</div>

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

See it in action

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

<div data-sq-panels>
  <div class="sq-panel sq-panel--dark">Panel One</div>
  <div class="sq-panel sq-panel--light">Panel Two</div>
  <div class="sq-panel sq-panel--accent">Panel Three</div>
</div>

Advanced Example

<div data-sq-panels="rounded: true">
  <div class="sq-panel">Panel One</div>
  <div class="sq-panel">Panel Two</div>
</div>

Options

Option	Type	Default	Description
`rounded`	boolean	`true`	Adds rounded bottom corners (`24px`) to each panel during the pin phase.

Swipe Slider

See it in action

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

<div data-sq-swipe>
  <div class="sq-slide bg-dark">Slide One</div>
  <div class="sq-slide bg-light">Slide Two</div>
  <div class="sq-slide bg-gray">Slide Three</div>
</div>

Advanced Example

<div data-sq-swipe="duration: 1; ease: power4.inOut; show-nav: true; show-dots: true">
  <div class="sq-slide">Slide One</div>
  <div class="sq-slide">Slide Two</div>
</div>

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

See it in action

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 <span> or <strong>).

Usage Apply data-sq-mask directly to a text element containing plain text. Basic Example

<h2 data-sq-mask>
  Welcome to our creative studio.
</h2>

Advanced Example

<p data-sq-mask="type: words; duration: 0.9; stagger: 0.12; ease: power4.out; scroll: true">
  A highly customized paragraph revealing word-by-word.
</p>

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

See it in action

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

<div class="sq-card" data-sq-tilt>
  Card content
</div>

Advanced Example

<div class="sq-card" data-sq-tilt="max: 15; scale: 1.05; speed: 400">
  Card content
</div>

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.

Getting started

Architecture & Templating

Styling & Theming

GSAP Animations

Other

Magic Cursor

See it in action

Cursor Preview

See it in action

Infinite Loop Panels

See it in action

Directional Marquee

See it in action

Pinned Panels

See it in action

Swipe Slider

See it in action

Text Masking Reveal

See it in action

Cursor Driven Perspective Tilt

See it in action

​Magic Cursor

See it in action

​Cursor Preview

See it in action

​Infinite Loop Panels

See it in action

​Directional Marquee

See it in action

​Pinned Panels

See it in action

​Swipe Slider

See it in action

​Text Masking Reveal

See it in action

​Cursor Driven Perspective Tilt

See it in action

Magic Cursor

Cursor Preview

Infinite Loop Panels

Directional Marquee

Pinned Panels

Swipe Slider

Text Masking Reveal

Cursor Driven Perspective Tilt