---
title: "Bokeh Depth — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Lucas · Backgrounds. Defocused lights at four depths"
canonical: "https://framer.elliotli.dev/component/bokeh-depth"
---

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

# Bokeh Depth

Defocused lights at four depths

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

![Bokeh Depth preview image 1](https://framer.elliotli.dev/og/component/bokeh-depth/7e2f03212250da94/1600x1200.jpg)

## Summary

Defocused lights at four depths

## Description

Out-of-focus lights at four depths, with parallax: the near ones swing further than the far ones as the cursor moves. Each disc is actually blurred rather than faked with a gradient, and brightness falls in inverse ratio to area - a defocused point spreads the same light over a bigger disc, so the big near circles are necessarily paler. Without that rule the whole thing saturates into white mush.

Three apertures: round, straight blades, and soap bubble with a hot rim. Curved blades too, like a modern lens. Chromatic aberration lines the edge of each disc cool outside and warm inside, the way real glass does.

Focus drift slowly closes one plane into crisp points and opens it again, so the picture has two registers instead of one. Lens dust sits on top and only lights up where light passes.

Canvas, nothing loaded from outside. Honours prefers-reduced-motion and freezes on the Framer canvas.

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

-   All · #8723

## Details

- **Author**: Lucas
- **Price**: $5.00
- **Published**: 2026-08-15
- **Updated**: 2026-08-16
- **Added**: 2026-08-15
- **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