Installation

npx kinetic-ui-cli@latest add svg-flashlight-mask

How It Works

The SvgFlashlightMask allows you to stack two completely different React layouts on top of one another. The top layout (the revealChildren) is completely clipped out of existence using the maskImage CSS property. By feeding the X and Y coordinates of your cursor from framer-motion into a radial-gradient mask via CSS custom variables (--x and --y), it creates a "hole" in the clipping mask, causing the top layer to peek through precisely where your mouse is pointing, acting like a flashlight in the dark.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { SvgFlashlightMask } from "@/components/creative/svg-flashlight-mask";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { SvgFlashlightMask } from "@/components/creative/svg-flashlight-mask";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <SvgFlashlightMask
        revealChildren{/* value */}
        maskSize{10}
      >
        <div>Content goes here</div>
      </SvgFlashlightMask>
    </div>
  );
}