Image Shape Mask React component
Masks an image into a shape (circle, squircle, arch, hexagon, flower, blob or diamond) that grows out from the centre as it scrolls into view and morphs smoothly into another shape on hover while the photo slowly zooms.
When to use the Image Shape Mask component
Use Image Shape Mask to give photos personality on team pages, testimonials, portfolios and hero sections, where a plain rectangle feels generic.
Stick to one or two shapes per page so the masks read as a style rather than noise.
Installation
Add the Image Shape Mask component to your project with the shadcn CLI. It lands in components/image-shape-mask.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add https://reactframe.com/r/image-shape-mask.jsonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<ImageShapeMask /> accepts 8 props, all optional.
| Prop | Type | Default |
|---|---|---|
| src | string | "/demo/21.webp" |
| alt | string | "Portrait" |
| shape | "circle" | "squircle" | "arch" | "hexagon" | "flower" | "blob" | "diamond" | "blob" |
| hoverShape Shape to morph into on hover and focus. | "circle" | "squircle" | "arch" | "hexagon" | "flower" | "blob" | "diamond" | "circle" |
| animateIn Grow the mask out from the centre the first time it scrolls into view. | boolean | true |
| aspectRatio Width / height, e.g. "1 / 1" or "4 / 5". | string | "1 / 1" |
| zoom Slow zoom of the image inside the mask on hover. | boolean | true |
| className | string | — |
- srcstringDefault: "/demo/21.webp"
- altstringDefault: "Portrait"
- shape"circle" | "squircle" | "arch" | "hexagon" | "flower" | "blob" | "diamond"Default: "blob"
- hoverShape
Shape to morph into on hover and focus.
"circle" | "squircle" | "arch" | "hexagon" | "flower" | "blob" | "diamond"Default: "circle" - animateIn
Grow the mask out from the centre the first time it scrolls into view.
booleanDefault: true - aspectRatio
Width / height, e.g. "1 / 1" or "4 / 5".
stringDefault: "1 / 1" - zoom
Slow zoom of the image inside the mask on hover.
booleanDefault: true - classNamestring
FAQ
- How can different shapes morph into each other?
- Every shape is generated as a polygon with the same 72 points, so the clip-path can animate point by point from any shape to any other.
- Does it work with any image?
- Yes. The image is covered and clipped to the shape; use aspectRatio to make the box taller or wider.
- Is the image still accessible?
- It's a normal img with your alt text; the shape is purely visual.
