Components
Svg Mask
Svg Mask
Interactive SVG mask effect that reveals hidden content on hover with smooth transitions.
UI Studio delivers exceptional design systems and component libraries for modern web applications with cutting-edge animations.
Discover the power of UI Studio v4 with native components and modern design patterns with advanced animations.
Installation
1
Install the packages
npm i motion clsx tailwind-merge2
Add util file
lib/util.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
3
Copy and paste the following code into your project
svg-mask.tsx
"use client";
import React, { useState } from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";
export function SvgMask() {
const [isRevealed, setIsRevealed] = useState(false);
return (
<div className="flex h-[40rem] w-full items-center justify-center overflow-hidden">
<div
className="relative h-[40rem] w-full rounded-md border border-red-200 dark:border-red-800 cursor-pointer"
onMouseEnter={() => setIsRevealed(true)}
onMouseLeave={() => setIsRevealed(false)}
>
{/* Hidden revealed text */}
<div className={cn(
"absolute inset-0 flex items-center justify-center p-8 transition-opacity duration-500",
isRevealed ? "opacity-100" : "opacity-0"
)}>
<p className="mx-auto max-w-4xl text-center text-4xl font-bold text-red-600 dark:text-red-400">
UI Studio delivers exceptional design systems and component libraries for modern web applications with cutting-edge animations.
</p>
</div>
{/* Mask overlay */}
<div className={cn(
"absolute inset-0 flex items-center justify-center p-8 transition-opacity duration-500",
isRevealed ? "opacity-0" : "opacity-100"
)}>
<div className="mx-auto max-w-4xl text-center text-4xl font-bold text-white dark:text-black">
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.2 }}
>
Discover the power of{" "}
</motion.span>
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.4 }}
className="text-red-500"
>
UI Studio v4
</motion.span>
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.6 }}
>
{" "}with native components and modern design patterns with{" "}
</motion.span>
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.8 }}
className="text-red-500"
>
advanced animations
</motion.span>
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 1.0 }}
>
.
</motion.span>
</div>
</div>
{/* Background with gradient */}
<div className="absolute inset-0 bg-gradient-to-br from-red-50 to-red-100 dark:from-red-950 to-red-900 -z-10"></div>
{/* SVG mask effect */}
<motion.div
animate={{
background: isRevealed
? "radial-gradient(circle at center, transparent 100px, rgba(239, 68, 68, 0.3) 100px)"
: "radial-gradient(circle at center, transparent 0px, rgba(239, 68, 68, 0.3) 0px)"
}}
transition={{ duration: 0.5 }}
className="absolute inset-0"
/>
</div>
</div>
);
}
export default SvgMask;"use client";
import React, { useState } from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";
export function SvgMask() {
const [isRevealed, setIsRevealed] = useState(false);
return (
<div className="flex h-[40rem] w-full items-center justify-center overflow-hidden">
<div
className="relative h-[40rem] w-full rounded-md border border-red-200 dark:border-red-800 cursor-pointer"
onMouseEnter={() => setIsRevealed(true)}
onMouseLeave={() => setIsRevealed(false)}
>
{/* Hidden revealed text */}
<div className={cn(
"absolute inset-0 flex items-center justify-center p-8 transition-opacity duration-500",
isRevealed ? "opacity-100" : "opacity-0"
)}>
<p className="mx-auto max-w-4xl text-center text-4xl font-bold text-red-600 dark:text-red-400">
UI Studio delivers exceptional design systems and component libraries for modern web applications with cutting-edge animations.
</p>
</div>
{/* Mask overlay */}
<div className={cn(
"absolute inset-0 flex items-center justify-center p-8 transition-opacity duration-500",
isRevealed ? "opacity-0" : "opacity-100"
)}>
<div className="mx-auto max-w-4xl text-center text-4xl font-bold text-white dark:text-black">
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.2 }}
>
Discover the power of{" "}
</motion.span>
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.4 }}
className="text-red-500"
>
UI Studio v4
</motion.span>
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.6 }}
>
{" "}with native components and modern design patterns with{" "}
</motion.span>
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.8 }}
className="text-red-500"
>
advanced animations
</motion.span>
<motion.span
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 1.0 }}
>
.
</motion.span>
</div>
</div>
{/* Background with gradient */}
<div className="absolute inset-0 bg-gradient-to-br from-red-50 to-red-100 dark:from-red-950 to-red-900 -z-10"></div>
{/* SVG mask effect */}
<motion.div
animate={{
background: isRevealed
? "radial-gradient(circle at center, transparent 100px, rgba(239, 68, 68, 0.3) 100px)"
: "radial-gradient(circle at center, transparent 0px, rgba(239, 68, 68, 0.3) 0px)"
}}
transition={{ duration: 0.5 }}
className="absolute inset-0"
/>
</div>
</div>
);
}
export default SvgMask;4
Update the import paths to match your project setup
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | Additional CSS classes for the mask container. |