Cursor Mask

This is a Next.js-based web page whose main feature is a dynamic mask effect that follows the user's mouse, revealing a highlighted message. The project uses React, SCSS modules, and a custom mouse position hook.

How It Works

• The main page displays two text blocks.
• The top block is masked: only the area under the mask (which follows the mouse) is visible in a highlighted color.
• When the user hovers over the masked text, the mask (circle pointer on the page) grows larger, revealing more of the text.
• The mask effect is achieved using CSS mask-image and dynamic inline styles for mask position and size, animated with the motion library.
• The mouse position is tracked using a custom React hook.

Inspirations & References

• Olivier Larose's mask cursor effect
• Inspired by Minh Pham's Portfolio Hero Section
• Similar to SVG mask effect by Aceternity UI