Distortion

Distortion delivers a lens-like warping effect. It draws focus toward the center of the screen while shifting from warped to normal, creating a cinematic transition that enhances visual impact.

Property Controls

Distortion (Number: -0.2-1)

Controls the degree of distortion of the media. The larger the value, the stronger the deformation of the media and the further away it will appear to enter from. When "Mode" is "Realistic", its parameter range will expand to -2 to 100.

Sharpness (Number: 1-10)

The degree of additional deformation. Larger values will cause more pronounced deformation at the four corners of the media. Only available when Type is Classic.

Scale (Number: 1-10)

The zoom effect of the image. Only available when Type is Realistic.

Blur (Number: 1-10)

The blurriness of the image.

Advance: Mode (Enum: Classic/Realistic)

The configuration mode for the distortion effect. Classic mode allows you to use the Sharpness attribute to add extra deformation, while Realistic mode simulates a real lens effect and allows you to use Scale to add zoom.

Advance: Fade In (Boolean: Yes/No)

Appearance effect. When enabled, the image will start completely invisible.

Distortion
Component
Media

Image

Video

Image
Upload
Fit
Distortion
Scale
Blur
Advance

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance
Type

Classic

Realistic

Fade In

Yes

No

Animation
Type
Custom

Custom

Custom
Enable

Yes

No

Customize the animation target value for each property.
Distortion
Scale
Sharpness
Blur
Transition

Instant

Ease

Spring

Accessibility
Aria Label

Yes

No

Compatibility

Yes

No

Disable effects and use regular image/video elements. e.g. use on Phone layout for better performance.
Reduce Motion

Allow

Block

Whether to allow Reduce Motion to control animation.
Renderer

Auto

Always

Control when the renderer will render.
Distortion
Distortion
Distortion
Component
Media

Image

Video

Image
Upload
Fit
Distortion
Scale
Blur
Advance

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance
Type

Classic

Realistic

Fade In

Yes

No

Animation
Type
Custom

Custom

Custom
Enable

Yes

No

Customize the animation target value for each property.
Distortion
Scale
Sharpness
Blur
Transition

Instant

Ease

Spring

Accessibility
Aria Label

Yes

No

Compatibility

Yes

No

Disable effects and use regular image/video elements. e.g. use on Phone layout for better performance.
Reduce Motion

Allow

Block

Whether to allow Reduce Motion to control animation.
Renderer

Auto

Always

Control when the renderer will render.
Distortion
Distortion
Distortion
Component
Media

Image

Video

Image
Upload
Fit
Distortion
Scale
Blur
Advance

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance
Type

Classic

Realistic

Fade In

Yes

No

Animation
Type
Custom

Custom

Custom
Enable

Yes

No

Customize the animation target value for each property.
Distortion
Scale
Sharpness
Blur
Transition

Instant

Ease

Spring

Accessibility
Aria Label

Yes

No

Compatibility

Yes

No

Disable effects and use regular image/video elements. e.g. use on Phone layout for better performance.
Reduce Motion

Allow

Block

Whether to allow Reduce Motion to control animation.
Renderer

Auto

Always

Control when the renderer will render.
Distortion
Distortion

Distortion

Distortion delivers a lens-like warping effect. It draws focus toward the center of the screen while shifting from warped to normal, creating a cinematic transition that enhances visual impact.

Get Start

Learn about the properties, controls, and usages.

Troubleshooting

Check out our support page or contact us for solutions.

Reveals Cool WebGL Effects Components for Framer - Distortion

Stay updated.

Stay updated.

Stay updated.

Subscribe to our newsletter to stay up to date and to receive important updates.

Subscribe to our newsletter to stay up to date and to receive important updates.

Subscribe to our newsletter to stay up to date and to receive important updates.

© 2025 Reveals. All rights reserved.

.framer-styles-preset-s5v84h { cursor: default !important; pointer-events: none; }