Dissolve

About Dissolve

It does not fade. It comes apart. One moving edge masks your content away while a canvas field of grains carries the difference off the screen — particles, dust, noise, digital lines or a soft fall — in six directions, including out from wherever the cursor is. No thousands of DOM elements, no WebGL, a grain budget that halves itself on phones, and a plain fade for anyone who asked for less motion.

Features

• Five dissolve materials from one moving edge.

• Six directions, including from the cursor and a seeded random order.

• Softness from a hard wipe to a gradient the width of the panel.

• Grains drawn only where the edge is actually passing.

• Hover, click, automatic or manual triggers, with optional reverse.

• Density, Particle Size, Noise Scale, Colour and Glow on sliders.

• Grain budget that halves itself on phones.

• Reduced motion replaces the whole effect with an honest fade.

• One rAF loop that exists only while it is dissolving.

• One standalone React + TypeScript file.

• 24 controls in the Framer properties panel

• Respects prefers-reduced-motion

• Renders correctly on the Framer canvas and in export

Created by LUNAUT Studio.