The Mask component provides a customizable radial mask effect.
Use the x and y props to position the mask. The coordinates are relative to the parent element.
Use the radius prop to set the radius of the mask (defined in vh - viewport height).
Use the feather prop to set how much of the radius the edge fades over, from 0 (a sharp circle) to 100 (a soft fade from the centre, the default).
Use the cursor prop to enable cursor tracking reveal.
The Mask component extends the Flex component, so you can use all the props of Flex.
When cursor is enabled, Mask automatically detects low-end devices and the prefers-reduced-motion system setting. When either is detected, cursor tracking is disabled and the mask remains at its initial position. The cursor effect also pauses when the element is outside the viewport. You can override this with the reducedMotion prop.
See useReducedMotion for details.
