Pulsation Bar is an animated badge that draws attention to your most important call-to-action with a smooth, looping pulse. Drop it into a hero, banner, or pricing section and edit everything visually — no code required.
Two pulse styles — Single (one wave that completes, then repeats) or Continuous (a steady stream of waves)
Optional status dot — toggle on/off, with its own color and size
Native fonts — pick any font from your Framer project
Full color control — background, pulse, border, text, and dot, all with opacity
Adjustable animation — control pulse speed and how far the glow spreads
Layout — custom padding and corner radius
Optional link — turn the bar into a clickable CTA, with open-in-new-tab support
Fully responsive — set the width to Fill and the text wraps cleanly on mobile
Insert the component and set its width to Fill (or Fixed).
Edit the Text and choose a Font.
Open the Colors group to set background, pulse, border, text, and dot colors.
Toggle the Dot on or off in the Dot group.
Pick Single or Continuous under Pulse Animation, then fine-tune Speed and Pulse spread.
Adjust Padding and Corner radius in Layout.
(Optional) Add a Link to make the bar clickable.
Tip: For long text on mobile, keep the width on Fill — the bar grows in height and wraps instead of overflowing.
Pavlo Zhydkykh
