Avatar New · experimental

Preview Code

TMALGH

Press replay to watch them settle again.

<GoopAvatar class="size-10">
  <GoopAvatarImage src="/tim.png" alt="Tim McMasters" />
  <GoopAvatarFallback>TM</GoopAvatarFallback>
</GoopAvatar>

Customize

Reset

Preset subtleplayfulwild

Speed 1.00×

Settle 1.00×

GoopAvatar, GoopAvatarImage, and GoopAvatarFallback wrap reka-ui's AvatarRoot, AvatarImage, and AvatarFallback, like shadcn-vue's Avatar. Image loading, delayMs, and the fallback swap all come from reka-ui.

Installation#

Install @goopui/nuxt or @goopui/vue as shown on the Button page. The Nuxt module auto-imports all three.

Usage#

<script setup lang="ts">
// Nuxt auto-imports these. In plain Vue, import them:
import { GoopAvatar, GoopAvatarFallback, GoopAvatarImage } from '@goopui/vue'
</script>

<template>
  <GoopAvatar>
    <GoopAvatarImage src="/me.png" alt="Tim McMasters" />
    <GoopAvatarFallback>TM</GoopAvatarFallback>
  </GoopAvatar>
</template>

What it does#

• settle. reka-ui renders the image only once it has loaded. When it appears (and when the fallback appears), it scales in from about 80%, overshoots by a few percent with a slight squash, rebounds, and settles. It plays once per appearance.

It's a single CSS animation on a transform, with no script. While the settle is on, the avatar lets the overshoot show past its circle, and the image rounds its own corners.

Turn it off with :settle="false", or scale the overshoot with a number.

Props#

GoopAvatarImage takes reka-ui's src, referrerPolicy, and crossOrigin, and emits loadingStatusChange. GoopAvatarFallback takes delayMs, as, and asChild. Both take class.

Accessibility#

Give the image an alt. Under reduced motion the avatar appears at once, without the settle. See Accessibility & reduced motion.