Svg Clip Mask

Renders content masked by an SVG shape that animates. The mask can morph, scroll, or hover based on settings. Use to reveal elements with dynamic shape transitions.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/svg-clip-mask

npx layro-cli add @educlopez/svg-clip-mask

npx layro-cli add @educlopez/svg-clip-mask

bunx layro-cli add @educlopez/svg-clip-mask

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import {
  motion,
  useMotionValueEvent,
  useReducedMotion,
  useScroll,
} from "motion/react";
import {
  type ReactNode,
  type RefObject,
  useEffect,
  useId,