FlowFieldAvatar

The <FlowFieldAvatar> component renders deterministic streamlines through a seed-derived noise field.

It follows the same approach used by plotter-style flow fields: start from a grid of points, displace each seed slightly, then trace vertices through the angle returned by a 2D noise field.

Usage

<script setup>
import { FlowFieldAvatar } from '@maxnth/gestalt'
</script>

<template>
  <FlowFieldAvatar seed="jane@example.com" :size="96" />
</template>

Props

Prop	Type	Default	Description
`seed`	`string \| number`	-	Any value; each unique seed yields a unique flow field.
`size`	`number`	`32`	Rendered size in pixels.
`radius`	`number \| string`	`"9999px"`	Corner radius. Number is pixels; string is CSS.
`columns`	`number`	`14`	Number of seed columns.
`rows`	`number`	`14`	Number of seed rows.
`iterations`	`number`	`28`	Steps traced in each direction from every seed.
`stepSize`	`number`	`size * 0.014`	Step size in SVG user-space units.
`xDamp`	`number`	`size * 0.95`	Horizontal noise scale denominator.
`yDamp`	`number`	`size * 0.95`	Vertical noise scale denominator.
`jitter`	`number`	`0.8`	Seed displacement as a fraction of each grid cell.
`margin`	`number`	`size * 0.08`	Margin around the seeded grid in SVG user-space units.
`angleRange`	`number`	`180`	Angle spread in degrees sampled from the noise field.
`bidirectional`	`boolean`	`true`	Draw both forward and reverse traces from each seed.
`background`	`string`	-	SVG background as `#RGB` or `#RRGGBB`; invalid values use the generated color.
`colors`	`string[]`	-	`#RGB` or `#RRGGBB` stroke colors; invalid entries are ignored.
`strokeWidth`	`number`	`size * 0.005`	Stroke width in SVG user-space units.
`opacity`	`number`	`0.72`	Stroke opacity from `0` to `1`.
`ring`	`boolean \| number \| string`	`false`	Optional outline. `true` = white 2px ring.
`style`	`object`	-	Extra inline styles merged onto the wrapper.

Examples

<!-- Dense short traces -->
<FlowFieldAvatar seed="field" :size="96" :columns="22" :rows="22" :iterations="18" />

<!-- Longer plotter-style traces -->
<FlowFieldAvatar seed="field" :size="96" :columns="9" :rows="9" :iterations="56" :step-size="4" />

<!-- Custom palette -->
<FlowFieldAvatar
  seed="field"
  :size="96"
  background="#101014"
  :colors="['#F8FAFC', '#38BDF8', '#F472B6', '#FACC15']"
/>

IdenticonAvatar

<IdenticonAvatar> renders a deterministic, GitHub-style geometric identicon from any seed.

Custom Algorithm

One of the core ideas behind @maxnth/gestalt is that avatars are just deterministic drawing functions. You can write your own algorithm and plug it into the generic <Avatar> component.