AvatarFx

Experimental Alpha

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

AvatarFx extends the core Avatar component with a handful of CSS-only micro-interaction effects.

Opt-in Component

AvatarFx 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

View Vue Code

<template>
  <div class="stacked-mobile mbe4">
    <VueAvatarFx fx="bounce" variant="info" text="AB" />
    <VueAvatarFx fx="pulse" variant="success" text="CD" />
    <VueAvatarFx fx="jelly" fx-speed="lg" fx-ease="spring-sm" variant="warning" text="EF" />
    <VueAvatarFx fx="shimmer" fx-speed="xl" variant="error" text="GH" />
    <VueAvatarFx fx="glow" variant="monochrome" text="IJ" />
    <VueAvatarFx fx="flip" fx-speed="lg" fx-ease="ease-in" variant="info" shape="rounded" text="KL" />
    <VueAvatarFx fx="ripple" variant="success" shape="square" text="MN" />
    <VueAvatarFx fx="highlight-sweep" fx-speed="lg" fx-ease="ease-out" variant="monochrome" text="OP" />
    <VueAvatarFx fx="press-pop" variant="warning" text="QR" />
  </div>
</template>

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

Live Preview

View Lit / Web Component Code

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

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

  render() {
    return html`
      <div class="stacked-mobile mbe4">
        <ag-avatar-fx fx="bounce" variant="info" text="AB"></ag-avatar-fx>
        <ag-avatar-fx fx="pulse" variant="success" text="CD"></ag-avatar-fx>
        <ag-avatar-fx fx="jelly" fx-speed="lg" fx-ease="spring-sm" variant="warning" text="EF"></ag-avatar-fx>
        <ag-avatar-fx fx="shimmer" fx-speed="xl" variant="error" text="GH"></ag-avatar-fx>
        <ag-avatar-fx fx="glow" variant="monochrome" text="IJ"></ag-avatar-fx>
        <ag-avatar-fx fx="flip" fx-speed="lg" fx-ease="ease-in" variant="info" shape="rounded" text="KL"></ag-avatar-fx>
        <ag-avatar-fx fx="ripple" variant="success" shape="square" text="MN"></ag-avatar-fx>
        <ag-avatar-fx fx="highlight-sweep" fx-speed="lg" fx-ease="ease-out" variant="monochrome" text="OP"></ag-avatar-fx>
        <ag-avatar-fx fx="press-pop" variant="warning" text="QR"></ag-avatar-fx>
      </div>
    `;
  }
}

customElements.define('avatarfx-lit-examples', AvatarFxLitExamples);

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 { ReactAvatarFx } from "agnosticui-core/avatar-fx/react";

export default function AvatarFxReactExamples() {
  return (
    <div className="stacked-mobile mbe4">
      <ReactAvatarFx fx="bounce" variant="info" text="AB" />
      <ReactAvatarFx fx="pulse" variant="success" text="CD" />
      <ReactAvatarFx fx="jelly" fxSpeed="lg" fxEase="spring-sm" variant="warning" text="EF" />
      <ReactAvatarFx fx="shimmer" fxSpeed="xl" variant="error" text="GH" />
      <ReactAvatarFx fx="glow" variant="monochrome" text="IJ" />
      <ReactAvatarFx fx="flip" fxSpeed="lg" fxEase="ease-in" variant="info" shape="rounded" text="KL" />
      <ReactAvatarFx fx="ripple" variant="success" shape="square" text="MN" />
      <ReactAvatarFx fx="highlight-sweep" fxSpeed="lg" fxEase="ease-out" variant="monochrome" text="OP" />
      <ReactAvatarFx fx="press-pop" variant="warning" text="QR" />
    </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 AvatarFx

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>
  <VueAvatarFx fx="bounce" fx-speed="md" text="AB" />
</template>

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

React

import { ReactAvatarFx } from "agnosticui-core/avatar-fx/react";

function App() {
  return <ReactAvatarFx fx="bounce" fxSpeed="md" text="AB" />;
}

Lit

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

<ag-avatar-fx fx="bounce" fx-speed="md" text="AB"></ag-avatar-fx>

Props

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