TagFx

Experimental Alpha

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

TagFx extends the core Tag component with a handful of CSS-only micro-interaction effects.

Opt-in Component

TagFx 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">
    <VueTagFx fx="bounce" variant="success">Bounce</VueTagFx>
    <VueTagFx fx="pulse" variant="info">Pulse</VueTagFx>
    <VueTagFx fx="jelly" fx-speed="lg" fx-ease="spring-sm" variant="primary">Jelly</VueTagFx>
    <VueTagFx fx="shimmer" fx-speed="xl" variant="warning">Shimmer</VueTagFx>
    <VueTagFx fx="glow" variant="error">Glow</VueTagFx>
    <VueTagFx fx="flip" fx-speed="lg" fx-ease="ease-in" variant="success">Flip</VueTagFx>
    <VueTagFx fx="ripple" variant="info">Ripple</VueTagFx>
    <VueTagFx fx="highlight-sweep" fx-speed="lg" fx-ease="ease-out" variant="monochrome">Sweep</VueTagFx>
    <VueTagFx fx="press-pop" variant="primary">Press Pop</VueTagFx>
  </div>
</template>

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

Live Preview

View Lit / Web Component Code

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

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

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

customElements.define('tagfx-lit-examples', TagFxLitExamples);

Interactive Preview: To see this example in action, select Open in CodePen (NPM package approach) or Open in StackBlitz (CLI local components) to launch an interactive playground.

View React Code

import { ReactTagFx } from "agnosticui-core/tag-fx/react";

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

Open in CodePenOpen 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 TagFx

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>
  <VueTagFx fx="bounce" fx-speed="md"> Tag Text </VueTagFx>
</template>

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

React

import { ReactTagFx } from "agnosticui-core/tag-fx/react";

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

Lit

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

<ag-tag-fx fx="bounce" fx-speed="md"> Tag Text </ag-tag-fx>

Props

Inherits all Tag 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