Skip to content

component

Live Activity Badge

By Dulaj dilshan

Details

Summary

About Live Activity Badge brings a sleek, real time presence indicator to your Framer projects.

Description

About Live Activity Badge brings a sleek, real time presence indicator to your Framer projects. Perfect for portfolios, dashboards, or "About Me" pages, it lets visitors know exactly what you’re up to whether you're currently coding, designing, or available for hire. With built-in marquee support and interactive click actions, it’s more than just a badge; it’s a living part of your site that builds trust and connection with your audience. What it does Renders a highly customizable status pill with an optional marquee effect for longer text. It features a live status indicator (choose between a dot, icon, or image) and supports dual themes with adjustable glassmorphism blur. The component also includes built in interaction logic, allowing you to link the badge to external URLs or trigger specific events within your Framer project upon clicking. What you can customize Status & Mode: Set your current activity text, toggle between Available/Busy states, and adjust the Marquee speed for scrolling text. Indicator & Visuals: Choose your indicator type (Dot, Icon, or Image), customize the Dot color, and adjust the overall size and spacing of the component. Theming & Effects: Independent background color controls for Light and Dark modes, adjustable background blur (glassmorphism), and full font customization (Inter by default). Interactions: Set the "On Click" behavior to None, Open URL, or Trigger Event to make the badge functional and interactive. Great for Personal portfolio & resume sites "Available for Hire" status indicators Dashboard headers and profile sections Personal branding on blog headers SaaS platforms showing system status or user activity Share your build If you ship something cool with it, post it on X and tag me @Dulajweb Need help? Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb

Introduction

Show real-time availability onsite

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600170228/148/228/309/79/15
  • All · #6340