SVG Mask Effect

Text 207

About

A mask reveal effect — move the cursor to reveal hidden content beneath. Built with Framer Motion mask animations.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds SVG Mask Effect to your project and fits it to your theme.

Code

How SVG Mask Effect is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import React from "react";
import { MaskContainer } from "../components/ui/svg-mask-effect";

export default function SVGMaskEffectDemo() {
  return (
    <MaskContainer
      revealText={
        <p className="mx-auto max-w-4xl text-center text-4xl font-bold text-slate-800 dark:text-white">
          Move your cursor here to reveal the secret
        </p>
      }
    >
      <p className="text-4xl font-bold text-white dark:text-black">
        The secret is revealed ✨
      </p>
    </MaskContainer>
  );
}