Liquid Metal Avatar
An avatar with an animated liquid metal shader effect.
JD
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
Usage
import {
LiquidMetalAvatar,
AvatarImage,
AvatarFallback,
} from "@/components/ui/liquid-metal-avatar"<LiquidMetalAvatar>
<AvatarImage src="/avatar.jpg" alt="User" />
<AvatarFallback>JD</AvatarFallback>
</LiquidMetalAvatar>Examples
Sizes
SM
MD
LG
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
AB
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
JD
import {
AvatarFallback,
LiquidMetalAvatar,
} from '@/components/ui/liquid-metal-avatar';
export function LiquidMetalAvatarFallback() {
return (
<LiquidMetalAvatar>
<AvatarFallback>JD</AvatarFallback>
</LiquidMetalAvatar>
);
}