Mantine Mask Component

Overview

This component is created on top of the Mantine library.

Mantine Mask wraps any React node and renders a radial or linear spotlight via CSS masking. You can drive the spotlight by the cursor (withCursorMasks) or fix it at coordinates (maskX/maskYk), tune its size (maskRadius) or maskRadiusX/Y), and control edge softness with maskFeather or the transparency start/end stops. It supports motion (animation with “lerp” easing or instant), activation modes (always, hover, pointer, focus), optional inversion (invertMask) to create hole effects, and boundary clamping with padding. It is content‑agnostic, working with images, cards, and layouts, and includes convenience props for common setups.

[!note]

→ Demo and Documentation → Youtube Video → More Mantine Components

Installation

npm install @gfazioli/mantine-mask

or

yarn add @gfazioli/mantine-mask

After installation import package styles at the root of your application:

import '@gfazioli/mantine-mask/styles.css';

Usage

import { Mask } from '@gfazioli/mantine-mask';
import { Box, Text } from '@mantine/core';

function Demo() {
  return (
    <Mask withCursorMask maskRadius={320}>
      <Box p="lg">
        <Text fw={700}>Spotlight content</Text>
        <Text c="dimmed">Move your cursor to focus this area.</Text>
      </Box>
    </Mask>
  );
}

https://github.com/user-attachments/assets/95b5b9bf-73cb-4c5b-9010-df593b053bdf