← Back to gallery
CSSFeatured

Pulse / Heartbeat / Breathing

A CSS keyframe showcase that maps single pulse, double-beat heartbeat, and slow breathing loops with scale-and-opacity timing stops.

Duration
4s
Resolution
1440×900
Format
CSS
pulseheartbeatbreathingkeyframes

Pulse / heartbeat / breathing

Pulse keyframe rhythms

Reimplements scale-and-opacity loops from scratch so a single keyframe foundation can branch into balanced pulse, double-beat heartbeat, and slow breathing motion.

pulse rhythm active — balanced single beat

Even 0 / 50 / 100 rhythm

Pulse

Pulse keeps the scale centered so badges, indicators, and focus dots can loop without feeling frantic.

1.4s ease-in-out

  • single beat
  • scale + opacity
  • status badge

Asymmetric double-beat rhythm

Heartbeat

Heartbeat compresses two fast peaks into the front half of the timeline before a longer recovery phase resets the motion.

1.15s cubic-bezier(0.22, 1, 0.36, 1)

  • double beat
  • alert state
  • front-loaded timing

Extended inhale / exhale rhythm

Breathing

Breathing stretches the timeline with longer inhale and exhale holds so larger surfaces feel ambient instead of attention-seeking.

3.6s ease-in-out

  • ambient loop
  • hero surface
  • slow hold