Scroll Reveal Words: Premium Typography Component by Zeroqode

Scroll Reveal Words pins a static prefix like "you can…" on screen while action words scroll through a highlighted band, each lighting up in accent color as it passes. Pure CSS - no JS listeners, no libraries. Lightweight and ready to drop into any project

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

Perfect For

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