Mask

Updated: May 8, 2025

The Mask component provides a customizable radial mask effect.

Mask

<Mask
  fill
  height={24}
  x={50}
  y={0}
  radius={33}>
  <Media fill src="/image.jpg" />
</Mask>

Coordinates

Use the x and y props to position the mask. The coordinates are relative to the parent element.

Coordinates

<Mask
  fill
  height={24}
  x={50}
  y={0}
  radius={33}>
  <Media fill src="/image.jpg" />
</Mask>

Radius

Use the radius prop to set the radius of the mask (defined in vh - viewport height).

Radius

<Mask
  fill
  height={24}
  x={35}
  y={40}
  radius={10}>
  <Media fill src="/image.jpg" />
</Mask>

Cursor

Use the cursor prop to enable cursor tracking reveal.

Cursor

<Mask
  fill
  height={24}
  cursor>
  <Media fill src="/image.jpg" />
</Mask>

Flex

The Mask component extends the Flex component, so you can use all the props of Flex.

Flex

Fading lines

<Mask
  fillWidth
  x={50}
  y={50}
  radius={20}
  borderBottom="neutral-medium"
/>
<Text onBackground="neutral-weak" variant="label-default-s" align="center">
  Fading lines
</Text>
<Mask
  fillWidth
  x={50}
  y={50}
  radius={20}
  borderBottom="neutral-medium"
/>

Performance

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.

API reference

Prop	Type	Default
cursor	boolean	false
x	number	—
y	number	—
radius	number	50
reducedMotion Controls motion reduction for cursor tracking. Auto detects device capability and prefers-reduced-motion.	booleanauto	auto
className	string	—
style	React.CSSProperties	—
children	React.ReactNode	—
…and every FlexProps prop	inherited	—

ComponentsLogoCloud

ComponentsMasonryGrid

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club