Achieving a Blur Effect with Clip-Path Cutouts

The devlog-ist/landing project focuses on creating an engaging landing page experience. A recent enhancement involved adding a blur effect around a tour target element to draw the user's attention.

The Challenge

Creating a visually appealing and performant blur effect that highlights a specific element during a tour or guide. Previous attempts using z-index elevation and stacking contexts proved problematic, leading to visual artifacts and rendering issues.

The Solution

The chosen approach utilizes a full-screen backdrop-filter blur div combined with a dynamic, evenodd polygon clip-path. This method effectively excludes the target area from the blur, creating a focused highlight. The JavaScript code dynamically computes the target bounds on each step change to ensure accurate clipping.

// Illustrative example (Go-like syntax)
func updateClipPath(targetBounds Rectangle) string {
 polygon := "polygon(evenodd, "
 polygon += fmt.Sprintf("%fpx %fpx, ", 0, 0)
 polygon += fmt.Sprintf("%fpx %fpx, ", windowWidth, 0)
 polygon += fmt.Sprintf("%fpx %fpx, ", windowWidth, windowHeight)
 polygon += fmt.Sprintf("%fpx %fpx, ", 0, windowHeight)
 polygon += fmt.Sprintf("%fpx %fpx, ", targetBounds.X, targetBounds.Y)
 polygon += fmt.Sprintf("%fpx %fpx, ", targetBounds.X+targetBounds.Width, targetBounds.Y)
 polygon += fmt.Sprintf("%fpx %fpx, ", targetBounds.X+targetBounds.Width, targetBounds.Y+targetBounds.Height)
 polygon += fmt.Sprintf("%fpx %fpx, ", targetBounds.X, targetBounds.Y+targetBounds.Height)
 polygon += ")"
 return polygon
}

The updateClipPath function constructs the clip-path value. It defines a polygon that covers the entire screen but cuts out the rectangular area specified by the targetBounds. The evenodd rule ensures that the target area is not blurred.

Benefits

• Improved visual focus on the tour target.
• Avoidance of stacking context issues that plagued previous implementations.
• Dynamic adjustment of the clip path based on target bounds changes.

Key Insight

Leveraging clip-path with the evenodd rule and a backdrop filter provides a robust and visually appealing way to highlight specific screen elements without z-index conflicts. Dynamically calculating the clip-path ensures adaptability to layout changes.