Pulse
A rhythmic throb from rest — heartbeats, blinks, breathing.
Pulse is a wave that only goes one way. It starts at zero, rises, and comes back to zero, over and over. That makes it the right shape for scale and opacity, where a value swinging negative would mean shrinking below the original or going transparent.
Sharpness is what makes it a heartbeat rather than a sine. Raise it and the rest between beats gets longer while the beat itself gets shorter.
When to reach for it#
- Heartbeat scale on a button or an icon.
- Blinking, flashing, and attention pulses.
- Slow breathing on a background element.
How it works#
The base is a raised cosine — a wave shifted so it touches zero at the bottom instead of crossing it. Sharpness raises that to a power, which pushes the curve down toward zero for most of the cycle and leaves a narrow spike.
The output adds to the property, so on Scale X an Amount of 0.2 means the layer grows to 120% at the peak and returns to exactly 100% between beats.
Parameters#
Beats per second. A resting human heart is about 1.1. For a UI attention pulse, 0.5 is enough — faster reads as urgent.
Peak value added at the top of the beat. On scale this is a fraction: 0.2 is a 20% grow. On opacity, 0.8 takes a layer at 20% up to full.
1 is a smooth sine-like swell. 3 gives a distinct beat with rest between. Above 5 the pulse is a brief flash, which is the right shape for a blink.
Scale X and Y together for a uniform throb. Scale Y alone for breathing. Opacity for a blink.
Recipes#
A heartbeat
- Add Pulse on Scale X, Frequency 1.2, Amount 0.16, Sharpness 3.
- Add a second Pulse on Scale Y with the same numbers.
Two drivers rather than one because each drives a single property. Matching the numbers keeps the throb uniform; detuning Scale Y slightly makes it feel like it is being squeezed.
Things that catch people out#
Pulse never goes below the resting value. If you want the layer to shrink as well as grow, use Oscillate.
See also#
Something here wrong or missing? Tell us in the community.