Announcement Badge Hero
A large pulsing announcement pill anchors the hero above one headline.
DOM + CSS2 deps1 file · 2 KB TSX
Props
"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
// ---------------------------------------------------------------
}Details
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.
