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
The component is controlled by scrolling and can work in two ways:
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.
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.
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.
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.
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.
The component can adapt to many design styles.
You can customize:
container background color
container border radius
overflow behavior
spacing between words
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
All sales of digital products are final and non-refundable.
If you have any questions about the product, please contact me at pierrevion90@gmail.com before completing your purchase. I’m happy to help.
Enjoy!
Nostromo Studio
