---
title: "Bokeh Effect — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Kevin Levron · Backgrounds. bokeh effect using ThreeJS/WebGL."
canonical: "https://framer.elliotli.dev/component/bokeh-effect"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Bokeh Effect

# Bokeh Effect

[View on Framer](https://framer.com/marketplace/components/bokeh-effect/?via=elliot-li)

![Bokeh Effect preview image 1](https://framer.elliotli.dev/og/component/bokeh-effect/2a52efb4388594fa/1600x1200.jpg)

## Summary

bokeh effect using ThreeJS/WebGL.

## Description

Bokeh Effect is a beautiful and interactive bokeh effect using ThreeJS/WebGL.

Demo : [https://threejs-components-bokeh-background.framer.website/](https://threejs-components-bokeh-background.framer.website/)

This component can be easily integrated into your projects. It is lightweight and optimized for performance, ensuring smooth animation without compromising the user experience.

It is customizable to fit your design needs :

-   Background color
    
-   Colors
    
-   Opacity
    
-   Blur level
    
-   Focal length : The shorter the focal length, the stronger the bokeh effect
    
-   Focus distance : Distance between the camera and the focus point
    
-   Min scale : Minimum scale of the bokeh elements
    
-   Max scale : Maximum scale of the bokeh elements
    

Single Licence for one commercial project, includes :

-   Framer Component
    
-   Example Project Remix
    
-   Email support
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #7743

## Details

- **Author**: Kevin Levron
- **Price**: $10.00
- **Published**: 2025-10-06
- **Updated**: 2025-12-06
- **Added**: 2025-10-01
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background