Animated badges
Five motion badges: a shimmer, a bounce, a flip, a slide and a wobble. Each is sized and token-driven.
Installation
The styled layer is free and installs like any other ai2 component.
Run the following command
npx shadcn@latest add @ai2/badges-animatedDependencies, the @ai2/tokens theme and the component file are installed together.
Install dependencies
npm install motionCopy the source
components/ui/badges-animated.tsx"use client"
import * as React from "react"
import { motion, useReducedMotion } from "motion/react"
import { cn } from "@/lib/utils"
/* Animated badge family: 5 badges built on motion. Colour comes ONLY from tokens, the size is aligned with the base badge scale (+xl). framer-motion (motion/react) is used in every badge; every continuous and hover motion stops under reduced-motion. The sheens derive from primary-foreground so they are visible in both themes. */
export type StyledSize = "sm" | "md" | "lg" | "xl"
const box: Record<StyledSize, string> = {
sm: "h-5 gap-1 rounded-md px-1.5 text-xs",
md: "h-6 gap-1.5 rounded-md px-2 text-xs",
lg: "h-7 gap-1.5 rounded-lg px-2.5 text-sm",
xl: "h-8 gap-2 rounded-lg px-3 text-sm",
}
const base =
"relative inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap font-medium [&_svg]:size-3 [&_svg]:shrink-0 [&_i]:text-xs [&_i]:leading-none"
type Props = React.ComponentProps<"span"> & { size?: StyledSize }
/* Shimmer: uzerinden surekli gecen token isik supurmesi. */
export function ShimmerBadge({ className, size = "md", children, ...props }: Props) {
const reduce = useReducedMotion()
return (
<span
data-slot="styled-badge"
className={cn(base, box[size], "overflow-hidden bg-primary text-primary-foreground", className)}
{...props}
>
{!reduce && (
<motion.span
aria-hidden="true"
className="pointer-events-none absolute inset-y-0 -left-1/2 w-1/3 -skew-x-12 bg-primary-foreground/25 blur-sm"
animate={{ left: ["-50%", "150%"] }}
transition={{ duration: 2, ease: "easeInOut", repeat: Infinity, repeatDelay: 0.8 }}
/>
)}
<span className="relative">{children}</span>
</span>
)
}
/* Bounce: dongude yumusakca zipar. */
export function BounceBadge({ className, size = "md", children, ...props }: Props) {
const reduce = useReducedMotion()
return (
<motion.span
data-slot="styled-badge"
className={cn(base, box[size], "border border-border bg-secondary text-secondary-foreground", className)}
animate={reduce ? undefined : { y: [0, -3, 0] }}
transition={reduce ? undefined : { duration: 1.2, ease: "easeInOut", repeat: Infinity }}
>
{children as React.ReactNode}
</motion.span>
)
}
/* Flip: rotates on the Y axis on hover. */
export function FlipBadge({ className, size = "md", children, ...props }: Props) {
const reduce = useReducedMotion()
const [on, setOn] = React.useState(false)
return (
<span
className="inline-flex [perspective:400px]"
onMouseEnter={() => setOn(true)}
onMouseLeave={() => setOn(false)}
>
<motion.span
data-slot="styled-badge"
className={cn(base, box[size], "border border-border bg-secondary text-secondary-foreground [transform-style:preserve-3d]", className)}
animate={reduce ? undefined : { rotateY: on ? 360 : 0 }}
transition={{ duration: 0.6, ease: "easeInOut" }}
{...(props as React.ComponentProps<typeof motion.span>)}
>
{children as React.ReactNode}
</motion.span>
</span>
)
}
/* Slide: the label slides on hover and a second label appears from beneath. */
export function SlideBadge({
className,
size = "md",
children,
alt,
...props
}: Props & { alt?: React.ReactNode }) {
const reduce = useReducedMotion()
const [on, setOn] = React.useState(false)
const active = !reduce && on
return (
<span
data-slot="styled-badge"
className={cn(base, box[size], "overflow-hidden border border-border bg-secondary text-secondary-foreground", className)}
{...props}
onMouseEnter={(e) => {
setOn(true)
props.onMouseEnter?.(e)
}}
onMouseLeave={(e) => {
setOn(false)
props.onMouseLeave?.(e)
}}
>
<span className="relative inline-flex items-center">
<motion.span className="inline-flex items-center" animate={{ y: active ? "-130%" : "0%" }} transition={{ duration: 0.3, ease: "easeOut" }}>
{children}
</motion.span>
<motion.span
aria-hidden="true"
className="absolute inset-0 inline-flex items-center justify-center"
animate={{ y: active ? "0%" : "130%" }}
transition={{ duration: 0.3, ease: "easeOut" }}
>
{alt ?? children}
</motion.span>
</span>
</span>
)
}
/* Wobble: wobbles on hover. */
export function WobbleBadge({ className, size = "md", children, ...props }: Props) {
const reduce = useReducedMotion()
const [on, setOn] = React.useState(false)
return (
<motion.span
data-slot="styled-badge"
className={cn(base, box[size], "border border-border bg-secondary text-secondary-foreground", className)}
animate={!reduce && on ? { rotate: [0, -6, 5, -3, 0] } : { rotate: 0 }}
transition={{ duration: 0.5, ease: "easeInOut" }}
{...(props as React.ComponentProps<typeof motion.span>)}
onMouseEnter={() => setOn(true)}
onMouseLeave={() => setOn(false)}
>
{children as React.ReactNode}
</motion.span>
)
}Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.
Variations
5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.
Shimmer
A token sheen sweeps across.
import { ShimmerBadge } from "@/components/ui/badges-animated"
<ShimmerBadge>New</ShimmerBadge>Bounce
Bounces gently to draw the eye.
import { BounceBadge } from "@/components/ui/badges-animated"
<BounceBadge>Hot</BounceBadge>Flip
Flips on hover.
import { FlipBadge } from "@/components/ui/badges-animated"
<FlipBadge>Flip</FlipBadge>Slide
The label slides to reveal a second label.
import { SlideBadge } from "@/components/ui/badges-animated"
<SlideBadge>Live</SlideBadge>Wobble
Wobbles on hover.
import { WobbleBadge } from "@/components/ui/badges-animated"
<WobbleBadge>Beta</WobbleBadge>ai2 Animated badges: 5 styled variations on the token system
The ai2 Animated badges are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around badges with motion. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.
Motion runs on framer-motion: framer-motion drives the sheen, bounce, flip, slide and wobble. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the animations stop and the badges stay still.
What is in the ai2 Animated badges?
5 exports in one file: Shimmer, Bounce, Flip, Slide and Wobble. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.
You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.
Why use it
- On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
- Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
- Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.
Features
- Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
- framer-motion: framer-motion drives the sheen, bounce, flip, slide and wobble.
- Reduced-motion aware: Under prefers-reduced-motion, the animations stop and the badges stay still.
- Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.
Production tips
- Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
- Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
- Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.
Works with the rest of ai2
The Animated badges sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.