atmosphere particles hero ambient background ambient hero backdrops sign-in or auth pages premium launch backgrounds backgrounds need subtle motion want particles without canvas need more atmosphere on dark sections
Particle Field
Fetch snippet JSON:
curl https://webspire.de/snippets/atmosphere/particle-field.json Atmosphere
Particle Field
Floating particles keep a hero background active while remaining visually lightweight.
Background
Customize
Quick Start
<section class="particle-field rounded-[2rem] p-16 text-white"></section>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 1046 bytes · 46 lines
- Custom Properties
-
--particle-top--particle-bottom--particle-speed - Classes
-
.particle-field
atmosphere particles hero ambient background
This creates a soft particle ambience rather than explicit stars or dots. It is useful when you need texture and motion in the air without overpowering the content.