Mask Cursor Effect

A cursor-following mask effect that reveals hidden content on hover. Creates an engaging reveal experience.

Install using CLI

npx shadcn@latest add "https://obsidianui.dev/r/mask-cursor-effect.json"

Install Manually

Install dependencies

npm install framer-motion clsx tailwind-merge

Add util file

Create a file lib/utils.ts:

import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}

Copy the source code

Copy the code into components/ui/mask-cursor-effect.tsx

Usage

1import { MaskCursorEffect } from "@/components/ui/mask-cursor-effect"
2
3export function Demo() {
4return (
5  <MaskCursorEffect
6    hiddenComponent={<h1 className="text-6xl font-bold">SECRET</h1>}
7    backgroundColor="#EA5A47"
8    expandedMaskSize={350}
9  >
10    <h1 className="text-6xl font-bold">HOVER ME</h1>
11  </MaskCursorEffect>
12)
13}

Props

Prop Name	Type	Default	Description
children	`React.ReactNode`	`-`	Visible content
hiddenComponent	`React.ReactNode`	`-`	Content revealed on hover
backgroundColor	`string`	`'#EA5A47'`	Mask background color
expandedMaskSize	`number`	`350`	Mask size on hover

Magnet Tabs Masked Avatars