Dissolve

Dissolve burns an object away along a thin glowing edge. A ragged front moves across the surface, everything behind it disappears, and the line where it eats into the object glows orange, like paper catching fire. Reversed, the object grows back along the same edge.

How it works

The burn follows a noise pattern fixed to the object itself, so it fits any size, never slides when the object moves, and a model made of many parts dissolves as one piece. The front can open in scattered holes or sweep in one direction: bottom to top, top to bottom, from the centre out, or left to right and right to left across the screen. Put it on a click or a hover, run it from an action or an animation, or keep it on the object so it becomes the way the object enters and leaves.

Settings

- Direction: Scattered for holes that open all over, or a sweep for a clean wipe. - Edge colour: the colour of the burning line. Orange by default; cyan or white reads as digital. - Edge width: how thick the glowing band is. - Grain: the size of the burn pattern. Higher values give a finer, more broken edge. - Duration: 1.6 seconds by default.

Use it for

A product that vanishes on click, a hero object that burns in as the page opens, a scene change inside an action. Add Bloom so the edge shines. For a slower burn with flying ash, see Ember ash.