Glare Masks

Glare masks let you constrain the animated highlight to specific shapes, such as; foil borders, emboss lines, or gradients. It is possible to pair masks with glareMaskMode and glareMaskComposite to emulate multi-layer trading-card finishes!

Applying a glare mask

The steps to apply a glare mask are as follows;

1. Export or create monochrome PNG/SVG assets representing the regions where the glare should appear.
2. Reference those assets in the glareMask prop.
3. Tune glareMaskMode (match-source, luminance, or alpha) so the browser interprets the mask correctly.

CORS matters

Remote mask URLs must allow cross-origin image usage. Host masks in the same site (e.g., /img/mask.png) or ensure the CDN sends permissive CORS headers, otherwise the mask will silently fail.

Basic Example

Mask Example

The card above demonstrates a basic example of applying a PNG mask to the glare effect.

Code

Svelte

<HoverTilt class="foil-card" glareMask="url(/public/aztec-pattern.webp)" glareMaskMode="luminance">
  Your content here
</HoverTilt>

Web Component

<hover-tilt class="foil-card" glare-mask="url(/public/aztec-pattern.webp)" glare-mask-mode="luminance">
  Your content here
</hover-tilt>

Important

When using a black & white PNG mask, the glareMaskMode should be set to luminance.

Different Options

CSS Alpha Repeating Gradient

Utilizing a CSS repeating-radial-gradient() as a mask, and applying glareMaskMode='alpha'.

Any css gradient can be used in this manner. You could also use a black & white gradient with glareMaskMode="luminance".

<!-- Svelte -->
<HoverTilt
  class="mask-card"
  glareMask="repeating-radial-gradient(circle at 30% 30%, #fff, #fff 12px, #fff0 12px, #fff0 24px)"
  glareMaskMode="alpha"
>
  Your content here
</HoverTilt>

<!-- Web Component -->
<hover-tilt
  class="mask-card"
  glare-mask="repeating-radial-gradient(circle at 30% 30%, #fff, #fff 12px, #fff0 12px, #fff0 24px)"
  glare-mask-mode="alpha"
>
  Your content here
</hover-tilt>

Black & White WEBP

Using a black & white WEBP sourced from a local folder, with glareMaskMode="luminance".

Any image format would work here (webp, png, jpg, gif, etc.), and transparent images could be used with glareMaskMode="alpha".

<!-- Svelte -->
<HoverTilt class="mask-card" glareMask="url(/public/aztec-pattern.webp)" glareMaskMode="luminance">
  Your content here
</HoverTilt>

<!-- Web Component -->
<hover-tilt class="mask-card" glare-mask="url(/public/aztec-pattern.webp)" glare-mask-mode="luminance">
  Your content here
</hover-tilt>

Transparent SVG

Using a transparent SVG sourced from a local folder, with glareMaskMode="alpha".

Just like the locally sourced PNG, except the SVG has a transparent background and so we use glareMaskMode="alpha".

<!-- Svelte -->
<HoverTilt class="mask-card" glareMask="url(/public/circuit-board.svg)" glareMaskMode="alpha">
  Your content here
</HoverTilt>

<!-- Web Component -->
<hover-tilt class="mask-card" glare-mask="url(/public/circuit-board.svg)" glare-mask-mode="alpha">
  Your content here
</hover-tilt>

SVG url(#id)

Using an SVG mask definition referenced by ID, with glareMaskMode="alpha".

Here we first define the mask in an inline SVG definition, and then reference it using url(#mask). See MDN’s guide on SVG masks for more information.

<!-- SVG Inline Definition -->
<svg width="0" height="0" aria-hidden="true" focusable="false">
  <defs>
    <pattern id="pattern" patternUnits="userSpaceOnUse" width="24" height="24">
      <rect x="0" y="0" width="24" height="24" />
      <polygon fill="white" fill-rule="evenodd" points="8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4" />
    </pattern>
    <mask id="mask">
      <rect x="0" y="0" width="500" height="500" fill="url(#pattern)"></rect>
    </mask>
  </defs>
</svg>

<!-- Svelte -->
<HoverTilt class="mask-card" glareMask="url(#mask)" glareMaskMode="alpha"> Your content here </HoverTilt>

<!-- Web Component -->
<hover-tilt class="mask-card" glare-mask="url(#mask)" glare-mask-mode="alpha"> Your content here </hover-tilt>