---
title: "PulseBeacon — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Pavlo Zhydkykh · Sections. Animated pulse badge for your CTAs"
canonical: "https://framer.elliotli.dev/component/pulsebeacon"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/PulseBeacon

# PulseBeacon

Animated pulse badge for your CTAs

[View on Framer](https://framer.com/marketplace/components/pulsebeacon/?via=elliot-li)

![PulseBeacon preview image 1](https://framer.elliotli.dev/og/component/pulsebeacon/6b1943b4989d9070/1600x1200.jpg)

## Summary

Animated pulse badge for your CTAs

## Description

## Overview

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-1yyflysy-MBDMrsWU7PVC9gq6SMqpfaf3Cfl1yU)

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.
    

**_Tip_**_:_ For long text on mobile, keep the width on Fill — the bar grows in height and wraps instead of overflowing.

## Rank history [How rankings work →](/terms#rankings)

-   All · #7837

## Details

- **Author**: Pavlo Zhydkykh
- **Price**: $5.00
- **Published**: 2026-06-08
- **Updated**: 2026-06-07
- **Added**: 2026-06-05
- **Categories**: Sections

## More like this

-   [Velours Index](/component/velours-index) — Hamim Reza · $10 — Hover a title, reveal the film
-   [BlogSingleX Single](/component/blogsinglex-single) — Themomarket · $8 — Single Blog Details Component
-   [Slanted Cascade Cove](/component/slanted-cascade-cove) — Karim Saif · Free — Diagonal photo gallery
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews