---
title: "Scroll Spotlight — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Nostromo Studio · Effects. About This Component Scroll Spotlight is an interactive text slider that highlights the centered word using a customizable spotlight effect."
canonical: "https://framer.elliotli.dev/component/scroll-spotlight"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Scroll Spotlight

# Scroll Spotlight

Scroll Words with Spotlight Focus

[View on Framer](https://framer.com/marketplace/components/scroll-spotlight/?via=elliot-li)

![Scroll Spotlight preview image 1](https://framer.elliotli.dev/og/component/scroll-spotlight/a8fca7dfe94ee068/1600x1200.jpg)

## Summary

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

## Description

## 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](https://scrollspotlight-component.framer.website/) — [Demo with loop off](https://scrollspotlight-component.framer.website/preview)

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ntn3vzqk-Ftom0zGBbtSB3gmgpH8yOaAVS1fQbp)

## Scroll Interaction

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

### Component Scroll

**U**sers 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
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ntn3vzqk-tnypG0sJKhjijeEN1zQgSrmq7t4FWL)

## How to Set Up

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

## Refund Policy

All sales of digital products are final and non-refundable.

If you have any questions about the product, please contact me at [hellonostromostudio@gmail.com](mailto:hellonostromostudio@gmail.com) before completing your purchase. I’m happy to help.

Enjoy!

## Rank history [How rankings work →](/terms#rankings)

-   All · #5967

## Details

- **Author**: Nostromo Studio
- **Price**: $12.00
- **Published**: 2026-03-26
- **Updated**: 2026-04-21
- **Added**: 2026-03-13
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo