The ProgressiveBlur component is a customizable blur effect implemented in Framer. It creates a visually appealing blur effect with progressive intensity, providing a smooth transition from sharp to blurred regions. This component is particularly useful for creating dynamic and aesthetically pleasing UI elements, such as overlays, modals, or background effects.

  1. Customizable Blur Intensity: The blur effect intensity can be adjusted using the "Blur" property control. Users can specify the level of blur from 0 (no blur) to 100 (maximum blur), allowing for fine-tuning based on design requirements.
  2. Directional Blur: Users can choose the direction of the blur effect from four options: top, bottom, left, or right. This feature enables the creation of directional blur effects that align with the layout and design of the UI elements.
  3. Corner Radius Control: The component offers flexibility in setting corner radius values. Users can choose to apply a uniform corner radius to all corners or specify individual corner radius values for more intricate designs. This ensures compatibility with various design styles and layouts.
  4. Smooth Transition: The progressive blur effect is achieved through the creation of multiple layers, each with a slightly different blur intensity. By adjusting the blur intensity across these layers, the component creates a seamless transition from sharp to blurred regions, enhancing visual appeal and user experience.
  5. Performance Optimization: Despite the complex visual effect, the component is optimized for performance. Users can incorporate the ProgressiveBlur component into their Framer projects without sacrificing performance, ensuring smooth interactions and responsive designs.
Price: Free

Documentation/Instructions

Click on "Copy Component" and paste it into your Framer project.

  1. Drag and drop the ProgressiveBlur component onto your Framer canvas.
  2. Customize the blur intensity, direction, and corner radius using the property controls in the Framer properties panel.
  3. Preview the blur effect in real-time within the Framer design environment.
  4. Incorporate the ProgressiveBlur component into your Framer prototypes or projects to add depth and visual interest to your UI designs.
Made by FramerXplore :)