Pollen Background for React

Pollen fills the box with golden motes drifting through a soft diagonal shaft of sunlight. The shaft is a broad band of warm light with a few brighter rays inside it, strongest at the top, and it slowly brightens and dims. Inside it the motes shine; outside it they're dimmer, so it reads as pollen in a sunbeam. The field has depth: a few large out-of-focus discs float nearest the eye, 36 near motes, each a tiny glowing core, float, sway and twinkle on their own, and three far layers of fine dust rise behind them, the farthest dimmest and slowest. On a light page the shaft is warm sunlight and the motes a deep gold; at night the shaft is a pale gold glow and the motes shine. The far layers are repeating tiles and the near motes are spans placed when the page renders; CSS keyframes move them all, so no script runs.

Use it behind calm pages and body text. For bigger flakes falling with the same depth use Snow; for fewer, larger points that glow and blink, Fireflies; for points that twinkle in place, Sparkles; for large soft discs, Bokeh.

Installation

Usage

import { Pollen } from "@/components/ui/pollen";

<Pollen className="min-h-[420px]">
  <h1>Slow mornings</h1>
</Pollen>

Pollen is a container: put your content inside and the motes drift behind it. It fills the box you give it, so set its height (min-h-[420px]), or className="fixed inset-0 -z-10" to cover the whole page. It has no background of its own: your page shows through, or set one on the container.

Demos

Settling dust

A negative speed lets the motes settle downward instead of rising. Without the beam (beam={false}) the field is even; here pale motes drift over a container that stays dark in both themes (the dark class).

Inside a card

density scales the far dust per area (0.6 here), so a card and a full page look equally dusty. The 36 near motes and the out-of-focus discs always stay.

Accessibility

The motes are decoration: the whole layer is hidden from screen readers and ignores the pointer, and your content inside reads as usual. With reduced motion every mote stops where it is and the shaft stays, a still picture of pollen in light. Nothing flashes: the twinkle is a slow fade on tiny points and the shaft brightens and dims over 11 seconds.

The motes are tiny, so text on top keeps its contrast. In light mode the shaft is a pale warm tint, and foreground text over its brightest part stays above 14:1; at night it's a faint glow.

FAQ

API Reference