See the video for full details. The component will continue to work, so there's no need to retrofit anything, but going forward you will have an even more powerful option at your disposal.
A squircle, or superellipse, is a geometric shape that generalizes the concept of an ellipse with smoother transitions between rectangular and circular forms.
The subtly distinctive "squircle" shape feels more organic and comfortable to the eye than sharp corners or simple circular rounding. They appear more natural and less harsh than standard rounded rectangles while maintaining clear boundaries and efficient space usage. This makes them particularly valuable for creating interfaces that feel both modern and approachable.
Popularized by Apple’s iOS design, superellipses gained significance in UX/UI design due to visual psychology striking an optimal balance between the geometric precision of rectangles. The organic feel of circles provides a visually pleasing alternative to standard rounded rectangles.
Use in vector sets, buttons, card layouts, image frames, and interactive elements to provide a sophisticated, premium aesthetic that enhances UX through subtle visual refinement.
Squircle shape generator component renders a customizable squircle (superellipse) as a vector SVG shape in a fixed 1:1 ratio.
Shape Controls:
Smoothness (0-100%): Controls the roundness of the squircle. 0% creates a more rectangular shape, 100% creates a very rounded shape.
Radius (0-100px): Sets the corner radius of the squirkle shape.
Fill Controls:
Fill Type: Choose between "Solid", "Gradient", or "Radial Gradient"
Solid: Uses a single color fill - Color picker.
Gradient: Creates a linear gradient with customizable colors and angle.
Radial Gradient: Creates a radial gradient with multiple color stops.
Image: Upload or add an image fill.
Shadow Controls:
Shadow: Toggle to enable/disable drop shadow
Shadow Color: Color of the drop shadow
Shadow Blur: Blur radius of the shadow (0-50px)
Shadow X/Y: Horizontal and vertical offset of the shadow (-50 to 50px)
Stroke Controls:
Stroke: Toggle to enable/disable stroke (renders inside the shape)
Stroke Color: Color of the stroke
Stroke Width: Thickness of the stroke (0-10px)
Blur Effects:
Blur: Toggle to enable/disable blur effect on the entire shape.
Blur Amount: Intensity of the blur effect (0-20px)
Backdrop Blur: Toggle to enable/disable backdrop blur (blurs content behind the shape)
Backdrop Blur Amount: Intensity of the backdrop blur (0-10px)
Width: Set to any - will always maintain 1:1 ratio
Height: Set to any - will always maintain 1:1 ratio
Intrinsic Width: 200px - Default width when first added to canvas
Intrinsic Height: 200px - Default height when first added to canvas
Size Behavior:
The component's size is controlled by Framer's layout system:
Drag the resize handles in the canvas to change dimensions
Use the width/height inputs in the layout panel.
The SVG shape will scale proportionally to fill the component's bounds.
The shape maintains its 1:1 aspect ratio and remains centered within the component
Performance Notes:
The component uses SVG for crisp rendering at any scale.
Backdrop blur may impact performance on lower-end devices.
Complex radial gradients with many stops may affect rendering speed.
Carolyn
