Haze Edge

Apple-style depth blur: eight blur layers stacked on a smooth curve, so a photo or a page edge goes softly out of focus. Vibrancy keeps colour rich in the blur, and Glow Bleed lets the blurred colour spill past the photo edge like a soft light.

Give it an image to blur that photo's own edge, or leave the image empty and lay it over anything to blur what sits behind it. Set the layer to fixed at the top or bottom of the page in Framer for an edge blur that content scrolls under.

Controls

• Image: Optional photo.

• Priority: Load the image first.

• Direction: Edge with the strongest blur.

• Max Blur: Blur at the strongest edge, in pixels.

• Fade Range: How much of the component the blur covers, measured from the strong edge.

• Layers: Number of blur steps.

• Curve: How the blur builds: Linear, Smooth (Apple-like) or Strong (stays sharp longer, then drops away).

• Vibrancy: Colour saturation inside the blur.

• Fade Color: Colour the blur fades into.

• Fade Opacity: How much fade colour shows at the strong edge.

• Grain: Fine grain over the blur for a frosted look.

• Glow Bleed: How far the blurred colour spills past the photo edge, in pixels.

• Phone Blur: Blur on phones as a share of Max Blur.

• Phone Layers: Blur steps on phones.

• Radius: Corner radius of the photo.

Phones, dark mode, Arabic

Phones use fewer layers (Phone Layers) and less blur (Phone Blur) to save battery. Nothing moves, so reduced motion changes nothing. Colour controls take your tokens, so dark mode follows the theme, and it works on Arabic right-to-left pages.

What you get

After checkout: the component link to paste onto your Framer canvas, plus an editable Framer project with a demo page.

All ten in one project for $49: Motion Kit

All sales are final, no refunds.