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.
About the Image Shape Mask component
Image Shape Mask clips a photo into a shape: circle, squircle, arch, hexagon, flower, blob or diamond. On hover it morphs smoothly into a second shape and the photo zooms in slightly, and the first time it scrolls into view the shape grows out from the center. Every shape is built from the same 72 points, which is what lets any shape morph into any other.
src and alt set the image, shape the resting shape (blob by default) and hoverShape the one it morphs into (circle by default). aspectRatio sets the box proportions, such as "1 / 1" or "4 / 5", and the image covers the box inside the mask. animateIn turns the grow-in on or off and zoom the hover zoom. Under reduced motion the shape is shown straight away and the morph and zoom are skipped.
When to use it
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 @reactframe/image-shape-maskOr 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
npm dependencies
Installed for you by the shadcn CLI.
Image Shape Mask 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.
- Why is my image missing?
- Always pass src. The default points to a demo image on this site (/demo/21.webp), which does not exist in your project.
