5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rdgef59pv3cw.js","/creators-assets/_next/static/immutable/chunks/0zdv1ssrxkrvj.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/0gxswkth5mc6b.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/36invrtoq879v.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0j6nyijn0flqd.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3h1dt97hv5ik0.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1h-r9oggqjick.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5d:Tb7e,

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

59:[["$","$L5c",null,{"post":{"id":"019e9869-44bc-788d-8a77-68cdc070e492","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"5f5e219b-8257-4212-85a8-db6dd719febe","name":"Zeroqode","slug":"zeroqode","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/183716/logo-icon-BG-circle%20copy-IauPYu9ntfHlHHY38w8OXzpiTpJ8Uw.png","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Pufe3BIshQglQP1T50hQ","resolved":true,"title":"Scroll Reveal Words","body":"$5d","bodyJson":null,"introduction":"Scroll-driven word highlighting effect","slug":"scroll-reveal-words","author":{"framerUserId":"5f5e219b-8257-4212-85a8-db6dd719febe","name":"Zeroqode","slug":"zeroqode","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/183716/logo-icon-BG-circle%20copy-IauPYu9ntfHlHHY38w8OXzpiTpJ8Uw.png","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Pufe3BIshQglQP1T50hQ/scroll-reveal-words-C4c6MTxUG7Jt8A1fZeMF2H88dDe332","metadata":{"tint":"hsl(0 0% 3%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-05-26T15:28:01.466Z","updatedAt":"2026-06-08T14:41:40.231Z","publishedAt":"2026-06-05T15:31:36.252Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://energetic-difference-361007.framer.app/","price":"3","paymentUrl":"https://buy.stripe.com/8x26oHafleof5s7bhb8og0m","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Typography","slug":"typography"}],"lastSaveId":"kHDNLZXVnd4wH5iauDCN"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-05T15:31:36.252Z","updatedAt":"2026-06-05T15:31:36.252Z","reported":false}}],"$L5e"]

Suggested for you