Clip Mask
クリップマスク
Content cut to a shape rather than a rectangle. The paths are authored in a nought-to-one space with clipPathUnits↗↗, so one definition fits any size without recomputing coordinates, and each instance gets its own id so several masks can coexist on a page. Built with Tailwind CSS.
circle
blob
arch
diamond
Installation
Copy and paste the following code into a new component file:1
"use client"
import { useId, type ReactNode } from "react"
type ClipMaskProps = {
children: ReactNode,
shape?: "circle" | "blob" | "arch" | "diamond",
size?: number,
dark?: boolean
}
How to use it2
"use client"
import { ClipMask } from "@/components/ui/clip-mask"
export default function Page() {
return (
<ClipMask shape="blob" size={200}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src="https://github.com/vercel.png" alt="Vercel" />
</ClipMask>
Props
ClipMask
| Name | Default | Description |
|---|---|---|
| children | — | ReactNode The content to clip, typically an image |
| shape | "blob" | "circle" | "blob" | "arch" | "diamond" Which path clips the content |
| size | 200 | number Width and height of the mask in pixels |
| dark | false | boolean Render the dark palette |