Unfocused

Unfocused introduces a refined blur effect. By simulating lens defocus and chromatic dispersion, it adds depth and atmosphere to your visuals. With controls for blur falloff and focal origin, Unfocused creates striking motion and an immersive sense of dimensionality.

Property Controls

Blur (Number: 0 - 1000)

Blur intensity.

Angle (Number: 0 - 360)

The angle of the blur.

Falloff (Number: 0 - 1)

The rate at which the blur fades out.

Advance: Type (Enum: Linear / Quadratic / Cubic / Square)

Falloff type of the blur.

Advance: Origin X (Number: 0 - 1)

Horizontal offset for the blur origin.

Advance: Origin Y (Number: 0 - 1)

Vertical offset for the blur origin.

Advance: Distortion (Number: -1 - 1)

Distortion intensity, which bends the center of the image.

Advance: Dispersion (Number: 0 - 1)

Color dispersion intensity. Stronger near heavily blurred areas, affected by Blur.

Advance: Noise (Number: 0 - 1)

Noise intensity. Adds grain to the blurred area.

Advance: Blend (Enum: None / Darker / Lighter / Both)

Blending mode for the noise when Noise > 0.
- None: No blending.
- Darker: Blends with darker areas.
- Lighter: Blends with lighter areas.
- Both: Blends with both dark and light areas.

Distortion
Component
Media

Image

Video

Image
Upload
Fit
Blur
Angle
Fallout
Advance

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance
Type
Origin X
Origin Y
Distortion
Dispersion
Affected by Blur.
Noise
Blend
Animation
Type
Custom

Custom

Custom
Enable

Yes

No

Customize the animation target value for each property.
Blur
Angle
Fallout
Distortion
Dispersion
Noise
Transition

Instant

Ease

Spring

Accessibility
Aria Label

Yes

No

Compatibility

Yes

No

Disable effects and use regular image/video elements. e.g. use on Phone layout for better performance.
Reduce Motion

Allow

Block

Whether to allow Reduce Motion to control animation.
Renderer

Auto

Always

Control when the renderer will render.
Unfocused
Unfocused
Distortion
Component
Media

Image

Video

Image
Upload
Fit
Blur
Angle
Fallout
Advance

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance
Type
Origin X
Origin Y
Distortion
Dispersion
Affected by Blur.
Noise
Blend
Animation
Type
Custom

Custom

Custom
Enable

Yes

No

Customize the animation target value for each property.
Blur
Angle
Fallout
Distortion
Dispersion
Noise
Transition

Instant

Ease

Spring

Accessibility
Aria Label

Yes

No

Compatibility

Yes

No

Disable effects and use regular image/video elements. e.g. use on Phone layout for better performance.
Reduce Motion

Allow

Block

Whether to allow Reduce Motion to control animation.
Renderer

Auto

Always

Control when the renderer will render.
Unfocused
Unfocused
Distortion
Component
Media

Image

Video

Image
Upload
Fit
Blur
Angle
Fallout
Advance

Advance

Animation

Appear

Transition

Spring

Accessibility

Spring

Advance
Type
Origin X
Origin Y
Distortion
Dispersion
Affected by Blur.
Noise
Blend
Animation
Type
Custom

Custom

Custom
Enable

Yes

No

Customize the animation target value for each property.
Blur
Angle
Fallout
Distortion
Dispersion
Noise
Transition

Instant

Ease

Spring

Accessibility
Aria Label

Yes

No

Compatibility

Yes

No

Disable effects and use regular image/video elements. e.g. use on Phone layout for better performance.
Reduce Motion

Allow

Block

Whether to allow Reduce Motion to control animation.
Renderer

Auto

Always

Control when the renderer will render.
Unfocused
Unfocused

Unfocused

Unfocused introduces a refined blur effect. By simulating lens defocus and chromatic dispersion, it adds depth and atmosphere to your visuals. With controls for blur falloff and focal origin, Unfocused creates striking motion and an immersive sense of dimensionality.

Get Start

Learn about the properties, controls, and usages.

Troubleshooting

Check out our support page or contact us for solutions.

Reveals Cool WebGL Effects Components for Framer - Unfocused

Stay updated.

Stay updated.

Stay updated.

Subscribe to our newsletter to stay up to date and to receive important updates.

Subscribe to our newsletter to stay up to date and to receive important updates.

Subscribe to our newsletter to stay up to date and to receive important updates.

© 2025 Reveals. All rights reserved.

.framer-styles-preset-s5v84h { cursor: default !important; pointer-events: none; }