Animated Badge

Renders an animated badge with a color, text, and optional link. It animates on scroll and includes a glowing effect. Use it to highlight important information or calls to action.

byMudunuri bhaskara karthikeya varma from Eldoraui

Installation

terminal

pnpm dlx layro-cli add @karthikmudunuri/animated-badge

npx layro-cli add @karthikmudunuri/animated-badge

npx layro-cli add @karthikmudunuri/animated-badge

bunx layro-cli add @karthikmudunuri/animated-badge

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import Link from "next/link"
import { ChevronRight } from "lucide-react"
import { motion } from "motion/react"

type AnimatedBadgeProps = {
  text?: string
  color?: string // hex or css color value
  href?: string // optional redirect link
}

function hexToRgba(hexColor: string, alpha: number): string {
  const hex = hexColor.replace("#", "")