Burn

Burn brings a unique visual transformation to your media works. It cleverly simulates the effect of paper being burned, creating an astonishing reveal process. Viewers will see burning edges gradually spreading, unveiling the original content of the media. This effect is particularly suitable for symbolic expression, adding a distinctive visual appeal to your artwork, conveying deeper meanings such as transformation, rebirth, or the revelation of truth.

Copy Component

Component Copied

Property Controls

Burn
Component
Media

Image

Video

Image

Image

Size

Fill

Burn
Density
Edge Color

#000000

Animate

Appear

Transition

Spring

Burn
Component
Media

Image

Video

Image

Image

Size

Fill

Burn
Density
Edge Color

#000000

Animate

Appear

Transition

Spring

Burn
Component
Media

Image

Video

Image

Image

Size

Fill

Burn
Density
Edge Color

#000000

Animate

Appear

Transition

Spring

Features

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.

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

Burn (0 - 1)

Controls the progress of the burning effect. Higher values intensify the burning effect, reducing visible media content. At a value of 1, the media is completely "burned" and invisible.

Density (0 - 2)

Adjusts the density of the burn pattern. Higher values generate more burn nodes, creating a more complex burn texture.

Explore the next effector.

Scan

Scan Effect Cover.
Scan Effect Cover.
Scan Effect Cover.

Reveals cool WebGL Effects Components for Framer.