Scroll Reveal Words

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

• 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