Premium element
Animated text
MagicLens
MagicLens is an interactive effect that brings your text to life. By focusing on specific texts of your webpage.
Preview
Bricks Builder
Quick Setup
data-magnify=true
Required
Activates the MagicLens effect.
Advanced configuration
data-magnify-scale
Optional
Adjusts how much the text is magnified.
Default: 1.5
data-magnify-size
Optional
Adjusts the transparency of the magnifying effect.
Default: 0.1
data-magnify-mobile-size
Optional
Sets the size of the magnifying area on mobile devices.
Default: 100
data-magnify-opacity
Optional
Adjusts the transparency of the magnifying effect.
Default: 0.1
data-magnify-distortion
Optional
Controls the amount of visual distortion applied to the text within the magnified area.
Default: 5
data-magnify-speed
Optional
Defines the speed of the distortion animation in the magnified area.
Default: 0.001
data-magnify-color
Optional
Sets the color of the text inside the magnified area.
Default: #ff00ff
data-magnify-background
Optional
Changes the background color inside the magnifying lens.
Default: #ffffff
data-magnify-replace
Optional
Replaces the original text within the magnified area with new content. This is useful if you want to display different text inside the magnification.
Additional considerations
Mobile Responsiveness. While MagicLens is compatible with mobile devices (via the data-magnify-mobile-size attribute), adjusting the magnifying glass size and distortion level specifically for smaller screens is recommended.
Avoiding Overuse. As with any interactive animation, it’s important not to overload the page with too many MagicLens elements. Overuse could distract users or make the page appear cluttered. We recommend using it sparingly to achieve visual impact without sacrificing the overall user experience.
Replacing Words. If you use the data-magnify-replace attribute to replace the text with another word or phrase, it’s ideal to choose a replacement that roughly matches the length and size of the original text. If the replacement text is too long, parts of the word might be cut off or distorted, making it harder to read. A useful trick is to adjust the size of the replacement word until it fits neatly into the available space, ensuring it remains fully visible within the magnified area.
We're here to help
Choose how you'd like to connect with our support team
Contact Support
Get help from our team of experts
Response within 24 hours