[{"data":1,"prerenderedAt":817},["ShallowReactive",2],{"content-navigation":3,"docs-shell-navigation":42,"content-page:\u002Fcomponents\u002Fgradient-avatar":53,"content-surround:\u002Fcomponents\u002Fgradient-avatar":812},[4,8,34,38],{"title":5,"path":6,"stem":7},"Getting Started","\u002Fgetting-started","01.getting-started",{"title":9,"path":10,"stem":11,"children":12,"page":33},"Components","\u002Fcomponents","02.components",[13,17,21,25,29],{"title":14,"path":15,"stem":16},"Avatar","\u002Fcomponents\u002Favatar","02.components\u002F01.avatar",{"title":18,"path":19,"stem":20},"GradientAvatar","\u002Fcomponents\u002Fgradient-avatar","02.components\u002F02.gradient-avatar",{"title":22,"path":23,"stem":24},"InitialsAvatar","\u002Fcomponents\u002Finitials-avatar","02.components\u002F03.initials-avatar",{"title":26,"path":27,"stem":28},"IdenticonAvatar","\u002Fcomponents\u002Fidenticon-avatar","02.components\u002F04.identicon-avatar",{"title":30,"path":31,"stem":32},"FlowFieldAvatar","\u002Fcomponents\u002Fflow-field-avatar","02.components\u002F05.flow-field-avatar",false,{"title":35,"path":36,"stem":37},"Custom Algorithm","\u002Fcustom-algorithm","03.custom-algorithm",{"title":39,"path":40,"stem":41},"Engine Helpers","\u002Fengine","04.engine",[43,44,51,52],{"title":5,"path":6,"stem":7},{"title":9,"path":10,"stem":11,"children":45,"page":33},[46,47,48,49,50],{"title":14,"path":15,"stem":16},{"title":18,"path":19,"stem":20},{"title":22,"path":23,"stem":24},{"title":26,"path":27,"stem":28},{"title":30,"path":31,"stem":32},{"title":35,"path":36,"stem":37},{"title":39,"path":40,"stem":41},{"id":54,"title":18,"body":55,"description":807,"extension":808,"meta":809,"navigation":150,"path":19,"seo":810,"stem":20,"__hash__":811},"docs\u002F02.components\u002F02.gradient-avatar.md",{"type":56,"value":57,"toc":799},"minimark",[58,62,71,76,208,212,381,385,395,495,500,504,511,588,592,785,789,796],[59,60,18],"h1",{"id":61},"gradientavatar",[63,64,65,66,70],"p",{},"The ",[67,68,69],"code",{},"\u003CGradientAvatar>"," component renders a deterministic, soft mesh-gradient avatar from any seed.",[72,73,75],"h2",{"id":74},"usage","Usage",[77,78,83],"pre",{"className":79,"code":80,"language":81,"meta":82,"style":82},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { GradientAvatar } from '@maxnth\u002Fgestalt'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGradientAvatar seed=\"jane@example.com\" :size=\"96\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[67,84,85,105,135,145,152,162,199],{"__ignoreMap":82},[86,87,90,94,98,102],"span",{"class":88,"line":89},"line",1,[86,91,93],{"class":92},"sMK4o","\u003C",[86,95,97],{"class":96},"swJcz","script",[86,99,101],{"class":100},"spNyl"," setup",[86,103,104],{"class":92},">\n",[86,106,108,112,115,119,122,125,128,132],{"class":88,"line":107},2,[86,109,111],{"class":110},"s7zQu","import",[86,113,114],{"class":92}," {",[86,116,118],{"class":117},"sTEyZ"," GradientAvatar",[86,120,121],{"class":92}," }",[86,123,124],{"class":110}," from",[86,126,127],{"class":92}," '",[86,129,131],{"class":130},"sfazB","@maxnth\u002Fgestalt",[86,133,134],{"class":92},"'\n",[86,136,138,141,143],{"class":88,"line":137},3,[86,139,140],{"class":92},"\u003C\u002F",[86,142,97],{"class":96},[86,144,104],{"class":92},[86,146,148],{"class":88,"line":147},4,[86,149,151],{"emptyLinePlaceholder":150},true,"\n",[86,153,155,157,160],{"class":88,"line":154},5,[86,156,93],{"class":92},[86,158,159],{"class":96},"template",[86,161,104],{"class":92},[86,163,165,168,170,173,176,179,182,184,187,189,191,194,196],{"class":88,"line":164},6,[86,166,167],{"class":92},"  \u003C",[86,169,18],{"class":96},[86,171,172],{"class":100}," seed",[86,174,175],{"class":92},"=",[86,177,178],{"class":92},"\"",[86,180,181],{"class":130},"jane@example.com",[86,183,178],{"class":92},[86,185,186],{"class":100}," :size",[86,188,175],{"class":92},[86,190,178],{"class":92},[86,192,193],{"class":130},"96",[86,195,178],{"class":92},[86,197,198],{"class":92}," \u002F>\n",[86,200,202,204,206],{"class":88,"line":201},7,[86,203,140],{"class":92},[86,205,159],{"class":96},[86,207,104],{"class":92},[72,209,211],{"id":210},"props","Props",[213,214,215,234],"table",{},[216,217,218],"thead",{},[219,220,221,225,228,231],"tr",{},[222,223,224],"th",{},"Prop",[222,226,227],{},"Type",[222,229,230],{},"Default",[222,232,233],{},"Description",[235,236,237,256,276,296,320,344,364],"tbody",{},[219,238,239,245,250,253],{},[240,241,242],"td",{},[67,243,244],{},"seed",[240,246,247],{},[67,248,249],{},"string | number",[240,251,252],{},"—",[240,254,255],{},"Any value; each unique seed yields a unique avatar.",[219,257,258,263,268,273],{},[240,259,260],{},[67,261,262],{},"size",[240,264,265],{},[67,266,267],{},"number",[240,269,270],{},[67,271,272],{},"32",[240,274,275],{},"Rendered size in pixels.",[219,277,278,283,288,293],{},[240,279,280],{},[67,281,282],{},"radius",[240,284,285],{},[67,286,287],{},"number | string",[240,289,290],{},[67,291,292],{},"\"9999px\"",[240,294,295],{},"Corner radius. Number is pixels; string is CSS.",[219,297,298,303,308,313],{},[240,299,300],{},[67,301,302],{},"ring",[240,304,305],{},[67,306,307],{},"boolean | number | string",[240,309,310],{},[67,311,312],{},"false",[240,314,315,316,319],{},"Optional outline. ",[67,317,318],{},"true"," = white 2px ring.",[219,321,322,327,332,337],{},[240,323,324],{},[67,325,326],{},"variant",[240,328,329],{},[67,330,331],{},"\"mesh\" | \"bloom\" | \"flare\" | \"silk\" | \"nova\" | \"void\" | \"jade\" | \"auto\"",[240,333,334],{},[67,335,336],{},"\"mesh\"",[240,338,339,340,343],{},"Gradient composition. ",[67,341,342],{},"auto"," picks a stable family from the seed.",[219,345,346,351,356,361],{},[240,347,348],{},[67,349,350],{},"mode",[240,352,353],{},[67,354,355],{},"\"smooth\" | \"dither\"",[240,357,358],{},[67,359,360],{},"\"smooth\"",[240,362,363],{},"Smooth gradient or palette-quantized square-pixel treatment.",[219,365,366,371,376,378],{},[240,367,368],{},[67,369,370],{},"style",[240,372,373],{},[67,374,375],{},"object",[240,377,252],{},[240,379,380],{},"Extra inline styles merged onto the wrapper.",[72,382,384],{"id":383},"variants","Variants",[63,386,387,388,391,392,394],{},"The original ",[67,389,390],{},"mesh"," composition remains the default. Choose a named family for a consistent art direction, or use ",[67,393,342],{}," to deterministically mix families across a list of users.",[77,396,398],{"className":79,"code":397,"language":81,"meta":82,"style":82},"\u003CGradientAvatar seed=\"jane@example.com\" variant=\"bloom\" \u002F>\n\n\u003CGradientAvatar seed=\"jane@example.com\" variant=\"void\" \u002F>\n\n\u003CGradientAvatar seed=\"jane@example.com\" variant=\"auto\" \u002F>\n",[67,399,400,430,434,463,467],{"__ignoreMap":82},[86,401,402,404,406,408,410,412,414,416,419,421,423,426,428],{"class":88,"line":89},[86,403,93],{"class":92},[86,405,18],{"class":96},[86,407,172],{"class":100},[86,409,175],{"class":92},[86,411,178],{"class":92},[86,413,181],{"class":130},[86,415,178],{"class":92},[86,417,418],{"class":100}," variant",[86,420,175],{"class":92},[86,422,178],{"class":92},[86,424,425],{"class":130},"bloom",[86,427,178],{"class":92},[86,429,198],{"class":92},[86,431,432],{"class":88,"line":107},[86,433,151],{"emptyLinePlaceholder":150},[86,435,436,438,440,442,444,446,448,450,452,454,456,459,461],{"class":88,"line":137},[86,437,93],{"class":92},[86,439,18],{"class":96},[86,441,172],{"class":100},[86,443,175],{"class":92},[86,445,178],{"class":92},[86,447,181],{"class":130},[86,449,178],{"class":92},[86,451,418],{"class":100},[86,453,175],{"class":92},[86,455,178],{"class":92},[86,457,458],{"class":130},"void",[86,460,178],{"class":92},[86,462,198],{"class":92},[86,464,465],{"class":88,"line":147},[86,466,151],{"emptyLinePlaceholder":150},[86,468,469,471,473,475,477,479,481,483,485,487,489,491,493],{"class":88,"line":154},[86,470,93],{"class":92},[86,472,18],{"class":96},[86,474,172],{"class":100},[86,476,175],{"class":92},[86,478,178],{"class":92},[86,480,181],{"class":130},[86,482,178],{"class":92},[86,484,418],{"class":100},[86,486,175],{"class":92},[86,488,178],{"class":92},[86,490,342],{"class":130},[86,492,178],{"class":92},[86,494,198],{"class":92},[63,496,497,499],{},[67,498,342],{}," is stable: the same seed always selects the same family.",[72,501,503],{"id":502},"dither-mode","Dither mode",[63,505,506,507,510],{},"Use ",[67,508,509],{},"mode=\"dither\""," to quantize any gradient variant to its seed palette with\nhard square cells and deterministic error diffusion.",[77,512,514],{"className":79,"code":513,"language":81,"meta":82,"style":82},"\u003CGradientAvatar seed=\"jane@example.com\" mode=\"dither\" \u002F>\n\n\u003CGradientAvatar seed=\"jane@example.com\" variant=\"bloom\" mode=\"dither\" \u002F>\n",[67,515,516,546,550],{"__ignoreMap":82},[86,517,518,520,522,524,526,528,530,532,535,537,539,542,544],{"class":88,"line":89},[86,519,93],{"class":92},[86,521,18],{"class":96},[86,523,172],{"class":100},[86,525,175],{"class":92},[86,527,178],{"class":92},[86,529,181],{"class":130},[86,531,178],{"class":92},[86,533,534],{"class":100}," mode",[86,536,175],{"class":92},[86,538,178],{"class":92},[86,540,541],{"class":130},"dither",[86,543,178],{"class":92},[86,545,198],{"class":92},[86,547,548],{"class":88,"line":107},[86,549,151],{"emptyLinePlaceholder":150},[86,551,552,554,556,558,560,562,564,566,568,570,572,574,576,578,580,582,584,586],{"class":88,"line":137},[86,553,93],{"class":92},[86,555,18],{"class":96},[86,557,172],{"class":100},[86,559,175],{"class":92},[86,561,178],{"class":92},[86,563,181],{"class":130},[86,565,178],{"class":92},[86,567,418],{"class":100},[86,569,175],{"class":92},[86,571,178],{"class":92},[86,573,425],{"class":130},[86,575,178],{"class":92},[86,577,534],{"class":100},[86,579,175],{"class":92},[86,581,178],{"class":92},[86,583,541],{"class":130},[86,585,178],{"class":92},[86,587,198],{"class":92},[72,589,591],{"id":590},"shapes","Shapes",[77,593,595],{"className":79,"code":594,"language":81,"meta":82,"style":82},"\u003C!-- Circle -->\n\u003CGradientAvatar seed=\"jane@example.com\" :size=\"96\" \u002F>\n\n\u003C!-- Rounded square -->\n\u003CGradientAvatar seed=\"jane@example.com\" :size=\"96\" :radius=\"16\" \u002F>\n\n\u003C!-- Square -->\n\u003CGradientAvatar seed=\"jane@example.com\" :size=\"96\" :radius=\"0\" \u002F>\n\n\u003C!-- With white ring -->\n\u003CGradientAvatar seed=\"jane@example.com\" :size=\"96\" ring \u002F>\n",[67,596,597,603,635,639,644,687,691,696,740,745,751],{"__ignoreMap":82},[86,598,599],{"class":88,"line":89},[86,600,602],{"class":601},"sHwdD","\u003C!-- Circle -->\n",[86,604,605,607,609,611,613,615,617,619,622,624,626,628,631,633],{"class":88,"line":107},[86,606,93],{"class":92},[86,608,18],{"class":96},[86,610,172],{"class":100},[86,612,175],{"class":92},[86,614,178],{"class":92},[86,616,181],{"class":130},[86,618,178],{"class":92},[86,620,621],{"class":92}," :",[86,623,262],{"class":100},[86,625,175],{"class":92},[86,627,178],{"class":92},[86,629,193],{"class":630},"sbssI",[86,632,178],{"class":92},[86,634,198],{"class":92},[86,636,637],{"class":88,"line":137},[86,638,151],{"emptyLinePlaceholder":150},[86,640,641],{"class":88,"line":147},[86,642,643],{"class":601},"\u003C!-- Rounded square -->\n",[86,645,646,648,650,652,654,656,658,660,662,664,666,668,670,672,674,676,678,680,683,685],{"class":88,"line":154},[86,647,93],{"class":92},[86,649,18],{"class":96},[86,651,172],{"class":100},[86,653,175],{"class":92},[86,655,178],{"class":92},[86,657,181],{"class":130},[86,659,178],{"class":92},[86,661,621],{"class":92},[86,663,262],{"class":100},[86,665,175],{"class":92},[86,667,178],{"class":92},[86,669,193],{"class":630},[86,671,178],{"class":92},[86,673,621],{"class":92},[86,675,282],{"class":100},[86,677,175],{"class":92},[86,679,178],{"class":92},[86,681,682],{"class":630},"16",[86,684,178],{"class":92},[86,686,198],{"class":92},[86,688,689],{"class":88,"line":164},[86,690,151],{"emptyLinePlaceholder":150},[86,692,693],{"class":88,"line":201},[86,694,695],{"class":601},"\u003C!-- Square -->\n",[86,697,699,701,703,705,707,709,711,713,715,717,719,721,723,725,727,729,731,733,736,738],{"class":88,"line":698},8,[86,700,93],{"class":92},[86,702,18],{"class":96},[86,704,172],{"class":100},[86,706,175],{"class":92},[86,708,178],{"class":92},[86,710,181],{"class":130},[86,712,178],{"class":92},[86,714,621],{"class":92},[86,716,262],{"class":100},[86,718,175],{"class":92},[86,720,178],{"class":92},[86,722,193],{"class":630},[86,724,178],{"class":92},[86,726,621],{"class":92},[86,728,282],{"class":100},[86,730,175],{"class":92},[86,732,178],{"class":92},[86,734,735],{"class":630},"0",[86,737,178],{"class":92},[86,739,198],{"class":92},[86,741,743],{"class":88,"line":742},9,[86,744,151],{"emptyLinePlaceholder":150},[86,746,748],{"class":88,"line":747},10,[86,749,750],{"class":601},"\u003C!-- With white ring -->\n",[86,752,754,756,758,760,762,764,766,768,770,772,774,776,778,780,783],{"class":88,"line":753},11,[86,755,93],{"class":92},[86,757,18],{"class":96},[86,759,172],{"class":100},[86,761,175],{"class":92},[86,763,178],{"class":92},[86,765,181],{"class":130},[86,767,178],{"class":92},[86,769,621],{"class":92},[86,771,262],{"class":100},[86,773,175],{"class":92},[86,775,178],{"class":92},[86,777,193],{"class":630},[86,779,178],{"class":92},[86,781,782],{"class":100}," ring",[86,784,198],{"class":92},[72,786,788],{"id":787},"live-example","Live example",[790,791,792,793],"component-example",{},"  ",[794,795],"gradient-avatar",{"seed":181,":size":193,"ring":82},[370,797,798],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":82,"searchDepth":137,"depth":137,"links":800},[801,802,803,804,805,806],{"id":74,"depth":107,"text":75},{"id":210,"depth":107,"text":211},{"id":383,"depth":107,"text":384},{"id":502,"depth":107,"text":503},{"id":590,"depth":107,"text":591},{"id":787,"depth":107,"text":788},"The \u003CGradientAvatar> component renders a deterministic, soft mesh-gradient avatar from any seed.","md",{},{"title":18,"description":807},"MSF2BJTzRSD_QRett_YxuBpYzL0pFgDauSP8KwsRPqY",[813,815],{"title":14,"path":15,"stem":16,"description":814,"children":-1},"The low-level \u003CAvatar> component lets you swap rendering algorithms or plug in your own.",{"title":22,"path":23,"stem":24,"description":816,"children":-1},"\u003CInitialsAvatar> renders one or two initials on a solid background — perfect for fallback profile pictures.",1784287256265]