Ember Burn
An interactive image transition component. Simulates a burning ember hole using complex SVG displacement maps and color matrices. The burn originates exactly from the mouse entry coordinates.
Last Modified:Aug 17, 2026
Install
CLI
ember-burn
Or install a specific demo variant:
ember-burn-demo
Manual
1. Install Dependencies
Dependencies
2. Add Source Code
Props
| Prop | Type | Default | Description |
|---|---|---|---|
imageUrl | string | Required | The URL of the image to burn away. |
children | React.ReactNode | Required | The content to reveal underneath the image. |
duration | number | 2.5 | Duration of the burn animation. |
maxDisplacement | number | 400 | The maximum displacement scale of the turbulence. Higher = more jagged edges. |
ease | string | "power2.inOut" | GSAP easing string. |