DEV Community

Cover image for Spotlight Your UI: Introducing Mantine Mask for Elegant Focus Effects
Giovambattista Fazioli
Giovambattista Fazioli

Posted on

Spotlight Your UI: Introducing Mantine Mask for Elegant Focus Effects

#react #typescript #programming #webdev

If you’ve ever wished for a subtle way to guide attention in a UI—highlighting imagery, content blocks, or interactive regions—Mantine Mask delivers a clean, performant “spotlight” you can drop anywhere in your React app. Built to pair beautifully with the Mantine UI Library, Mantine Mask wraps any content and applies a CSS-driven radial or linear mask that can follow the cursor or stay fixed, giving you fine-grained control over size, feathering, opacity, and interaction.

Demo

At its core, Mask is a simple wrapper: place it around your content, and decide whether the spotlight should be static or cursor‑tracked. The “inside” of the mask remains visible while the “outside” fades to transparent. Flip it with invertMask, and you get a “hole” effect to reveal backgrounds or layers beneath.

You’ll start by importing styles at your app root:

import '@gfazioli/mantine-mask/styles.css';
// or layer-aware:
import '@gfazioli/mantine-mask/styles.layer.css';
Enter fullscreen mode Exit fullscreen mode

Two ways to focus: cursor or static 

  • Cursor spotlight: enable withCursorMask to have the mask follow the pointer. Tune the motion with animation and easing, from instant to lerp-like smoothing.

  • Static spotlight: fix the origin using maskX/maskY to create an anchored reveal. Ideal for hero images, headers, or guided tours.

For size, choose maskRadius for a circular spotlight or maskRadiusX/maskRadiusY for elliptical control. For edge softness, maskFeather offers a quick, intuitive knob (0 = hard edge, 100 = full fade), while maskTransparencyStart/End give you advanced control over the fade curve.

Convenience

 Radial and linear variants 

  • Radial (default): the classic circular/elliptical spotlight.

  • Linear: a band-like “scanner” that works wonders for reveal stripes, highlights, or motion-driven accents. Control thickness via maskRadius, softness via maskFeather or transparency boundaries, and orientation via maskAngle.

Inverted masks and layered reveals 

Invert the logic with invertMask to make the spotlight area transparent and keep the outside visible. This unlocks “hole” bands in linear mode and background reveals in radial mode. For consistent aesthetics across themes, set a background on Mask (e.g., Mantine’s bg prop) so the glow looks uniform in light and dark modes.

 Interaction and accessibility 

Activation determines when the mask is active: always, hover, pointer, or focus. Prefer activation=“focus” for keyboard-friendly UIs—Mask applies tabIndex by default, keeping your components accessible. Need full control? Use active and onActiveChange to manage visibility programmatically.

Keep the spotlight inside 

When using cursor mode, clampToBounds ensures the center never slips outside the container, and clampPadding adds margin from the edges. These small touches keep the experience polished and predictable.

 Works with any content 

Mask is content-agnostic: images, cards, text blocks, custom React trees—wrap it and go. It’s great for:

  • Reveal: different background on the container, shown through the spotlight for a playful discovery effect.

  • Zoom: a magnified background behind the same image, creating a lightweight loupe without complex canvas logic.

Quick examples 

  • Circular spotlight that tracks the cursor: 
<Mask withCursorMask maskRadius={360}>
  <Image ... />
</Mask>
Enter fullscreen mode Exit fullscreen mode

Elliptical highlight for wide banners:

<Mask withCursorMask maskRadiusX={420} maskRadiusY={180}>
  <Image ... />
</Mask>
Enter fullscreen mode Exit fullscreen mode

Elliptical

Static origin with hard‑edge reveal:

<Mask withCursorMask={false} maskX={25} maskY={35} maskFeather={0}>
  <Image ... />
</Mask>
Enter fullscreen mode Exit fullscreen mode

Linear + inverted “hole band”:

<Mask variant="linear" invertMask withCursorMask maskAngle={90} maskRadius={180} maskFeather={30}>
  <Image ... />
</Mask>
Enter fullscreen mode Exit fullscreen mode

Why it fits naturally in a Mantine app 

Mantine Mask embraces Mantine’s design philosophy: composable, accessible, and theme-aware. It exposes sensible defaults yet gives you low-level controls when you need precision. Combined with Mantine’s layout, typography, and theming, you can craft focused, delightful interactions without heavy custom CSS or complex animation stacks. Explore Mantine’s full component ecosystem to round out your UI: Mantine UI Library ↗.

Zoom

For more extensions that complement Mantine, including comparison sliders, reflection effects, and more, browse the curated hub: Mantine Extensions HUB ↗. It’s a great way to find production-ready building blocks that maintain consistency across your app.

Final thoughts 

Mantine Mask is a small component with outsized impact. Whether you’re guiding users through content, spotlighting important UI regions, or creating playful reveal effects, the combination of cursor awareness, radial/linear variants, inversion, and feathering lets you tune the exact mood and clarity your design calls for. Drop it in, clamp it to bounds, and watch your interface gain a subtle, professional focus.

Top comments (0)