← All particles
Bokeh Float
Soft out-of-focus circles rising slowly, blurred and dimmed by depth.
ambientwarmelegantdreamy26 particles · light · canvas-2d · automatic · looping
Variant
The canvas in this preview is the file shown here. The surrounding demo shell only provides context and is not part of the copied code.
269 lines · react only
import { useEffect, useRef } from "react";
/**
* Vibary · Bokeh Float
*
* Soft out-of-focus circles rising through the frame. One number does
* all the work: each circle's depth sets its size, the softness of its
* rim, its brightness and its speed at once. Near circles are large,About this effect
A defocused background for a promo panel, a hero, or an upgrade screen — light that has atmosphere without a photograph. The reason it reads as depth rather than as assorted dots is that one value per circle drives four things at once: size, rim softness, brightness and rise speed. Near circles are large, soft, dim and quick; far ones are small, crisper, brighter and slow. Each disc is a cached sprite with a bright rim, so the frame stays cheap even though every circle is a gradient.
Upgrade panelHero backgroundOnboarding screenMusic player backdrop