[{"data":1,"prerenderedAt":939},["ShallowReactive",2],{"content-navigation":3,"docs-shell-navigation":42,"content-page:\u002Fcomponents\u002Fflow-field-avatar":53,"content-surround:\u002Fcomponents\u002Fflow-field-avatar":934},[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":30,"body":55,"description":929,"extension":930,"meta":931,"navigation":153,"path":31,"seo":932,"stem":32,"__hash__":933},"docs\u002F02.components\u002F05.flow-field-avatar.md",{"type":56,"value":57,"toc":924},"minimark",[58,62,71,74,79,211,215,620,624,921],[59,60,30],"h1",{"id":61},"flowfieldavatar",[63,64,65,66,70],"p",{},"The ",[67,68,69],"code",{},"\u003CFlowFieldAvatar>"," component renders deterministic streamlines through a seed-derived noise field.",[63,72,73],{},"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.",[75,76,78],"h2",{"id":77},"usage","Usage",[80,81,86],"pre",{"className":82,"code":83,"language":84,"meta":85,"style":85},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { FlowFieldAvatar } from '@maxnth\u002Fgestalt'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CFlowFieldAvatar seed=\"jane@example.com\" :size=\"96\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[67,87,88,108,138,148,155,165,202],{"__ignoreMap":85},[89,90,93,97,101,105],"span",{"class":91,"line":92},"line",1,[89,94,96],{"class":95},"sMK4o","\u003C",[89,98,100],{"class":99},"swJcz","script",[89,102,104],{"class":103},"spNyl"," setup",[89,106,107],{"class":95},">\n",[89,109,111,115,118,122,125,128,131,135],{"class":91,"line":110},2,[89,112,114],{"class":113},"s7zQu","import",[89,116,117],{"class":95}," {",[89,119,121],{"class":120},"sTEyZ"," FlowFieldAvatar",[89,123,124],{"class":95}," }",[89,126,127],{"class":113}," from",[89,129,130],{"class":95}," '",[89,132,134],{"class":133},"sfazB","@maxnth\u002Fgestalt",[89,136,137],{"class":95},"'\n",[89,139,141,144,146],{"class":91,"line":140},3,[89,142,143],{"class":95},"\u003C\u002F",[89,145,100],{"class":99},[89,147,107],{"class":95},[89,149,151],{"class":91,"line":150},4,[89,152,154],{"emptyLinePlaceholder":153},true,"\n",[89,156,158,160,163],{"class":91,"line":157},5,[89,159,96],{"class":95},[89,161,162],{"class":99},"template",[89,164,107],{"class":95},[89,166,168,171,173,176,179,182,185,187,190,192,194,197,199],{"class":91,"line":167},6,[89,169,170],{"class":95},"  \u003C",[89,172,30],{"class":99},[89,174,175],{"class":103}," seed",[89,177,178],{"class":95},"=",[89,180,181],{"class":95},"\"",[89,183,184],{"class":133},"jane@example.com",[89,186,181],{"class":95},[89,188,189],{"class":103}," :size",[89,191,178],{"class":95},[89,193,181],{"class":95},[89,195,196],{"class":133},"96",[89,198,181],{"class":95},[89,200,201],{"class":95}," \u002F>\n",[89,203,205,207,209],{"class":91,"line":204},7,[89,206,143],{"class":95},[89,208,162],{"class":99},[89,210,107],{"class":95},[75,212,214],{"id":213},"props","Props",[216,217,218,237],"table",{},[219,220,221],"thead",{},[222,223,224,228,231,234],"tr",{},[225,226,227],"th",{},"Prop",[225,229,230],{},"Type",[225,232,233],{},"Default",[225,235,236],{},"Description",[238,239,240,259,279,299,318,336,355,374,393,411,430,449,468,488,513,534,553,580,603],"tbody",{},[222,241,242,248,253,256],{},[243,244,245],"td",{},[67,246,247],{},"seed",[243,249,250],{},[67,251,252],{},"string | number",[243,254,255],{},"-",[243,257,258],{},"Any value; each unique seed yields a unique flow field.",[222,260,261,266,271,276],{},[243,262,263],{},[67,264,265],{},"size",[243,267,268],{},[67,269,270],{},"number",[243,272,273],{},[67,274,275],{},"32",[243,277,278],{},"Rendered size in pixels.",[222,280,281,286,291,296],{},[243,282,283],{},[67,284,285],{},"radius",[243,287,288],{},[67,289,290],{},"number | string",[243,292,293],{},[67,294,295],{},"\"9999px\"",[243,297,298],{},"Corner radius. Number is pixels; string is CSS.",[222,300,301,306,310,315],{},[243,302,303],{},[67,304,305],{},"columns",[243,307,308],{},[67,309,270],{},[243,311,312],{},[67,313,314],{},"14",[243,316,317],{},"Number of seed columns.",[222,319,320,325,329,333],{},[243,321,322],{},[67,323,324],{},"rows",[243,326,327],{},[67,328,270],{},[243,330,331],{},[67,332,314],{},[243,334,335],{},"Number of seed rows.",[222,337,338,343,347,352],{},[243,339,340],{},[67,341,342],{},"iterations",[243,344,345],{},[67,346,270],{},[243,348,349],{},[67,350,351],{},"28",[243,353,354],{},"Steps traced in each direction from every seed.",[222,356,357,362,366,371],{},[243,358,359],{},[67,360,361],{},"stepSize",[243,363,364],{},[67,365,270],{},[243,367,368],{},[67,369,370],{},"size * 0.014",[243,372,373],{},"Step size in SVG user-space units.",[222,375,376,381,385,390],{},[243,377,378],{},[67,379,380],{},"xDamp",[243,382,383],{},[67,384,270],{},[243,386,387],{},[67,388,389],{},"size * 0.95",[243,391,392],{},"Horizontal noise scale denominator.",[222,394,395,400,404,408],{},[243,396,397],{},[67,398,399],{},"yDamp",[243,401,402],{},[67,403,270],{},[243,405,406],{},[67,407,389],{},[243,409,410],{},"Vertical noise scale denominator.",[222,412,413,418,422,427],{},[243,414,415],{},[67,416,417],{},"jitter",[243,419,420],{},[67,421,270],{},[243,423,424],{},[67,425,426],{},"0.8",[243,428,429],{},"Seed displacement as a fraction of each grid cell.",[222,431,432,437,441,446],{},[243,433,434],{},[67,435,436],{},"margin",[243,438,439],{},[67,440,270],{},[243,442,443],{},[67,444,445],{},"size * 0.08",[243,447,448],{},"Margin around the seeded grid in SVG user-space units.",[222,450,451,456,460,465],{},[243,452,453],{},[67,454,455],{},"angleRange",[243,457,458],{},[67,459,270],{},[243,461,462],{},[67,463,464],{},"180",[243,466,467],{},"Angle spread in degrees sampled from the noise field.",[222,469,470,475,480,485],{},[243,471,472],{},[67,473,474],{},"bidirectional",[243,476,477],{},[67,478,479],{},"boolean",[243,481,482],{},[67,483,484],{},"true",[243,486,487],{},"Draw both forward and reverse traces from each seed.",[222,489,490,495,500,502],{},[243,491,492],{},[67,493,494],{},"background",[243,496,497],{},[67,498,499],{},"string",[243,501,255],{},[243,503,504,505,508,509,512],{},"SVG background as ",[67,506,507],{},"#RGB"," or ",[67,510,511],{},"#RRGGBB","; invalid values use the generated color.",[222,514,515,520,525,527],{},[243,516,517],{},[67,518,519],{},"colors",[243,521,522],{},[67,523,524],{},"string[]",[243,526,255],{},[243,528,529,508,531,533],{},[67,530,507],{},[67,532,511],{}," stroke colors; invalid entries are ignored.",[222,535,536,541,545,550],{},[243,537,538],{},[67,539,540],{},"strokeWidth",[243,542,543],{},[67,544,270],{},[243,546,547],{},[67,548,549],{},"size * 0.005",[243,551,552],{},"Stroke width in SVG user-space units.",[222,554,555,560,564,569],{},[243,556,557],{},[67,558,559],{},"opacity",[243,561,562],{},[67,563,270],{},[243,565,566],{},[67,567,568],{},"0.72",[243,570,571,572,575,576,579],{},"Stroke opacity from ",[67,573,574],{},"0"," to ",[67,577,578],{},"1",".",[222,581,582,587,592,597],{},[243,583,584],{},[67,585,586],{},"ring",[243,588,589],{},[67,590,591],{},"boolean | number | string",[243,593,594],{},[67,595,596],{},"false",[243,598,599,600,602],{},"Optional outline. ",[67,601,484],{}," = white 2px ring.",[222,604,605,610,615,617],{},[243,606,607],{},[67,608,609],{},"style",[243,611,612],{},[67,613,614],{},"object",[243,616,255],{},[243,618,619],{},"Extra inline styles merged onto the wrapper.",[75,621,623],{"id":622},"examples","Examples",[80,625,627],{"className":82,"code":626,"language":84,"meta":85,"style":85},"\u003C!-- Dense short traces -->\n\u003CFlowFieldAvatar seed=\"field\" :size=\"96\" :columns=\"22\" :rows=\"22\" :iterations=\"18\" \u002F>\n\n\u003C!-- Longer plotter-style traces -->\n\u003CFlowFieldAvatar seed=\"field\" :size=\"96\" :columns=\"9\" :rows=\"9\" :iterations=\"56\" :step-size=\"4\" \u002F>\n\n\u003C!-- Custom palette -->\n\u003CFlowFieldAvatar\n  seed=\"field\"\n  :size=\"96\"\n  background=\"#101014\"\n  :colors=\"['#F8FAFC', '#38BDF8', '#F472B6', '#FACC15']\"\n\u002F>\n",[67,628,629,635,706,710,715,797,801,806,814,829,845,860,915],{"__ignoreMap":85},[89,630,631],{"class":91,"line":92},[89,632,634],{"class":633},"sHwdD","\u003C!-- Dense short traces -->\n",[89,636,637,639,641,643,645,647,650,652,655,657,659,661,664,666,668,670,672,674,677,679,681,683,685,687,689,691,693,695,697,699,702,704],{"class":91,"line":110},[89,638,96],{"class":95},[89,640,30],{"class":99},[89,642,175],{"class":103},[89,644,178],{"class":95},[89,646,181],{"class":95},[89,648,649],{"class":133},"field",[89,651,181],{"class":95},[89,653,654],{"class":95}," :",[89,656,265],{"class":103},[89,658,178],{"class":95},[89,660,181],{"class":95},[89,662,196],{"class":663},"sbssI",[89,665,181],{"class":95},[89,667,654],{"class":95},[89,669,305],{"class":103},[89,671,178],{"class":95},[89,673,181],{"class":95},[89,675,676],{"class":663},"22",[89,678,181],{"class":95},[89,680,654],{"class":95},[89,682,324],{"class":103},[89,684,178],{"class":95},[89,686,181],{"class":95},[89,688,676],{"class":663},[89,690,181],{"class":95},[89,692,654],{"class":95},[89,694,342],{"class":103},[89,696,178],{"class":95},[89,698,181],{"class":95},[89,700,701],{"class":663},"18",[89,703,181],{"class":95},[89,705,201],{"class":95},[89,707,708],{"class":91,"line":140},[89,709,154],{"emptyLinePlaceholder":153},[89,711,712],{"class":91,"line":150},[89,713,714],{"class":633},"\u003C!-- Longer plotter-style traces -->\n",[89,716,717,719,721,723,725,727,729,731,733,735,737,739,741,743,745,747,749,751,754,756,758,760,762,764,766,768,770,772,774,776,779,781,783,786,788,790,793,795],{"class":91,"line":157},[89,718,96],{"class":95},[89,720,30],{"class":99},[89,722,175],{"class":103},[89,724,178],{"class":95},[89,726,181],{"class":95},[89,728,649],{"class":133},[89,730,181],{"class":95},[89,732,654],{"class":95},[89,734,265],{"class":103},[89,736,178],{"class":95},[89,738,181],{"class":95},[89,740,196],{"class":663},[89,742,181],{"class":95},[89,744,654],{"class":95},[89,746,305],{"class":103},[89,748,178],{"class":95},[89,750,181],{"class":95},[89,752,753],{"class":663},"9",[89,755,181],{"class":95},[89,757,654],{"class":95},[89,759,324],{"class":103},[89,761,178],{"class":95},[89,763,181],{"class":95},[89,765,753],{"class":663},[89,767,181],{"class":95},[89,769,654],{"class":95},[89,771,342],{"class":103},[89,773,178],{"class":95},[89,775,181],{"class":95},[89,777,778],{"class":663},"56",[89,780,181],{"class":95},[89,782,654],{"class":95},[89,784,785],{"class":103},"step-size",[89,787,178],{"class":95},[89,789,181],{"class":95},[89,791,792],{"class":663},"4",[89,794,181],{"class":95},[89,796,201],{"class":95},[89,798,799],{"class":91,"line":167},[89,800,154],{"emptyLinePlaceholder":153},[89,802,803],{"class":91,"line":204},[89,804,805],{"class":633},"\u003C!-- Custom palette -->\n",[89,807,809,811],{"class":91,"line":808},8,[89,810,96],{"class":95},[89,812,813],{"class":99},"FlowFieldAvatar\n",[89,815,817,820,822,824,826],{"class":91,"line":816},9,[89,818,819],{"class":103},"  seed",[89,821,178],{"class":95},[89,823,181],{"class":95},[89,825,649],{"class":133},[89,827,828],{"class":95},"\"\n",[89,830,832,835,837,839,841,843],{"class":91,"line":831},10,[89,833,834],{"class":95},"  :",[89,836,265],{"class":103},[89,838,178],{"class":95},[89,840,181],{"class":95},[89,842,196],{"class":663},[89,844,828],{"class":95},[89,846,848,851,853,855,858],{"class":91,"line":847},11,[89,849,850],{"class":103},"  background",[89,852,178],{"class":95},[89,854,181],{"class":95},[89,856,857],{"class":133},"#101014",[89,859,828],{"class":95},[89,861,863,865,867,869,871,874,877,880,882,885,887,890,892,894,896,899,901,903,905,908,910,913],{"class":91,"line":862},12,[89,864,834],{"class":95},[89,866,519],{"class":103},[89,868,178],{"class":95},[89,870,181],{"class":95},[89,872,873],{"class":120},"[",[89,875,876],{"class":95},"'",[89,878,879],{"class":133},"#F8FAFC",[89,881,876],{"class":95},[89,883,884],{"class":95},",",[89,886,130],{"class":95},[89,888,889],{"class":133},"#38BDF8",[89,891,876],{"class":95},[89,893,884],{"class":95},[89,895,130],{"class":95},[89,897,898],{"class":133},"#F472B6",[89,900,876],{"class":95},[89,902,884],{"class":95},[89,904,130],{"class":95},[89,906,907],{"class":133},"#FACC15",[89,909,876],{"class":95},[89,911,912],{"class":120},"]",[89,914,828],{"class":95},[89,916,918],{"class":91,"line":917},13,[89,919,920],{"class":120},"\u002F>\n",[609,922,923],{},"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":85,"searchDepth":140,"depth":140,"links":925},[926,927,928],{"id":77,"depth":110,"text":78},{"id":213,"depth":110,"text":214},{"id":622,"depth":110,"text":623},"The \u003CFlowFieldAvatar> component renders deterministic streamlines through a seed-derived noise field.","md",{},{"title":30,"description":929},"o-_OSqSt-RvJyR8ex9dNVhX8MNRgVBsXDJcUIf07_yM",[935,937],{"title":26,"path":27,"stem":28,"description":936,"children":-1},"\u003CIdenticonAvatar> renders a deterministic, GitHub-style geometric identicon from any seed.",{"title":35,"path":36,"stem":37,"description":938,"children":-1},"One of the core ideas behind @maxnth\u002Fgestalt is that avatars are just deterministic drawing functions. You can write your own algorithm and plug it into the generic \u003CAvatar> component.",1784287256265]