Tsunami

Tsunami brings a unique sense of distortion to your design. It simulates the wave-like warping of motion, making visuals feel lifted and twisted as if carried by water.

Copy on Framer Market

View on Sandbox

Property Controls

Distortion (Number: 0 - 1)

Intensity of the wave distortion.

Angle (Number: 0 - 360)

Directional angle of the wave.

Offset (Number: 0 - 1)

Offset position of the wave, also serves as the starting point for animation.

Advance: Width (Number: 0 - 1)

Wave width proportion.

Advance: Disturbance (Number: 0 - 1)

Disturbance strength within the distortion. Higher values create randomized interference inside the wave.

Advance: Dispersion (Number: 0 - 1)

Color dispersion intensity, affected by Distortion.

Advance: Reflection (Number: 0 - 1)

Highlight intensity simulating reflective shine at the center of the wave.

Advance: Blend (Boolean: Yes / No)

Enables highlight blending (available only when Reflection > 0).

Advance: Shadow (Number: 0 - 1)

Shadow intensity for adding depth to the wave effect.

Advance: Blend (Boolean: Yes / No)

Enables shadow blending (available only when Shadow > 0).

Distortion

Component

Media

Image

Video

Image

Upload

Fit

Distortion

Angle

Offset

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance

Width

Disturbance

Dispersion

Affected by Distortion.

Reflection

Blend

Yes

Shadow

Mask

Yes

Animation

Type

Custom

Enable

Yes

Customize the animation target value for each property.

Distortion

Angle

Offset

Width

Disturbance

Dispersion

Shadow

Transition

Instant

Ease

Spring

Accessibility

Aria Label

Yes

Compatibility

Yes

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.

Tsunami

Distortion

Component

Media

Image

Video

Image

Upload

Fit

Distortion

Angle

Offset

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance

Width

Disturbance

Dispersion

Affected by Distortion.

Reflection

Blend

Yes

Shadow

Mask

Yes

Animation

Type

Custom

Enable

Yes

Customize the animation target value for each property.

Distortion

Angle

Offset

Width

Disturbance

Dispersion

Shadow

Transition

Instant

Ease

Spring

Accessibility

Aria Label

Yes

Compatibility

Yes

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.

Tsunami

Distortion

Component

Media

Image

Video

Image

Upload

Fit

Distortion

Angle

Offset

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance

Width

Disturbance

Dispersion

Affected by Distortion.

Reflection

Blend

Yes

Shadow

Mask

Yes

Animation

Type

Custom

Enable

Yes

Customize the animation target value for each property.

Distortion

Angle

Offset

Width

Disturbance

Dispersion

Shadow

Transition

Instant

Ease

Spring

Accessibility

Aria Label

Yes

Compatibility

Yes

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.

Tsunami

Tsunami brings a unique sense of distortion to your design. It simulates the wave-like warping of motion, making visuals feel lifted and twisted as if carried by water.

Copy on Framer Market