PulseBeacon

PulseBeacon

About PulseBeacon

Overview

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.

Features

  • 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

How to use

  1. Insert the component and set its width to Fill (or Fixed).

  2. Edit the Text and choose a Font.

  3. Open the Colors group to set background, pulse, border, text, and dot colors.

  4. Toggle the Dot on or off in the Dot group.

  5. Pick Single or Continuous under Pulse Animation, then fine-tune Speed and Pulse spread.

  6. Adjust Padding and Corner radius in Layout.

  7. (Optional) Add a Link to make the bar clickable.

TipFor long text on mobile, keep the width on Fill — the bar grows in height and wraps instead of overflowing.