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

Crack

Crack Icon
Crack Icon
Crack Icon

Crack injects a sense of chaos and disorder into your work. It can generate random image wrinkles and color separation effects based on a preset grid segmentation. The audience will see the image segments transition from a messy to a harmonious state. This effect is especially suitable for expressing themes of tension, conflict, and division, adding extra emotion to your work.

Copy Component

Property Control

Mode (Enum: Classic/Modern)

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

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-10)

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

Chroma (Number: 0-10)

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

Animate: Fade In (Boolean: Yes/No)

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

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.

Crack
Component
Media

Image

Video

Image

Image

Size

Fill

Mode

Classic

Modern

Segment
Strgenth
Chroma
Animate

Appear

Transition

Spring

Variant 1

Variant 2

Crack
Component
Media

Image

Video

Image

Image

Size

Fill

Mode

Classic

Modern

Segment
Strgenth
Chroma
Animate

Appear

Transition

Spring

Variant 1

Variant 2

Crack
Component
Media

Image

Video

Image

Image

Size

Fill

Mode

Classic

Modern

Segment
Strgenth
Chroma
Animate

Appear

Transition

Spring

Variant 1

Variant 2

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

Video

by

Kelly

Variant 1

Variant 2

Video

by

Kelly

Reveals cool WebGL Effects Components for Framer.