Burn

Burn adds a dramatic masking effect. By simulating the organic spread of burning edges, it gradually reveals the content beneath. Perfect for transitions or reveals, Burn injects mystery and intensity into your work.

Copy on Framer Market

View on Sandbox

Property Controls

Burn (Number: 0-1)

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

Density (Number: 0-1)

Burn density. Larger values generate more burn nodes.

Distortion (Number: 0-1)

The distortion intensity of the media content.

Edge Color (Color)

The color of the burning edge. (Note: Does not support transparency.)

Mask Color (Color)

The color of the mask. (Note: Does not support modifying transparency.)

Transparent (Boolean: Yes/No)

Apply a transparent mask.

Hardness (Number: 0-1)

The sharpness of the burn edge.

Dispersion (Number: 0-1)

A subtle dispersion effect appears at the burn edge.

Invert (Boolean: Yes/No)

Inverts the display mode. When enabled, the media will disappear as it is burned.

Distortion

Component

Media

Image

Video

Image

Upload

Fit

Burn

Density

Distortion

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance

Edge Color

000000

Mask Color

FFFFFF

Transparent

Yes

Hardness

Dispersion

Invert

Yes

Animation

Type

Custom

Enable

Yes

Customize the animation target value for each property.

Burn

Density

Distortion

Edge Color

000000

Mask Color

FFFFFF

Hardness

Dispersion

Transition

Instant

Ease

Spring

Accessibility

Aria Label

Yes

Compatibility

Yes

Disable effects and use regular image/video elements. e.g. use on Phone layout for better performance.

Reduce Motion

Allow

Block

Whether to allow Reduce Motion to control animation.

Renderer

Auto

Always

Control when the renderer will render.

Burn

Distortion

Component

Media

Image

Video

Image

Upload

Fit

Burn

Density

Distortion

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance

Edge Color

000000

Mask Color

FFFFFF

Transparent

Yes

Hardness

Dispersion

Invert

Yes

Animation

Type

Custom

Enable

Yes

Customize the animation target value for each property.

Burn

Density

Distortion

Edge Color

000000

Mask Color

FFFFFF

Hardness

Dispersion

Transition

Instant

Ease

Spring

Accessibility

Aria Label

Yes

Compatibility

Yes

Disable effects and use regular image/video elements. e.g. use on Phone layout for better performance.

Reduce Motion

Allow

Block

Whether to allow Reduce Motion to control animation.

Renderer

Auto

Always

Control when the renderer will render.

Burn

Distortion

Component

Media

Image

Video

Image

Upload

Fit

Burn

Density

Distortion

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance

Edge Color

000000

Mask Color

FFFFFF

Transparent

Yes

Hardness

Dispersion

Invert

Yes

Animation

Type

Custom

Enable

Yes

Customize the animation target value for each property.

Burn

Density

Distortion

Edge Color

000000

Mask Color

FFFFFF

Hardness

Dispersion

Transition

Instant

Ease

Spring

Accessibility

Aria Label

Yes

Compatibility

Yes

Disable effects and use regular image/video elements. e.g. use on Phone layout for better performance.

Reduce Motion

Allow

Block

Whether to allow Reduce Motion to control animation.

Renderer

Auto

Always

Control when the renderer will render.

Burn

Copy on Framer Market

Get Start

Learn about the properties, controls, and usages.

Check it out

Troubleshooting

Check out our support page or contact us for solutions.

Support

Retro

Error

Reveals Cool WebGL Effects Components for Framer - Burn

Stay updated.

Subscribe to our newsletter to stay up to date and to receive important updates.

Home

Support

About

Source Code

Effects

CMS

Source Code

Source Code