Skip to content
viberdy.dev

Announcement Badge Hero

A large pulsing announcement pill anchors the hero above one headline.

Prominimalplayful
Category
Heroes
Added
2026-09-01
Deps
2
Updated
2026-09-01

This is a viberdy Pro component

The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.

Sign inUnlock Pro
Preview
New: AI Autocomplete

Finish sentences your team would have written anyway.

See what shipped

Props

Requires framer-motion, lucide-react
"use client";

// Full-size shippable hero. The registry preview above is a scaled-down
// stand-in for this component at normal type scale.
import { ChevronRight } from "lucide-react";
import { motion } from "framer-motion";

function AnnouncementBadge({ label }: { label: string }) {
  return (
    <motion.a
      href="#"
      initial={{ opacity: 0, y: -10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
      className="flex items-center gap-2.5 rounded-full border border-blue-200 bg-blue-50 py-2.5 pl-5 pr-4 hover:bg-blue-100"
    >
      <span className="relative flex h-2 w-2">
        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-600 opacity-60" />

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}
Notes

About this heroe

Most heroes bury the announcement badge as a tiny afterthought above the real headline; this one promotes it to the lead device, giving it real padding, a pulsing dot, and its own entrance animation so the eye lands there first. That reordering is the whole idea — it fits a moment with genuine news (a launch, a release, a specific feature to point at) and falls apart on an evergreen homepage with no news to announce, where an oversized badge just looks like it's straining to manufacture urgency. Deliberately, there is no separate CTA button below the headline: the badge already carries the primary click target, and adding a second button would split attention between two competing calls to action, undermining the single-anchor idea. The pulsing dot uses Tailwind's stock `animate-ping` layered under a solid dot rather than a custom keyframe, which is the standard accessible way to build a notification pulse without hand-rolling opacity/scale timing. Caveat: rotate the badge copy the moment the announcement goes stale — a hero anchored on three-month-old news reads worse than no badge at all.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

NewPro

Rotating Seal Badge

components

A round seal — the phrase fitted exactly around the circle with drawn dot separators — that turns once every 24 seconds, eases to a stop on hover, and is the link.

badgectasvg

Badge Ping Counter

components

An icon badge counter that bounces and pings once on every increment.

badgecounternotification
Pro

Bento Preview Hero

heroes

Copy beside an asymmetric bento grid of small feature-glimpse tiles.

herobentogrid