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 为你的作品注入凌乱感。它能够根据预设的网格分段,生成随机的图像褶皱与颜色分离效果。观众将看到画面分段从凌乱到和谐的变化过程。这种效果特别适合用于表现紧张、冲突、分裂等主题,为你的作品增添额外的情感。

Copy Component

属性控制

Mode (Enum: Classic/Modern)

破碎效果的配置方式。Classic 模式下画面分段将会位移而出现褶皱。Modern模式下分段则会固定在原始位置,而内容进行偏移。

Segment (Number: 1-100)

分段数,将媒体在水平与垂直方向上被切割指定的次数以产生网格。

Strength (Number: 0-10)

扭曲强度,越大的数值会让网格或内容更偏离原本的位置。

Chroma (Number: 0-10)

颜色分离强度,越大的值会产生越明显的颜色分离效果。

Animate: Fade In (Boolean: Yes/No)

出现效果,启用后画面将带有淡入动画。

将组件作为巢内组件时,可以使用以下属性。

Animation Start (EventHandler: onAnimationStart)

当动画开始时触发事件。

Animation End (EventHandler: onAnimationEnd)

当动画结束时触发事件。

Video End (EventHandler: onVideoEnd)

当视频播放结束时触发事件,当 Loop 为 Yes 时,这个事件不会被触发。

Media Loaded (EventHandler: onMediaload)

当媒体载入完成时触发事件。

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

特性

随心使用你的图片或视频

使用滚动动画来触发效果

使用滚动变换创建交互式体验

使用滚动变换创建交互式体验。

跟随颜色主题切换媒体

兼容 Framer 的过渡控制器

在任意进度停止动画

下一个

Variant 1

Variant 2

Video

by

Kelly

Variant 1

Variant 2

Video

by

Kelly

Reveals cool WebGL Effects Components for Framer.