Ambient · soft lights
Bokeh Clock
Drifting circles of out-of-focus colour, like city lights through a camera lens. Warm, abstract and slow enough to sit behind anything.
—
Press F for full screen. Motion pauses automatically if your system asks for reduced motion.
Bokeh
The Look of Light That Is Out of Focus
It Is a Japanese Word
Bokeh comes from boke, meaning blur or haze. Photographers use it for the character of the out-of-focus areas of an image rather than simply the amount of blur — good bokeh is smooth and round, poor bokeh is busy or edged.
Why the Circles
Any point of light outside the plane of focus is projected as a disc rather than a point, and the disc takes the shape of the lens aperture. Round blades give circles; a five-bladed aperture gives pentagons, which is why some photographs have oddly angular highlights.
Depth Without Objects
Because the circles vary in size and blur, the eye reads them as being at different distances. There is nothing in the scene at all, and it still feels like it has depth.
Nothing to Identify
That abstraction is why it works as a background. There are no objects to recognise and no motion to track, so it settles into the periphery almost immediately.
Under the hood
How This Scene Is Built
Up to thirty circles drift and swell on independent cycles, each with its own colour, size, blur radius and opacity. The blur is applied per element, so the layering reads as genuine depth of field rather than a flat pattern.
It suits a room where you want something warm on screen but nothing recognisable — receptions, bars, and behind a projector during a break.
Answers
Bokeh Background Questions
What does bokeh mean?
It comes from the Japanese boke, meaning blur. Photographers use it specifically for the quality of out-of-focus areas, not just how blurred they are.
Why are out-of-focus lights round?
A point of light that is not in focus is projected as a disc shaped like the lens aperture. Rounded aperture blades give circles; straight blades give polygons, which is why some photographs show hexagonal highlights.
Is this good for working alongside?
Yes, it is one of the better ones. Everything drifts over six to sixteen seconds, and there are no shapes to recognise or track.
Does the blur cost performance?
CSS blur is GPU-accelerated on modern browsers and the circle count halves on small screens. On a very old machine, pausing the motion removes almost all of the cost.
Can I pick the colours?
Not on this page — the palette is fixed at six hues assigned randomly. For a specific colour, the night light has a full picker.