Crack infuses a sense of fragmentation into your work. Based on a preset grid number, it creates a tension-filled glitch effect through image distortion and color separation in your images or videos. This effect is particularly suitable for expressing themes such as conflict, division, or transformation, adding profound visual metaphors and emotional resonance to your work.
The component supports images or videos as input media. It is compatible with Framer's built-in media modifiers, allowing adjustments to input media.
Scroll Animation
The component can monitor viewport status and trigger preset animations when media elements enter the visible area. The trigger threshold is customizable.
Scroll Transform
The component can dynamically adjust animation states based on page scroll progress. The animation range can be controlled through parameters.
Target Animation
The component allows defining the terminal state of animations. Once triggered, the animation will transition to and maintain this preset state.
Light/Dark Theme Media
The component can dynamically switch media resources based on the current theme (light/dark). It supports preset different media content for different themes.
Custom Transition
The component integrates Framer's transition controller. It supports customization of easing functions and spring parameters.
Image & Video
The component supports images or videos as input media. It is compatible with Framer's built-in media modifiers, allowing adjustments to input media.
Scroll Animation
The component can monitor viewport status and trigger preset animations when media elements enter the visible area. The trigger threshold is customizable.
Scroll Transform
The component can dynamically adjust animation states based on page scroll progress. The animation range can be controlled through parameters.
Target Animation
The component allows defining the terminal state of animations. Once triggered, the animation will transition to and maintain this preset state.
Light/Dark Theme Media
The component can dynamically switch media resources based on the current theme (light/dark). It supports preset different media content for different themes.
Custom Transition
The component integrates Framer's transition controller. It supports customization of easing functions and spring parameters.
Image & Video
The component supports images or videos as input media. It is compatible with Framer's built-in media modifiers, allowing adjustments to input media.
Scroll Animation
The component can monitor viewport status and trigger preset animations when media elements enter the visible area. The trigger threshold is customizable.
Scroll Transform
The component can dynamically adjust animation states based on page scroll progress. The animation range can be controlled through parameters.
Target Animation
The component allows defining the terminal state of animations. Once triggered, the animation will transition to and maintain this preset state.
Light/Dark Theme Media
The component can dynamically switch media resources based on the current theme (light/dark). It supports preset different media content for different themes.
Custom Transition
The component integrates Framer's transition controller. It supports customization of easing functions and spring parameters.
Property Specification
Segment (1 - 10)
Sets the number of grid divisions in the media. This value determines the number of cuts in both horizontal and vertical directions; higher values produce more grids.
Strength (0 - 1)
Controls the distortion intensity of the grid. Higher values cause grid units to deviate further from their original positions, enhancing the fragmented effect.
Chroma (0 - 10)
Adjusts the degree of color separation. Higher values produce more pronounced color shifts.
