About Scroll Spotlight

About This Component

Scroll Spotlight is an interactive text slider that highlights the centered word using a customizable spotlight effect.

As users scroll, words move vertically while the focused word appears inside a visual spotlight, creating a strong sense of emphasis and rhythm. It’s perfect for hero sections, messaging blocks, taglines, or storytelling layouts.

The spotlight effect uses a modern glass-style overlay by default, but every visual aspect can be customized.

Demo with loop on — Demo with loop off

Scroll Interaction

The component is controlled by scrolling and can work in two ways:

Component Scroll

Users scroll directly over the component to move through the words.

When Loop is disabled, an optional Release to Page setting allows the page to resume scrolling once the first or last word is reached. This creates a natural transition between the component interaction and the rest of the page.

Page Scroll

The slider reacts to the page scroll position, allowing it to integrate naturally into long landing pages.

Smooth transitions create a clean, polished motion between each word.

Spotlight Highlight

The centered word is displayed inside a customizable spotlight (glass effect by default):

font (family, size, weight, etc)
color
background color
backdrop blur
border radius
border styling
shadow effects
padding

You can also choose how the spotlight width behaves:

Fit Content : the spotlight automatically adapts to the width of the current word.
Full Width : the spotlight stretches across the component width.

Words & Spacing

The component displays a vertical list of words, with full control over their visual style and spacing:

font (family, size, weight, etc)
text color
spacing between words (gap)

This allows you to create clear hierarchy, improve readability, and fine-tune the overall rhythm of the animation.

Loop & Scroll Behavior

Scroll Spotlight includes flexible interaction settings:

optional infinite loop mode
adjustable scroll sensitivity
smooth animation duration control

When loop is disabled, you can also allow the page scroll to continue naturally once the first or last word is reached.

Layout & Container Styling

The component can adapt to many design styles.

You can customize:

container background color
container border radius
overflow behavior
spacing between words

How to Set Up

Drag Scroll Spotlight onto your canvas
Add the words you want to display
Adjust the width and height of the component to fit your layout
Choose how scrolling should control the slider (component scroll or page scroll)
Customize the spotlight appearance and typography
Adjust animation smoothness and spacing
Publish