---
title: "Scroll Reveal Words — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Zeroqode · Text. Scroll-driven word highlighting effect"
canonical: "https://framer.elliotli.dev/component/scroll-reveal-words"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Scroll Reveal Words

# Scroll Reveal Words

Scroll-driven word highlighting effect

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

![Scroll Reveal Words preview image 1](https://framer.elliotli.dev/og/component/scroll-reveal-words/9ee63fa425e6d111/1600x1200.jpg)

## Summary

Scroll-driven word highlighting effect

## Description

## Key Features

-   **Scroll-Driven Word Highlighting** - As the user scrolls, a list of words flows through a fixed highlight band. The word currently in the band illuminates in a configurable accent color; all others stay dimmed. Powered by native CSS (position: sticky), the effect runs smoothly without any JavaScript.
    
-   **Fluid, Responsive Typography** - Text scales smoothly across all viewport widths using modern CSS functions, with no manual breakpoints required. The component auto-calculates its own height based on the number of words, ensuring the scroll length always fits naturally.
    
-   **Full Theming & Accessibility** \- Choose Light, Dark, or System themes; dial in any accent hue from 0–359°; and adjust the highlight band's vertical position. Built-in accessibility ensures screen readers receive a coherent fallback sentence.
    

### How to Set Up

1\. Add the component to your Framer project via copy-paste or by importing the shared URL from the assets panel.

2\. Drop it directly onto a Page.

⚠️ **_Important Note:_** Do not place it inside a frame with Overflow: Hidden. The CSS position: sticky effect requires unobstructed parent frames to work correctly.

3\. Configure your content: Set the **Prefix text** (e.g., "you can"), add your **Words** list (up to 20 entries), and provide an SR Text sentence for screen readers.

4\. Style the effect: Pick an accent Hue, choose a **Theme** (Light / Dark / System), and adjust the **Start position** to control where the highlight band sits on the screen.5. Hit Preview **(⌘P)** or publish your site to see the scroll animation in action (the canvas will only show a static snapshot).

For more details on installation and component properties, please refer to the documentation: [https://docs.zeroqode.com/framer-plugins/scroll-reveal-words](https://docs.zeroqode.com/framer-plugins/scroll-reveal-words)

### Perfect For

-   Agency and portfolio sites that want bold, scroll-driven storytelling in their hero sections.
    
-   SaaS and product landing pages showcasing multiple features or capabilities in a single dynamic headline.
    
-   Creative studios and personal brands looking for a typographic statement that feels modern and interactive.
    
-   "What we do" or service sections where cycling through action words reinforces versatility.
    
-   Any project where you want to replace static headings with an engaging, scroll-activated reveal.
    

### Support

💬 For any questions, feel free to contact us at: [support@zeroqode.com](mailto:support@zeroqode.com)

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

-   All · #5400

## Details

- **Author**: Zeroqode
- **Price**: $3.00
- **Published**: 2026-06-05
- **Updated**: 2026-06-08
- **Added**: 2026-05-26
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing