Image Clip Path: Premium Interactions Component by Bryn Taylor

Make your images more interesting, add a custom shape clip path with a few clicks. The mask is 100% vector too, so it will always be crisp and high quality.

Add a custom vector clip path to your images.

Define any image — even from the CMS — to follow your cursor when you hover over an area.

The component is super customisable. Choose from 9 presets, and customise each to your liking: you can change the number of sides, depth of cuts, border radius, rotation and more.

This component is perfect to add more personality to your images.

Key features

Fully customisable to suit your design
Choose from 9 pre-defined templates: Polygon, chamfered, smooth corners, zigzag, and 4× rough cutout options
Rotate all clip paths to get the perfect angle
Style responsively as you would any other Framer element
Free updates for life

What you can customise

Image: Choose any image, even connect dynamically to a CMS field
Alt text: Add alt text to your image for accessibility and SEO best practices
Sides: Create a custom polygon with 3–12 sides
Cut: Define how deep the cut shapes are
Inset: Define the edges to be inset by a custom amount to get star-type shapes
Rotation: Rotate all clip paths in 45º increments, but not limited to
Teeth: Choose how many teeth the zigzag has