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

Error

Error Icon
Error Icon
Error Icon

Error brings the aesthetics of the digital age to your work. By simulating the state of electronic display devices malfunctioning, it creates a strong sense of fracture and dissonance. The audience will see the misalignment of the image content and color shifting effects. Error is suitable for expressing themes of uncertainty, fragility, or chaos, making your work visually more impactful.

Copy Component

Property Control

Block Size (Number: 0-1)

The size of the offset blocks. Smaller values will generate more offset blocks.

Block Shift (Number: 0-1)

The intensity of the offset blocks. Larger values will make the blocks more likely to shift.

Color Size (Number: 0-1)

The size of the color blocks. Larger values will create a more pronounced color separation effect.

Color Shift (Number: 0-1)

The offset intensity of the color blocks. Larger values will make the color blocks more likely to shift.

Frequency (Number: 0-1)

The frequency of appearance of offset blocks and color blocks. Larger values will cause the offset blocks and color blocks to appear more often.

Animate: Fade In (Boolean: Yes/No)

Appearance effect. When enabled, the image will start completely invisible and will be accompanied by hidden areas during the 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.

Error
Component
Media

Image

Video

Image

Image

Size

Fill

Block Size
Block Shift
Color Size
Color Shift
Frequency
Animate

Appear

Transition

Spring

Variant 1

Variant 2

Error
Component
Media

Image

Video

Image

Image

Size

Fill

Block Size
Block Shift
Color Size
Color Shift
Frequency
Animate

Appear

Transition

Spring

Variant 1

Variant 2

Error
Component
Media

Image

Video

Image

Image

Size

Fill

Block Size
Block Shift
Color Size
Color Shift
Frequency
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

Cottonbro

Variant 1

Variant 2

Video

by

Cottonbro

Reveals cool WebGL Effects Components for Framer.