The widget library for WordPress is here Download plugin

Circular Portals - Shape Morphing Gallery

Add a touch of geometric elegance to your site with the Circular Portals Gallery. This widget moves away from standard rectangular thumbnails, presenting your images initially as a row of perfect circles. It is an excellent choice for showcasing team members, product details, or feature highlights where a soft, modern aesthetic is desired.

The defining feature of this widget is the Shape-Morphing Animation. Upon hovering, the active circle fluidly expands horizontally and transforms its border radius, morphing into a wide, rounded rectangle (or "pill" shape). This expansion reveals more of the image content that was previously clipped, creating a "portal" effect that invites the user to look closer. The transition is governed by a custom cubic-bezier curve, ensuring the morph feels liquid and premium.

Key Features:

  • Shape-Morphing Transition: Smoothly animates from a perfect circle to a rounded rectangle on hover.
  • Fluid Width Expansion: The active item takes up more horizontal space, compressing siblings to focus attention.
  • Geometric Aesthetic: Breaks the monotony of square grids with soft curves and circular masking.
  • Zoom Reveal: Images slightly scale down as the container expands, creating a sense of widening perspective.
  • Focus State: Inactive items dim and shrink slightly, ensuring the user's focus remains on the active "portal."
  • Touch-Friendly Mobile View: Adapts to smaller circles on mobile, maintaining the playful morphing interaction on tap.

 

How to use this widget

  • Change your content and adjust the styles to match your design
  • Click export and copy the code
  • Paste it on your web page by adding a code/html block in your website builder (e.g., Squarespace, WordPress, Webflow, Wix) and paste the code.

👋 P.S. Have questions? Leave a comment.