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.