Crack

Crack introduces a fractured aesthetic. Based on grid segmentation, it produces random folds and dispersion effects that transition from chaotic to harmonious, creating a dynamic and unusual visual experience.

Copy on Framer Market

View on Sandbox

Property Controls

Segment (Number: 1-100)

The number of segments. The media will be cut the specified number of times horizontally and vertically to create a grid.

Strength (Number: 0-1)

Distortion strength. Larger values will make the grid or content deviate further from its original position.

Dispersion (Number: 0-1)

Color separation strength. Larger values will create a more pronounced color separation effect.

Advance: Type (Enum: Classic/Modern)

The configuration mode for the crack effect. In Pleats mode, the image segments will be displaced to create wrinkles. In Grid mode, the segments will be fixed in their original positions, while the content within them will be offset.

Advance: Fade In (Boolean: Yes/No)

Appearance effect. When enabled, the image will have a fade-in animation.

Distortion

Component

Media

Image

Video

Image

Upload

Fit

Segment

Strength

Dispersion

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance

Type

Pleats

Grid

Fade In

Yes

Animation

Type

Custom

Enable

Yes

Customize the animation target value for each property.

Segment

Strength

Dispersion

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.

Crack

Distortion

Component

Media

Image

Video

Image

Upload

Fit

Segment

Strength

Dispersion

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance

Type

Pleats

Grid

Fade In

Yes

Animation

Type

Custom

Enable

Yes

Customize the animation target value for each property.

Segment

Strength

Dispersion

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.

Crack

Distortion

Component

Media

Image

Video

Image

Upload

Fit

Segment

Strength

Dispersion

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance

Type

Pleats

Grid

Fade In

Yes

Animation

Type

Custom

Enable

Yes

Customize the animation target value for each property.

Segment

Strength

Dispersion

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.

Crack

Copy on Framer Market

Get Start

Learn about the properties, controls, and usages.

Check it out

Troubleshooting

Check out our support page or contact us for solutions.

Support

Error

Scan

Reveals Cool WebGL Effects Components for Framer - Crack

Stay updated.

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

Home

Support

About

Source Code

Effects

CMS

Source Code

Source Code

Source Code