Avatar List

January 30, 2025

Interactive avatar list with horizontal or vertical layout, support for custom sizes, and smooth hover animations powered by Gsap. Perfect for showcasing users or profiles

Three.js
Midulive
Svelte
Astro
Gsap

./src/components/UI/ AvatarListMain .astro

---
import { AvatarList, type AvatarItem } from "@butter-js/ui";

const example: AvatarItem[] = [
  {
    name: "Three.js",
    src: "https://pbs.twimg.com/profile_images/1510259524271173638/lgTEVmRi_400x400.jpg",
    alt: "Three.js Logo",
  },
  {
    name: "Midulive",
    src: "https://pbs.twimg.com/profile_images/1824773087323111424/-S3LUmjQ_400x400.jpg",
    alt: "Midulive Logo",
  },
  {
    name: "Svelte",
    src: "https://pbs.twimg.com/profile_images/1121395911849062400/7exmJEg4_400x400.png",
    alt: "Svelte Logo",
  },
  {
    name: "Astro",
    src: "https://pbs.twimg.com/profile_images/1632785343433908224/SnMGR19O_400x400.png",
    alt: "Astro Logo",
  },
  {
    name: "Gsap",
    src: "https://pbs.twimg.com/profile_images/1713633504431394816/h28jJ1qM_400x400.jpg",
    alt: "Gsap Logo",
  },
];
---

<AvatarList data={example} />

Features

Interactivity
Smooth animations
Easy configuration
Reusability

API Reference

Prop	Default	Type	Description
`as`	’div’	`string`	HTML element used to render each avatar (e.g. `a`, `div`)
`data`	[]	`AvatarItem[]`	List of avatars with `name`, `src`, and `alt`
`direction`	’horizontal’	`'horizontal' \| 'vertical-right' \| 'vertical-left'`	Direction of the avatars
`size`	’medium’	`'small' \| 'medium'`	Avatar size
`shape`	’circle’	`'circle' \| 'rounded'`	Avatar shape
`nameStyles`	-	`string`	Additional classes for the avatar name
`imageStyles`	-	`string`	Additional classes for the image

Usage

Type: AvatarItem[]

---
import { AvatarList, type AvatarItem } from "@butter-js/ui";

const example: AvatarItem[] = [
  {
    name: "Three.js",
    src: "https://...",
    alt: "Three.js Logo"
  },
  //...
];
---

Examples

Vertical

In this example, Tailwind classes were added, and the direction of the avatars changed to vertical

Svelte
Three.js
Astro

./src/components/UI/ AvatarListVertical .astro

---
import { AvatarList, type AvatarItem } from "@butter-js/ui";

const example: AvatarItem[] = [
  {
    name: "Svelte",
    src: "https://pbs.twimg.com/profile_images/1121395911849062400/7exmJEg4_400x400.png",
    alt: "Svelte Logo",
  },
  {
    name: "Three.js",
    src: "https://pbs.twimg.com/profile_images/1510259524271173638/lgTEVmRi_400x400.jpg",
    alt: "Three.js Logo",
  },
  {
    name: "Astro",
    src: "https://pbs.twimg.com/profile_images/1632785343433908224/SnMGR19O_400x400.png",
    alt: "Astro Logo",
  },
];
---

<AvatarList data={example} direction="vertical-right" size="medium" />

Blog

This would be an example of how it could look in a blog

Create animated avatars for stunning UI 😎

Learn how to design and animate avatars that bring life to your UI. Using GSAP, you can create dynamic hover effects, smooth scaling, and interactive transitions. These animated avatars are perfect for adding personality to your project, whether it's a website, app, or portfolio. Stand out with engaging and visually appealing animations that captivate your audience!

Gsap
FredKSchott

Created by

Gsap and FredKSchott

./src/components/UI/ AvatarListBlog .astro

---
import { AvatarList, type AvatarItem } from "@butter-js/ui";

const avatars: AvatarItem[] = [
  {
    name: "Gsap",
    src: "https://pbs.twimg.com/profile_images/1713633504431394816/h28jJ1qM_400x400.jpg",
    alt: "Gsap logo",
  },
  {
    name: "FredKSchott",
    src: "https://pbs.twimg.com/profile_images/1272979356529221632/sxvncugt_400x400.jpg",
    alt: "Heeector logo",
  },
];

let text = "";

function getNames() {
  for (let i = 0; i < avatars.length; i++) {
    if (avatars.length > 1 && i === avatars.length - 1) {
      text += ` and <span class="text-zinc-900">${avatars[i].name}</span>`;
    } else if (i > 0 && i < avatars.length - 1) {
      text += `, <span class="text-zinc-900">${avatars[i].name}</span>`;
    } else {
      text += `<span class="text-zinc-900">${avatars[i].name}</span>`;
    }
  }
}
getNames();
---

<section
  class="max-w-[95%] md:max-w-[70%] p-5 bg-zinc-100 rounded-xl dark:bg-white"
>
  <h1 class="text-zinc-800 text-xl md:text-2xl lg:text-3xl font-medium">
    Create animated avatars for stunning UI 😎
  </h1>
  <p class="py-2 lg:py-5 text-zinc-600 text-small lg:text-body">
    Learn how to design and animate <span class="text-zinc-900">avatars</span> that
    bring life to your UI. Using <span class="text-zinc-900">GSAP</span>, you
    can create <span class="text-zinc-900"
      >dynamic hover effects, smooth scaling</span
    >, and <span class="text-zinc-900">interactive transitions</span>. These
    animated avatars are perfect for adding <span class="text-zinc-900"
      >personality</span
    > to your project, whether it's a website, app, or portfolio. Stand out with
    engaging and <span class="text-zinc-900">visually appealing animations</span
    > that captivate your audience!
  </p>
  <div class="flex items-center gap-3">
    <AvatarList
      data={avatars}
      size="small"
      imageStyles="!ring-zinc-100 !shadow-none"
    />
    <div>
      <p class="text-xs text-zinc-900">Created by</p>
      <p class="text-xs text-zinc-900" set:html={text} />
    </div>
  </div>
</section>