Mask

The Mask community component — a cursor-follow spotlight that reveals its content through a soft gradient mask tracking the pointer. Usage, options, and live examples.

mask is a cursor-follow spotlight: it reveals its content through a soft radial or linear gradient that can track the pointer, so only the area under (or near) the cursor is fully visible while the rest fades away. Reach for it to add a “flashlight” reveal over an image, a hero, or a block of text.

A Community Component — wraps Mask by gfazioli, MIT licensed, npm @gfazioli/mantine-mask.

Use it as {% mask … %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'mask', …). The block body is the content the spotlight reveals.

Demonstrations

Static radial mask

By default the mask is a static radial spotlight centered on the content. The block body is revealed through it.

{% mask variant='radial' maskRadius='200px' %}
{% paper withBorder=true p='xl' radius='md' %}
## Spotlight
This whole panel sits behind a soft radial mask — the center is sharp and the edges fade.
{% endPaper %}
{% endMask %}

Cursor-follow spotlight

Set withCursorMask=true so the spotlight follows the pointer. easing (0-1) controls how smoothly it trails the cursor.

{% mask withCursorMask=true maskRadius='160px' easing=0.15 %}
{% paper withBorder=true p='xl' radius='md' %}
Move your cursor across this panel — the bright spotlight tracks the pointer and the rest
dims behind the mask.
{% endPaper %}
{% endMask %}

Inverted mask

invertMask=true flips the effect — the center is hidden and the surroundings are shown, like a vignette punched out of the middle.

{% mask withCursorMask=true invertMask=true maskRadius='140px' %}
{% paper withBorder=true p='xl' radius='md' %}
With the mask inverted, the area under the cursor is the part that fades out.
{% endPaper %}
{% endMask %}

Reveal on hover

activation='hover' keeps the content fully visible until the pointer enters, then engages the mask — a subtle reveal-on-hover.

{% mask activation='hover' withCursorMask=true maskRadius='180px' %}
{% paper withBorder=true p='xl' radius='md' %}
This panel is plain until you hover it — then the spotlight switches on.
{% endPaper %}
{% endMask %}

With other components

Mask wraps any content, including an Image — the spotlight then reveals the photo as the cursor moves.

{% mask withCursorMask=true maskRadius='180px' %}
{% image src='https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800' alt='Forest' zoom=false %}
{% endMask %}

Attributes

Omit any attribute to take its default. Bare flags (e.g. withCursorMask) become =True.

CSS Selector

The component mounts inside a wrapper carrying data-aardvark-island="Mask", and Mantine’s Mask exposes Styles API class names you can target:

/* The masked container */
[data-aardvark-island='Mask'] .mantine-Mask-root { }
/* The gradient mask layer itself */
[data-aardvark-island='Mask'] .mantine-Mask-mask { }

The mask geometry rides CSS variables (--mask-radius, --mask-opacity, --mask-transparency-start, --mask-transparency-end) you can also override.

Injecting Attributes

Use attr={…} to forward raw HTML attributes (data-*, ARIA, etc.) onto the rendered element — they ride a separate channel from the React props, so they never collide with a component prop.