ImgMask
An interactive text component that mask-reveals images on hover or scroll by replacing custom characters in your text. Perfect for creatives and engaging visual typography.
Make it with Workshop
Build your own component with AI
An interactive text component that mask-reveals images on hover or scroll by replacing custom characters in your text. Perfect for creatives and engaging visual typography.
Make it with Workshop
Build your own component with AI
Transform your text into an interactive visual experience with animated image reveals that respond to both hover interactions and scroll-based triggers. This versatile component allows you to blend typography with imagery by replacing designated characters in your text with animated images that smoothly reveal themselves either when users hover over the component or as they scroll it into view.
Simply use a custom character (like ~) as a placeholder within your text, and watch as images mask into view based on your chosen trigger method. The reveal animation can be customized to expand horizontally or vertically, creating everything from subtle accents to bold visual statements that captivate your audience. Perfect for creative headlines, interactive portfolios, scroll-triggered storytelling, and memorable call-to-action elements.
Dual trigger modes: hover interaction or scroll-based animation
Dynamic text-to-image animation with customizable timing
Customizable mask character for flexible text integration
Smooth reveal animations with horizontal or vertical directions
Adjustable scroll threshold for precise trigger control
Optional click-through linking functionality
Responsive image sizing that scales with font size
Full typography control with custom fonts and styling
Multiple alignment options for versatile layouts
Optimized performance with smooth animations
Trigger Type – Choose between hover activation or scroll-triggered animation
Scroll Threshold – Set what percentage of the element must be visible to trigger scroll animation
Text – Enter your text content with mask characters as image placeholders (e.g., "Hello ~ World")
Mask Character – Define which character will be replaced with animated images
Font – Complete typography control, including size, family, weight, and spacing
Text Color – Choose the color for your text content
Text Alignment – Align text left, center, or right within the container
Mask Image – Upload the image that will animate into view
Reveal Direction – Set whether images reveal horizontally or vertically
Animation Duration – Control how long the reveal animation takes (0.1-5 seconds)
Animation Easing – Choose from 11 different easing options for motion style
Link URL – Optional URL to make the entire component clickable
As a digital product, all purchases are final and non-refundable. Upon purchase, you receive immediate access to the Framer component, and since digital products cannot be returned once delivered, we cannot process refunds, exchanges, or cancellations.
I encourage you to carefully review all features, documentation, and preview materials before purchasing. If you have any questions or need clarification about the component's functionality, please don't hesitate to reach out before your purchase.
Your purchase confirms acceptance of these terms and conditions.Credits - Hover SVG provided by streamlineicons.com.
