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.

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>
  );
}

Sponsor

Your support helps me:

• Keep the project actively maintained with timely bug fixes and security updates
• Add new features, improve performance, and refine the developer experience
• Expand test coverage and documentation for smoother adoption
• Ensure long‑term sustainability without relying on ad hoc free time
• Prioritize community requests and roadmap items that matter most

Open source thrives when those who benefit can give back—even a small monthly contribution makes a real difference. Sponsorships help cover maintenance time, infrastructure, and the countless invisible tasks that keep a project healthy.

Your help truly matters.

💚 Become a sponsor today and help me keep this project reliable, up‑to‑date, and growing for everyone.