[{"data":1,"prerenderedAt":724},["ShallowReactive",2],{"content-navigation":3,"docs-shell-navigation":42,"content-page:\u002Fgetting-started":53,"content-surround:\u002Fgetting-started":720},[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":5,"body":55,"description":65,"extension":716,"meta":717,"navigation":295,"path":6,"seo":718,"stem":7,"__hash__":719},"docs\u002F01.getting-started.md",{"type":56,"value":57,"toc":709},"minimark",[58,62,66,71,78,82,137,141,213,220,224,227,353,457,548,639,643,705],[59,60,5],"h1",{"id":61},"getting-started",[63,64,65],"p",{},"Generate beautiful, deterministic avatars for your Vue 3 apps without fetching a single image.",[67,68,70],"h2",{"id":69},"what-is-maxnthgestalt","What is @maxnth\u002Fgestalt?",[63,72,73,77],{},[74,75,76],"code",{},"@maxnth\u002Fgestalt"," is a free, open-source Vue 3 component library that renders generative avatars as inline SVG. Give it any string or number — a user id, email, or username — and it produces a unique, reproducible avatar. The same seed always renders the same result, so you get consistent profile pictures entirely from data.",[67,79,81],{"id":80},"why-use-it","Why use it?",[83,84,85,93,103,109,115,125,131],"ul",{},[86,87,88,92],"li",{},[89,90,91],"strong",{},"No assets to ship."," Every avatar is generated on the fly, so there is no image folder, no CDN, and no broken links.",[86,94,95,98,99,102],{},[89,96,97],{},"Stable by design."," A seed like ",[74,100,101],{},"ada@example.com"," always produces the exact same avatar.",[86,104,105,108],{},[89,106,107],{},"Server-rendered."," Built-in components emit complete inline SVG during SSR, with no client-side drawing pass.",[86,110,111,114],{},[89,112,113],{},"Flexible core."," Use Vue components, framework-independent SVG generators, or the canvas helpers for custom renderers and raster export.",[86,116,117,120,121,124],{},[89,118,119],{},"Easy to extend."," Bring your own rendering algorithm via the generic ",[74,122,123],{},"\u003CAvatar>"," component.",[86,126,127,130],{},[89,128,129],{},"Fully typed."," Written in TypeScript with declarations included.",[86,132,133,136],{},[89,134,135],{},"Zero runtime dependencies."," The library only requires Vue.",[67,138,140],{"id":139},"installation","Installation",[142,143,145,170,185,199],"code-group",{"sync":144},"package-manager",[146,147,153],"pre",{"className":148,"code":149,"filename":150,"language":151,"meta":152,"style":152},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add @maxnth\u002Fgestalt\n","pnpm","bash","",[74,154,155],{"__ignoreMap":152},[156,157,160,163,167],"span",{"class":158,"line":159},"line",1,[156,161,150],{"class":162},"sBMFI",[156,164,166],{"class":165},"sfazB"," add",[156,168,169],{"class":165}," @maxnth\u002Fgestalt\n",[146,171,174],{"className":148,"code":172,"filename":173,"language":151,"meta":152,"style":152},"npm install @maxnth\u002Fgestalt\n","npm",[74,175,176],{"__ignoreMap":152},[156,177,178,180,183],{"class":158,"line":159},[156,179,173],{"class":162},[156,181,182],{"class":165}," install",[156,184,169],{"class":165},[146,186,189],{"className":148,"code":187,"filename":188,"language":151,"meta":152,"style":152},"yarn add @maxnth\u002Fgestalt\n","yarn",[74,190,191],{"__ignoreMap":152},[156,192,193,195,197],{"class":158,"line":159},[156,194,188],{"class":162},[156,196,166],{"class":165},[156,198,169],{"class":165},[146,200,203],{"className":148,"code":201,"filename":202,"language":151,"meta":152,"style":152},"bun add @maxnth\u002Fgestalt\n","bun",[74,204,205],{"__ignoreMap":152},[156,206,207,209,211],{"class":158,"line":159},[156,208,202],{"class":162},[156,210,166],{"class":165},[156,212,169],{"class":165},[63,214,215,216,219],{},"Requires ",[74,217,218],{},"vue >= 3.5",".",[67,221,223],{"id":222},"quick-start","Quick start",[63,225,226],{},"Drop a convenience component anywhere in your app:",[146,228,233],{"className":229,"code":230,"filename":231,"language":232,"meta":152,"style":152},"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","GradientAvatar.vue","vue",[74,234,235,252,280,290,297,307,344],{"__ignoreMap":152},[156,236,237,241,245,249],{"class":158,"line":159},[156,238,240],{"class":239},"sMK4o","\u003C",[156,242,244],{"class":243},"swJcz","script",[156,246,248],{"class":247},"spNyl"," setup",[156,250,251],{"class":239},">\n",[156,253,255,259,262,266,269,272,275,277],{"class":158,"line":254},2,[156,256,258],{"class":257},"s7zQu","import",[156,260,261],{"class":239}," {",[156,263,265],{"class":264},"sTEyZ"," GradientAvatar",[156,267,268],{"class":239}," }",[156,270,271],{"class":257}," from",[156,273,274],{"class":239}," '",[156,276,76],{"class":165},[156,278,279],{"class":239},"'\n",[156,281,283,286,288],{"class":158,"line":282},3,[156,284,285],{"class":239},"\u003C\u002F",[156,287,244],{"class":243},[156,289,251],{"class":239},[156,291,293],{"class":158,"line":292},4,[156,294,296],{"emptyLinePlaceholder":295},true,"\n",[156,298,300,302,305],{"class":158,"line":299},5,[156,301,240],{"class":239},[156,303,304],{"class":243},"template",[156,306,251],{"class":239},[156,308,310,313,315,318,321,324,327,329,332,334,336,339,341],{"class":158,"line":309},6,[156,311,312],{"class":239},"  \u003C",[156,314,18],{"class":243},[156,316,317],{"class":247}," seed",[156,319,320],{"class":239},"=",[156,322,323],{"class":239},"\"",[156,325,326],{"class":165},"jane@example.com",[156,328,323],{"class":239},[156,330,331],{"class":247}," :size",[156,333,320],{"class":239},[156,335,323],{"class":239},[156,337,338],{"class":165},"96",[156,340,323],{"class":239},[156,342,343],{"class":239}," \u002F>\n",[156,345,347,349,351],{"class":158,"line":346},7,[156,348,285],{"class":239},[156,350,304],{"class":243},[156,352,251],{"class":239},[146,354,357],{"className":229,"code":355,"filename":356,"language":232,"meta":152,"style":152},"\u003Cscript setup>\nimport { InitialsAvatar } from '@maxnth\u002Fgestalt'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CInitialsAvatar seed=\"Jane Doe\" :size=\"96\" mode=\"double\" \u002F>\n\u003C\u002Ftemplate>\n","InitialsAvatar.vue",[74,358,359,369,388,396,400,408,449],{"__ignoreMap":152},[156,360,361,363,365,367],{"class":158,"line":159},[156,362,240],{"class":239},[156,364,244],{"class":243},[156,366,248],{"class":247},[156,368,251],{"class":239},[156,370,371,373,375,378,380,382,384,386],{"class":158,"line":254},[156,372,258],{"class":257},[156,374,261],{"class":239},[156,376,377],{"class":264}," InitialsAvatar",[156,379,268],{"class":239},[156,381,271],{"class":257},[156,383,274],{"class":239},[156,385,76],{"class":165},[156,387,279],{"class":239},[156,389,390,392,394],{"class":158,"line":282},[156,391,285],{"class":239},[156,393,244],{"class":243},[156,395,251],{"class":239},[156,397,398],{"class":158,"line":292},[156,399,296],{"emptyLinePlaceholder":295},[156,401,402,404,406],{"class":158,"line":299},[156,403,240],{"class":239},[156,405,304],{"class":243},[156,407,251],{"class":239},[156,409,410,412,414,416,418,420,423,425,427,429,431,433,435,438,440,442,445,447],{"class":158,"line":309},[156,411,312],{"class":239},[156,413,22],{"class":243},[156,415,317],{"class":247},[156,417,320],{"class":239},[156,419,323],{"class":239},[156,421,422],{"class":165},"Jane Doe",[156,424,323],{"class":239},[156,426,331],{"class":247},[156,428,320],{"class":239},[156,430,323],{"class":239},[156,432,338],{"class":165},[156,434,323],{"class":239},[156,436,437],{"class":247}," mode",[156,439,320],{"class":239},[156,441,323],{"class":239},[156,443,444],{"class":165},"double",[156,446,323],{"class":239},[156,448,343],{"class":239},[156,450,451,453,455],{"class":158,"line":346},[156,452,285],{"class":239},[156,454,304],{"class":243},[156,456,251],{"class":239},[146,458,461],{"className":229,"code":459,"filename":460,"language":232,"meta":152,"style":152},"\u003Cscript setup>\nimport { IdenticonAvatar } from '@maxnth\u002Fgestalt'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CIdenticonAvatar seed=\"jane@example.com\" :size=\"96\" \u002F>\n\u003C\u002Ftemplate>\n","IdenticonAvatar.vue",[74,462,463,473,492,500,504,512,540],{"__ignoreMap":152},[156,464,465,467,469,471],{"class":158,"line":159},[156,466,240],{"class":239},[156,468,244],{"class":243},[156,470,248],{"class":247},[156,472,251],{"class":239},[156,474,475,477,479,482,484,486,488,490],{"class":158,"line":254},[156,476,258],{"class":257},[156,478,261],{"class":239},[156,480,481],{"class":264}," IdenticonAvatar",[156,483,268],{"class":239},[156,485,271],{"class":257},[156,487,274],{"class":239},[156,489,76],{"class":165},[156,491,279],{"class":239},[156,493,494,496,498],{"class":158,"line":282},[156,495,285],{"class":239},[156,497,244],{"class":243},[156,499,251],{"class":239},[156,501,502],{"class":158,"line":292},[156,503,296],{"emptyLinePlaceholder":295},[156,505,506,508,510],{"class":158,"line":299},[156,507,240],{"class":239},[156,509,304],{"class":243},[156,511,251],{"class":239},[156,513,514,516,518,520,522,524,526,528,530,532,534,536,538],{"class":158,"line":309},[156,515,312],{"class":239},[156,517,26],{"class":243},[156,519,317],{"class":247},[156,521,320],{"class":239},[156,523,323],{"class":239},[156,525,326],{"class":165},[156,527,323],{"class":239},[156,529,331],{"class":247},[156,531,320],{"class":239},[156,533,323],{"class":239},[156,535,338],{"class":165},[156,537,323],{"class":239},[156,539,343],{"class":239},[156,541,542,544,546],{"class":158,"line":346},[156,543,285],{"class":239},[156,545,304],{"class":243},[156,547,251],{"class":239},[146,549,552],{"className":229,"code":550,"filename":551,"language":232,"meta":152,"style":152},"\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","FlowFieldAvatar.vue",[74,553,554,564,583,591,595,603,631],{"__ignoreMap":152},[156,555,556,558,560,562],{"class":158,"line":159},[156,557,240],{"class":239},[156,559,244],{"class":243},[156,561,248],{"class":247},[156,563,251],{"class":239},[156,565,566,568,570,573,575,577,579,581],{"class":158,"line":254},[156,567,258],{"class":257},[156,569,261],{"class":239},[156,571,572],{"class":264}," FlowFieldAvatar",[156,574,268],{"class":239},[156,576,271],{"class":257},[156,578,274],{"class":239},[156,580,76],{"class":165},[156,582,279],{"class":239},[156,584,585,587,589],{"class":158,"line":282},[156,586,285],{"class":239},[156,588,244],{"class":243},[156,590,251],{"class":239},[156,592,593],{"class":158,"line":292},[156,594,296],{"emptyLinePlaceholder":295},[156,596,597,599,601],{"class":158,"line":299},[156,598,240],{"class":239},[156,600,304],{"class":243},[156,602,251],{"class":239},[156,604,605,607,609,611,613,615,617,619,621,623,625,627,629],{"class":158,"line":309},[156,606,312],{"class":239},[156,608,30],{"class":243},[156,610,317],{"class":247},[156,612,320],{"class":239},[156,614,323],{"class":239},[156,616,326],{"class":165},[156,618,323],{"class":239},[156,620,331],{"class":247},[156,622,320],{"class":239},[156,624,323],{"class":239},[156,626,338],{"class":165},[156,628,323],{"class":239},[156,630,343],{"class":239},[156,632,633,635,637],{"class":158,"line":346},[156,634,285],{"class":239},[156,636,304],{"class":243},[156,638,251],{"class":239},[67,640,642],{"id":641},"next-steps","Next steps",[83,644,645,652,661,669,677,684,698],{},[86,646,647,648,219],{},"Browse every component, variant, and interactive control in ",[649,650,651],"storybook-link",{},"Storybook",[86,653,654,655,660],{},"Explore the ",[656,657,659],"a",{"href":658},"\u002Fdocs\u002Fcomponents\u002Fgradient-avatar","gradient avatar"," for mesh-gradient profile pictures.",[86,662,663,664,668],{},"Try the ",[656,665,667],{"href":666},"\u002Fdocs\u002Fcomponents\u002Fflow-field-avatar","flow-field avatar"," for plotter-style generative lines.",[86,670,671,672,676],{},"Use the ",[656,673,675],{"href":674},"\u002Fdocs\u002Fcomponents\u002Finitials-avatar","initials avatar"," for classic placeholder avatars.",[86,678,663,679,683],{},[656,680,682],{"href":681},"\u002Fdocs\u002Fcomponents\u002Fidenticon-avatar","identicon avatar"," for GitHub-style geometric avatars.",[86,685,686,687,693,694,219],{},"Learn about the low-level ",[656,688,690,692],{"href":689},"\u002Fdocs\u002Fcomponents\u002Favatar",[74,691,123],{}," component"," and how to write a ",[656,695,697],{"href":696},"\u002Fdocs\u002Fcustom-algorithm","custom algorithm",[86,699,700,701,219],{},"Export avatars as data URLs or Blobs with the ",[656,702,704],{"href":703},"\u002Fdocs\u002Fengine","engine helpers",[706,707,708],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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}",{"title":152,"searchDepth":282,"depth":282,"links":710},[711,712,713,714,715],{"id":69,"depth":254,"text":70},{"id":80,"depth":254,"text":81},{"id":139,"depth":254,"text":140},{"id":222,"depth":254,"text":223},{"id":641,"depth":254,"text":642},"md",{},{"title":5,"description":65},"k5Qtp3GgH4VAKEPYW-BByfBHIK6s4QcpLWTbUPXMTZ0",[721,722],null,{"title":14,"path":15,"stem":16,"description":723,"children":-1},"The low-level \u003CAvatar> component lets you swap rendering algorithms or plug in your own.",1784287256092]