Every option, live
Move anything in the panel and the plate changes on the next frame. The snippet below the fold is the code for what you are looking at.
liquid, unchanged - wet, torn, travelling
revealed 0%
EdgeOptions
The preset row under the plate loads its values into these sliders. Move any one of them and the snippet switches from edge="liquid" to an explicit object.
fbm frequency of the carve - higher is finer lace
how hard the noise chews the boundary
amount of the finer second octave
anti-alias width of the cut
mask value the cut happens at
rim refraction strength - 0 removes the wet bead
how tightly the refraction hugs the rim
drift speed of the noise field
how hard the banded noise punches holes through the reveal - 0 is the plain carve and nothing else
more, smaller holes as it climbs - much over 4 it turns into contour rings
0 reads the mask smoothly, 1 reads it on its own grid for a low-poly tear
Your settings, as code
import { Revealed } from "revealed/react";
export function Stage() {
return (
<Revealed
front="/demo/front.webp"
back="/demo/back.webp"
skeleton={{
src: "/demo/back-skeleton.svg",
color: "#000000",
}}
/>
);
}