Изображение обрезано SVG-контуром с чуть неровными, будто вырезанными ножницами краями, поэтому обычная фотография выглядит как вклеенная в коллаж. Поверх снимка лежит лёгкое затемнение, а по центру можно разместить любую надпись.
При наведении фото внутри маски медленно приближается, а сама рамка остаётся на месте. Маска масштабируется вместе с блоком и сохраняет форму на любом размере.
Скопируйте эти файлы в components/clip-path-mask/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { ClipPathMask } from "@/components/clip-path-mask/clip-path-mask";
export function Cover() {
return (
<ClipPathMask imgSrc="/photos/city.webp" hoverScale={1.15}>
<h2 className="text-4xl font-semibold text-white">Город</h2>
</ClipPathMask>
);
}imgSrcАдрес изображения
Тип string
children?Содержимое по центру поверх фото
Тип ReactNode
hoverScale?Приближение при наведении, по умолчанию 1.1
Тип number
duration?Длительность приближения в миллисекундах, по умолчанию 400
Тип number
overlayOpacity?Затемнение фото от 0 до 1, по умолчанию 0.15
Тип number
className?Классы рамки
Тип string