Sticky_Reveal_Elite: Premium Interactions Component by Surp Shahid

Wrap words in [brackets] for custom links and floating images. Now features full animation control—add blur, alpha fades, or lift effects to your scroll reveal. Includes precise layout tools and bulletproof animation timing.

About this Component

Dynamic Sticky Reveal is a highly customizable scroll component designed to make your paragraphs interactive. It pins your text to the screen, smoothly revealing the words as the user scrolls. Turn specific words into rich, interactive elements and fine-tune exactly how your text animates into view—all without touching a single line of code.Key Features:

Custom Animation Engine: Control the exact entrance of your unread text. Add beautiful blur effects, alpha/opacity fades, and Y-axis lifting directly from the properties panel.
Smart Bracket Parsing: Simply wrap any text in [brackets] to isolate it for special effects.
Rich Hover Media: Attach beautiful, floating images that appear smoothly when a user hovers over your bracketed words.
Multi-Item Links: Add multiple different destination URLs, custom colors, and hover images within the exact same paragraph.
Flawless Animation Math: The reveal is hard-coded to finish perfectly before the scroll ends, ensuring your last words never get cut off.
Total Layout Control: Instantly snap your text to the Top, Center, or Bottom of the screen. Fine-tune with top, bottom, and side padding sliders.

How to Use (Easy Guide)Step 1: Add Your Text & BracketsDrop the component onto your canvas and type your paragraph. Whenever you want a word or phrase to have a custom link or hover image, wrap it in brackets. (Example: We merge technical precision with [minimalist aesthetics].)Step 2: Dial in Your AnimationsBy default, the text stays perfectly in place and just changes color. Use the Start Lift, Start Opacity, and Start Blur sliders to create the exact visual entrance you want for your unread text.Step 3: Frame Your LayoutUse the Vertical Align dropdown to pin your text to the Top, Center, or Bottom of the screen. Adjust the padding sliders to ensure it sits perfectly within your site's design.Step 4: Configure Your LinksLocate the Link & Image Setup list. Map your settings in order: Item 1 controls your first bracketed word, Item 2 controls the second, and so on. Choose a text color, paste your URL, and upload your hover images!