Floating Particles Drift

About this animation

Glowing dots that rise and fade, each with its own size, position and animation delay set through nth-child.

How it works

Eight dots are positioned along the bottom using a left percentage from a custom property. Each has its own size, duration and delay variable. The shared keyframe moves it upward while fading in and out. Negative delays mean the animation is already in progress when the page loads, so the scene looks alive immediately.

Ways to customise it

• Change the dot colour and glow in the .pt i rule.
• Add more dots with new nth-child lines and variables.
• Raise the translateY distance for taller travel.

Good to know

Pure decoration, and users who prefer reduced motion see static dots. Transforms and opacity are cheap to animate, so it stays smooth on most devices.

Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.