BadgeFx

Experimental Alpha

This library is a work-in-progress. We are releasing it early to gather feedback, but it is not ready for production.

BadgeFx extends the core Badge component with a handful of CSS-only micro-interaction effects.

Opt-in Component

BadgeFx adds a few hundred lines of CSS for animation effects. It's ideal for marketing sites, landing pages, or when visual polish is a priority.

Examples

Vue

Lit

React

Live Preview

BouncePulseJellyShimmerGlowFlipRippleSweepPress Pop

View Vue Code

<template>
  <div class="stacked-mobile mbe4">
      <VueBadgeFx fx="bounce" variant="success">Bounce</VueBadgeFx>
      <VueBadgeFx fx="pulse" variant="info">Pulse</VueBadgeFx>
      <VueBadgeFx fx="jelly" fx-speed="lg" fx-ease="spring-sm" variant="monochrome">Jelly</VueBadgeFx>
      <VueBadgeFx fx="shimmer" fx-speed="xl" variant="danger">Shimmer</VueBadgeFx>
      <VueBadgeFx fx="glow" variant="primary">Glow</VueBadgeFx>
      <VueBadgeFx fx="flip" fx-speed="lg" fx-ease="ease-in" variant="success">Flip</VueBadgeFx>
      <VueBadgeFx fx="ripple" variant="info">Ripple</VueBadgeFx>
      <VueBadgeFx fx="highlight-sweep" fx-speed="lg" fx-ease="ease-out" variant="monochrome">Sweep</VueBadgeFx>
      <VueBadgeFx fx="press-pop" variant="default" interactive>Press Pop</VueBadgeFx>
  </div>
</template>

<script setup>
import { VueBadgeFx } from "agnosticui-core/badge-fx/vue";
</script>

<style scoped>

</style>

Live Preview

View Lit / Web Component Code

import { LitElement, html } from 'lit';
import 'agnosticui-core/badge-fx';

export class BadgeFxLitExamples extends LitElement {
  // Render in light DOM to access global utility classes
  createRenderRoot() {
    return this;
  }

  render() {
    return html`
      <div class="stacked-mobile mbe4">
        <ag-badge-fx fx="bounce" variant="success">Bounce</ag-badge-fx>
        <ag-badge-fx fx="pulse" variant="info">Pulse</ag-badge-fx>
        <ag-badge-fx fx="jelly" fx-speed="lg" fx-ease="spring-sm" variant="monochrome">Jelly</ag-badge-fx>
        <ag-badge-fx fx="shimmer" fx-speed="xl" variant="danger">Shimmer</ag-badge-fx>
        <ag-badge-fx fx="glow" variant="primary">Glow</ag-badge-fx>
        <ag-badge-fx fx="flip" fx-speed="lg" fx-ease="ease-in" variant="success">Flip</ag-badge-fx>
        <ag-badge-fx fx="ripple" variant="info">Ripple</ag-badge-fx>
        <ag-badge-fx fx="highlight-sweep" fx-speed="lg" fx-ease="ease-out" variant="monochrome">Sweep</ag-badge-fx>
        <ag-badge-fx fx="press-pop" variant="default" interactive>Press Pop</ag-badge-fx>
      </div>
    `;
  }
}

customElements.define('badgefx-lit-examples', BadgeFxLitExamples);

Interactive Preview: Click the "Open in StackBlitz" button below to see this example running live in an interactive playground.

View React Code

import { ReactBadgeFx } from "agnosticui-core/badge-fx/react";

export default function BadgeFxReactExamples() {
  return (
    <div className="stacked-mobile mbe4">
      <ReactBadgeFx fx="bounce" variant="success">Bounce</ReactBadgeFx>
      <ReactBadgeFx fx="pulse" variant="info">Pulse</ReactBadgeFx>
      <ReactBadgeFx fx="jelly" fxSpeed="lg" fxEase="spring-sm" variant="monochrome">Jelly</ReactBadgeFx>
      <ReactBadgeFx fx="shimmer" fxSpeed="xl" variant="danger">Shimmer</ReactBadgeFx>
      <ReactBadgeFx fx="glow" variant="primary">Glow</ReactBadgeFx>
      <ReactBadgeFx fx="flip" fxSpeed="lg" fxEase="ease-in" variant="success">Flip</ReactBadgeFx>
      <ReactBadgeFx fx="ripple" variant="info">Ripple</ReactBadgeFx>
      <ReactBadgeFx fx="highlight-sweep" fxSpeed="lg" fxEase="ease-out" variant="monochrome">Sweep</ReactBadgeFx>
      <ReactBadgeFx fx="press-pop" variant="default" interactive>Press Pop</ReactBadgeFx>
    </div>
  );
}

Open in StackBlitz

Usage

TIP

The framework examples below import AgnosticUI as an npm package. Alternatively, you can use the CLI for complete control, AI/LLM visibility, and full code ownership:

npx ag init --framework FRAMEWORK # react, vue, lit, svelte, etc.
npx ag add BadgeFx

The CLI copies source code directly into your project, giving you full visibility and control. After running npx ag add, you'll receive exact import instructions.

Vue

<template>
  <VueBadgeFx fx="bounce" fx-speed="md"> Badge Text </VueBadgeFx>
</template>

<script setup>
import { VueBadgeFx } from "agnosticui-core/badge-fx/vue";
</script>

React

import { ReactBadgeFx } from "agnosticui-core/badge-fx/react";

function App() {
  return (
    <ReactBadgeFx fx="bounce" fxSpeed="md">
      Badge Text
    </ReactBadgeFx>
  );
}

Lit

<script type="module">
  import "agnosticui-core/badge-fx";
</script>

<ag-badge-fx fx="bounce" fx-speed="md"> Badge Text </ag-badge-fx>

Props

Inherits all Badge Props plus:

Prop	Type	Default	Description
fx	string	undefined	Effect name: bounce, pulse, jelly, shimmer, glow, flip, ripple, highlight-sweep, press-pop, slide-in
fxSpeed	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Animation duration preset
fxEase	'ease' | 'bounce' | 'spring-sm' | ...	'ease'	Easing function preset
fxDisabled	boolean	false	Disable effects programmatically

Effects Library

FX Name	Trigger	Description
bounce	hover	Vertical pop, light spring
pulse	hover	Scale grow/shrink animation
jelly	hover	Squash/stretch elastic wobble
shimmer	hover	Light sweep across surface
glow	hover	Box-shadow pulse effect
flip	hover	Y-axis rotation (3D flip)
ripple	hover	Center-origin radial expansion
highlight-sweep	hover	Horizontal highlight sweep
press-pop	active	Quick press down/up
slide-in	mount	Entrance animation from below