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