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

Burn

Burn Icon
Burn Icon
Burn Icon

Burn brings a unique visual transformation to your work. By simulating the effect of an image burning, it creates a stunning reveal. The audience will see the burning edges gradually spread, uncovering the true content of the work. Burn allows you to add color to the burning edges, creating different styles of expression. This can convey deeper meanings such as transformation, rebirth, or the revelation of truth, while also creating themes of technology, psychedelia, and mystery.

Copy Component

Property Control

Mode (Enum: Classic/Spatial)

The configuration mode for the burn effect. "Classic" mode provides a transparent image mask that can reveal the content of other layers. "Spatial" mode allows you to control the color of the mask and provides a distortion effect for the media content.

Burn (Number: 0-1)

The progress of the burn. When the value is 1, the media is completely invisible.

Density (Number: 0-2)

Burn density. Larger values generate more burn nodes.

Edge Color (Color)

The color of the burning edge. (Note: Not support modifying transparency.)

Mask Color (Color)

The color of the mask. (Note: Does not support modifying transparency.) Only available when "Mode" is "Spatial".

Invert (Boolean: Yes/No)

Inverts the display mode. When enabled, the media will disappear as it is burned. Only available when "Mode" is "Spatial".

Distortion (Number: 0-1)

The distortion intensity of the media content. Only available when "Mode" is "Spatial".

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.

Burn
Component
Media

Image

Video

Image

Image

Size

Fill

Mode

Classic

Spatial

Burn
Density
Invert

Yes

No

Edge Color

#FFFFFF

Mask Color

#000000

Distortion
Animate

Appear

Transition

Spring

Variant 1

Variant 2

Burn
Component
Media

Image

Video

Image

Image

Size

Fill

Mode

Classic

Spatial

Burn
Density
Invert

Yes

No

Edge Color

#FFFFFF

Mask Color

#000000

Distortion
Animate

Appear

Transition

Spring

Variant 1

Variant 2

Burn
Component
Media

Image

Video

Image

Image

Size

Fill

Mode

Classic

Spatial

Burn
Density
Invert

Yes

No

Edge Color

#FFFFFF

Mask Color

#000000

Distortion
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

SHVETS

Variant 1

Variant 2

Video

by

SHVETS

Reveals cool WebGL Effects Components for Framer.