Attention pulse

← All motion patterns

Attention pulse

Subscription

A ring that expands out of one element and fades, twice every four seconds.

A pseudo-element inherits the host's border radius and scales from 1 to 1.5 while its opacity falls to zero, so the ring appears to leave the element rather than being drawn around it. The whole cycle is transform and opacity only, which keeps it off the paint path entirely. It is pointer-events-none so it never intercepts the click it is advertising, and it inherits border-radius rather than assuming one, so it fits a pill and a square equally. Reserve it for exactly one element per view — the effect is a pointer, and two pointers point nowhere.

This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.

See plans