Ripple

Ripple

Blocks

Blocks

Reeded Glass

Reeded Glass

Shutters

Shutters

Pixel Scan

Pixel Scan

Distortion

Distortion

Burn

Burn

Error

Error

Crack

Crack

Scan

Scan

Ripple

Ripple

Blocks

Blocks

Reeded Glass

Reeded Glass

Shutters

Shutters

Pixel Scan

Pixel Scan

Distortion

Distortion

Burn

Burn

Error

Error

Crack

Crack

Scan

Scan

Distortion

Distortion Icon
Distortion Icon
Distortion Icon

Distortion can bring a camera lens-like distortion effect to your work, which is especially suitable for showcasing dynamic and dramatic pieces. It can add a unique visual impact to your work, focusing the audience's attention on the center. Whether used for artistic creations or commercial advertisements, Distortion can make your work stand out and be more memorable.

Copy Component

Property Control

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.

Distortion (Number: -0.2-1 / -2-100)

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 "Mode" is "Classic".

Scale (Number: 1-10)

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

Blur (Number: 1-10)

The blurriness of the image.

The properties below will be available when you use the Nest component.

Animation Start (EventHandler: onAnimationStart)

Triggers the event when the animation starts.

Animation End (EventHandler: onAnimationEnd)

Triggered when the animation ends.

Video End (EventHandler: onVideoEnd)

Triggered when the video playback ends, this event will not be triggered when "Loop" is "Yes".

Media Loaded (EventHandler: onMediaload)

Triggered when the media is loaded.

Distortion
Component
Media

Image

Video

Image

Image

Size

Fill

Mode

Classic

Realistic

Distortion
Scale
Blur
Animate

Appear

Transition

Spring

Variant 1

Variant 2

Variant 3

Distortion
Component
Media

Image

Video

Image

Image

Size

Fill

Mode

Classic

Realistic

Distortion
Scale
Blur
Animate

Appear

Transition

Spring

Variant 1

Variant 2

Variant 3

Distortion
Component
Media

Image

Video

Image

Image

Size

Fill

Mode

Classic

Realistic

Distortion
Scale
Blur
Animate

Appear

Transition

Spring

Variant 1

Variant 2

Variant 3

Features

Use your favorite
Image & Video.

Trigger effects with Scroll Animation.

Interactive experience with Scroll Transform.

Interactive experience
with Scroll Transform.

Media changes with Color Themes.

Compatible with
Framer Transition Controls.

Maintain Effects
after the transition.

Next

Variant 1

Variant 2

Variant 3

Video

by

Cottonbro

Variant 1

Variant 2

Variant 3

Video

by

Cottonbro

Reveals cool WebGL Effects Components for Framer.