✨ Preview Link: Demo Here

Add cinematic motion blur to your images for a premium, motion-graphics feel. Automatically adjust blur based on movement (including scroll), or apply a fully customizable static blur.

Auto Motion Detection Blur adapts intelligently to movement.

Cinematic Blur Effect Create smooth, high-quality motion trails that feel fluid.

Full Creative Control Fine-tune blur intensity, smoothing, samples, and scale to match your style.

Real-Time Performance The Auto blur uses WebGL for fast, responsive rendering—even with complex effects. In the case of Static blur, it uses 2d canvas context instead to avoid exhausting the number of WebGL contexts.

The "Auto" blur uses WebGL for the blur effect, WebGL is very performant and great for effects like this one, but if you run many elements with a WebGL context (this is truth not just for this component), in some devices, canvases using it could start to crash and stop displaying its content. My personal recommendation is that you use at most 4-6 per page, and this number can vary depending on how many other WebGL components you are using.

This ones doesn't have the same limitations, they rely on 2d canvas context and you can use much more of these.

If you run multiple Auto blur instances with large sample values, in some devices may not perform as fast as you would like. For better performance use a value between 10-18 samples in auto blur instances and limit the amount of components per page.

Feel free to reach me out for any help support@schemetastic.com

Due to the nature of digital products, refunds are not offered.

If experience any problem, please reach me out for support.

This is a component generated with AI using Framer Workshop, depending on where you live, ownership related to AI generated content may vary. For any content that could belong to the author of this product, the author grants a non-exclusive right to copy, modify, distribute, publicly perform and display the component for personal or commercial projects.

In any case, the usage you make of this component with Framer, should comply with Framer Terms of service.

No Waiver: nothing in this license shall indicate that the author is waving or transferring any right to any consumer of the product.

Applicability: This license doesn't cover third party content unless otherwise noted, this license will apply to the maximum extent allowed by applicable law.

Preamble: I take my components seriously and strive to deliver high-quality products. However, I cannot guarantee that this component will be completely error-free. Like most software, it may contain bugs, inaccuracies, or unexpected issues. Additionally, no system on the internet is completely secure. This product may rely on third-party services, libraries, or content which, like much of the software ecosystem, could become compromised or unavailable at some point.

No Warranty & Limitation of Liability:This component is provided “AS IS”, without warranty of any kind, express or implied, including but not limited to warranties of merchantability, fitness for a particular purpose, and non-infringement. In no event shall the author(s), whether current or previous, be liable for any claim, damages, losses, or other liability, whether in an action of contract, tort, or otherwise, arising from, out of, or in connection with the component or the use of the component.

Unless otherwise noted, no person or entity sponsors, endorses, or is officially affiliated with the author or this component. The author(s) do not guarantee that the component, its dependencies, or this disclaimer will always be accurate, error-free, secure, virus-free, or up to date.

AI Disclaimer: If the component has been generated or assisted by AI tools, some code, content, or behavior may contain inaccuracies or unintended issues that are not working as the author or user expects.