Animated Circle Indicator

A customizable animated circle to indicate statuses, notifications, or activity with smooth motion animations.

14 built-in animationsMultiple sizes and tonesFully customizable
Basic
Features

Status Indication

Perfect for online, away, or busy statuses.

Notification Dot

Use it to alert users about new messages or updates.

Activity Pulse

Indicate ongoing processes or live activity.

Attention Grabber

Subtle animations to draw user focus naturally.

Installation
Works with npm, pnpm, yarn, and bun

$npx libravelui@latest add animated-circle-indicator

Anatomy
import { AnimatedCircleIndicator } from "@/components/ui/motion/animated-circle-indicator";<AnimatedCircleIndicatorsize="md"tone="primary"animation="pulseTransparent"/>
User Statuses
Notification Badge
Task Activity
Props

Loading types…

Edit on GitHub

Typewriting Text

An animated typing effect component for displaying text with a smooth, typewriter-like motion.

Animated Dock

An interactive, Apple-style dock with smooth motion physics and dynamic icon scaling. Responsive, intuitive, and built for precision.