---
title: Liquid Metal Avatar
description: An avatar with an animated liquid metal shader effect.
---

```tsx
import {
  AvatarFallback,
  AvatarImage,
  LiquidMetalAvatar,
} from '@/components/ui/liquid-metal-avatar';

export function LiquidMetalAvatarDefault() {
  return (
    <LiquidMetalAvatar>
      <AvatarImage
        src='https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80'
        alt='Avatar'
      />
      <AvatarFallback>JD</AvatarFallback>
    </LiquidMetalAvatar>
  );
}
```

## Installation

```bash
npx shadcn@latest add @fab-ui/liquid-metal-avatar
```

**Install the following dependencies:**

```bash
npm install @paper-design/shaders-react
```

**Copy and paste the following code into your project.**

```tsx
'use client';

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from '@/components/ui/avatar';
import { LiquidMetal, LiquidMetalProps } from '@paper-design/shaders-react';
import { cva, type VariantProps } from 'class-variance-authority';

import { cn } from '@/lib/utils';

const avatarVariants = cva(
  'relative flex items-center justify-center rounded-full overflow-visible bg-transparent',
  {
    variants: {
      size: {
        sm: 'size-8',
        md: 'size-12',
        lg: 'size-16',
      },
    },
    defaultVariants: { size: 'md' },
  }
);

const innerVariants = cva(
  'absolute rounded-full bg-primary-foreground inset-shadow-lg',
  {
    variants: {
      size: {
        sm: 'inset-[1px]',
        md: 'inset-[2px]',
        lg: 'inset-[3px]',
      },
    },
    defaultVariants: { size: 'md' },
  }
);

type ShaderProps = Omit<LiquidMetalProps, 'className' | 'style' | 'shape'>;

type LiquidMetalAvatarProps = React.ComponentProps<'div'> &
  Partial<ShaderProps> &
  VariantProps<typeof avatarVariants>;

function LiquidMetalAvatar({
  size,
  className,
  children,
  speed = 0.6,
  repetition = 4,
  softness = 0.5,
  shiftRed = 0.3,
  shiftBlue = 0.3,
  distortion = 0,
  contour = 0,
  angle = 45,
  scale = 8,
  offsetX = 0.1,
  offsetY = -0.1,
  ...props
}: LiquidMetalAvatarProps) {
  return (
    <div
      data-slot='liquid-metal-avatar'
      className={cn(avatarVariants({ size }), className)}
      {...props}
    >
      <LiquidMetal
        className='absolute inset-0 rounded-full'
        shape='none'
        speed={speed}
        repetition={repetition}
        softness={softness}
        shiftRed={shiftRed}
        shiftBlue={shiftBlue}
        distortion={distortion}
        contour={contour}
        angle={angle}
        scale={scale}
        offsetX={offsetX}
        offsetY={offsetY}
      />
      <Avatar
        className={cn(innerVariants({ size }), 'size-auto bg-transparent')}
      >
        {children}
      </Avatar>
    </div>
  );
}

export { LiquidMetalAvatar, AvatarImage, AvatarFallback };
```

**Update the import paths to match your project setup.**

## Usage

```tsx
import {
  LiquidMetalAvatar,
  AvatarImage,
  AvatarFallback,
} from "@/components/ui/liquid-metal-avatar"
```

```tsx
<LiquidMetalAvatar>
  <AvatarImage src="/avatar.jpg" alt="User" />
  <AvatarFallback>JD</AvatarFallback>
</LiquidMetalAvatar>
```

## Examples

### Sizes

```tsx
import {
  AvatarFallback,
  AvatarImage,
  LiquidMetalAvatar,
} from '@/components/ui/liquid-metal-avatar';

export function LiquidMetalAvatarSizes() {
  return (
    <div className='flex items-center gap-4'>
      <LiquidMetalAvatar size='sm'>
        <AvatarImage
          src='https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80'
          alt='Avatar'
        />
        <AvatarFallback>SM</AvatarFallback>
      </LiquidMetalAvatar>
      <LiquidMetalAvatar size='md'>
        <AvatarImage
          src='https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80'
          alt='Avatar'
        />
        <AvatarFallback>MD</AvatarFallback>
      </LiquidMetalAvatar>
      <LiquidMetalAvatar size='lg'>
        <AvatarImage
          src='https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80'
          alt='Avatar'
        />
        <AvatarFallback>LG</AvatarFallback>
      </LiquidMetalAvatar>
    </div>
  );
}
```

### Custom Effect

```tsx
import {
  AvatarFallback,
  AvatarImage,
  LiquidMetalAvatar,
} from '@/components/ui/liquid-metal-avatar';

export function LiquidMetalAvatarCustom() {
  return (
    <LiquidMetalAvatar
      size='lg'
      speed={0.8}
      repetition={8}
      softness={0.7}
      shiftRed={0.5}
      shiftBlue={0.1}
    >
      <AvatarImage
        src='https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80'
        alt='Avatar'
      />
      <AvatarFallback>AB</AvatarFallback>
    </LiquidMetalAvatar>
  );
}
```

### Fallback Only

```tsx
import {
  AvatarFallback,
  LiquidMetalAvatar,
} from '@/components/ui/liquid-metal-avatar';

export function LiquidMetalAvatarFallback() {
  return (
    <LiquidMetalAvatar>
      <AvatarFallback>JD</AvatarFallback>
    </LiquidMetalAvatar>
  );
}
```

## API Reference

### Props

| Prop         | Type                   | Default | Description                               |
| ------------ | ---------------------- | ------- | ----------------------------------------- |
| `children`   | `ReactNode`            | -       | Avatar content (`AvatarImage`, `AvatarFallback`). |
| `size`       | `'sm' \| 'md' \| 'lg'` | `'md'`  | The size of the avatar.                   |
| `speed`      | `number`               | `0.4`   | Animation speed of the shader effect.     |
| `repetition` | `number`               | `6`     | Number of pattern repetitions.            |
| `softness`   | `number`               | `0.5`   | Softness of the metallic highlights.      |
| `shiftRed`   | `number`               | `0.3`   | Red color shift amount.                   |
| `shiftBlue`  | `number`               | `0.3`   | Blue color shift amount.                  |
| `distortion` | `number`               | `0`     | Distortion amount applied to the pattern. |
| `contour`    | `number`               | `0`     | Contour intensity.                        |
| `angle`      | `number`               | `45`    | Angle of the shader pattern in degrees.   |
| `scale`      | `number`               | `4`     | Scale of the shader pattern.              |
| `offsetX`    | `number`               | `0.1`   | Horizontal offset of the pattern.         |
| `offsetY`    | `number`               | `-0.1`  | Vertical offset of the pattern.           |