The <GradientAvatar> component renders a deterministic, soft mesh-gradient avatar from any seed.
<script setup>
import { GradientAvatar } from '@maxnth/gestalt'
</script>
<template>
<GradientAvatar seed="[email protected]" :size="96" />
</template>
| Prop | Type | Default | Description |
|---|---|---|---|
seed | string | number | — | Any value; each unique seed yields a unique avatar. |
size | number | 32 | Rendered size in pixels. |
radius | number | string | "9999px" | Corner radius. Number is pixels; string is CSS. |
ring | boolean | number | string | false | Optional outline. true = white 2px ring. |
variant | "mesh" | "bloom" | "flare" | "silk" | "nova" | "void" | "jade" | "auto" | "mesh" | Gradient composition. auto picks a stable family from the seed. |
mode | "smooth" | "dither" | "smooth" | Smooth gradient or palette-quantized square-pixel treatment. |
style | object | — | Extra inline styles merged onto the wrapper. |
The original mesh composition remains the default. Choose a named family for a consistent art direction, or use auto to deterministically mix families across a list of users.
<GradientAvatar seed="[email protected]" variant="bloom" />
<GradientAvatar seed="[email protected]" variant="void" />
<GradientAvatar seed="[email protected]" variant="auto" />
auto is stable: the same seed always selects the same family.
Use mode="dither" to quantize any gradient variant to its seed palette with
hard square cells and deterministic error diffusion.
<GradientAvatar seed="[email protected]" mode="dither" />
<GradientAvatar seed="[email protected]" variant="bloom" mode="dither" />
<!-- Circle -->
<GradientAvatar seed="[email protected]" :size="96" />
<!-- Rounded square -->
<GradientAvatar seed="[email protected]" :size="96" :radius="16" />
<!-- Square -->
<GradientAvatar seed="[email protected]" :size="96" :radius="0" />
<!-- With white ring -->
<GradientAvatar seed="[email protected]" :size="96" ring />