Shape Blur Effect for Framer

Effortlessly introduce a captivating “blur lens” to highlight shapes and create playful interactions in your Framer projects. Shape Blur offers multiple shape variations and tracks the cursor with a subtle, on‐hover lens. Customize everything from stroke vs. fill styling to smooth corners, turning your shapes into gently blurred focal points.

Try out the demo

Key Features

• Multiple Shape Variations
  Choose from rounded rectangles, circles, squares—each rendered with crisp, scalable detail.

• Hover “Lens” Interaction
  A dynamic circle follows the mouse, “revealing” or “blurring” parts of the shape underneath. Easily control lens size and edge softness for a subtle or bold effect.

• Fill or Stroke Mode
  Switch your shape to fill (solid color) or stroke (outlined) with just a toggle. Adjust border thickness, color, and more to match your brand.

• Rounded Corners & Custom Sizing
  Seamlessly blend shape edges by tweaking roundness. Go from a sharp-cornered polygon to a fully circular shape at max roundness. Scale the entire shape up or down to fit your layout exactly.

• Smooth, Responsive Cursor Tracking
  The lens glides smoothly behind the mouse, creating a fluid, polished feel that enhances user engagement.

• Mobile-Friendly Options
  Disable or adapt the blur effect on smaller screens, ensuring designs remain lightweight and consistent on all devices.

Why Shape Blur?

• Playful User Interactions
  Encourage exploration by blending shapes with a lens that gently reveals or conceals shape details on hover.

• Eye-Catching Designs
  Draw immediate attention to critical elements in your interface with an immersive blur that stands out from standard static shapes.

• Intuitive Setup
  Just drag, drop, and connect the component to any frame in Framer. All shape and lens properties are easily adjustable via property controls.

A Personal Note
Thank you for choosing Shape Blur! I’m excited to see how you’ll bring your Framer designs to life with this dreamy lens effect. If you have any questions or feedback, I’m always here to help:

Email: [email protected]
More Creations: harshworks.framer.website