[{"data":1,"prerenderedAt":689},["ShallowReactive",2],{"navigation":3,"\u002Fopen-source\u002Fparticle-canvas":18,"\u002Fopen-source\u002Fparticle-canvas-surround":685},[4],{"title":5,"path":6,"stem":7,"children":8,"page":17},"Open Source","\u002Fopen-source","open-source",[9,13],{"title":10,"path":11,"stem":12},"Crisp","\u002Fopen-source\u002Fcrisp","open-source\u002Fcrisp",{"title":14,"path":15,"stem":16},"@weburz\u002Fparticle-canvas","\u002Fopen-source\u002Fparticle-canvas","open-source\u002Fparticle-canvas",false,{"id":19,"title":14,"body":20,"description":666,"extension":667,"icon":668,"links":669,"meta":678,"navigation":165,"path":15,"seo":679,"stem":16,"tags":680,"__hash__":684},"openSource\u002Fopen-source\u002Fparticle-canvas.md",{"type":21,"value":22,"toc":659},"minimark",[23,34,44,49,52,78,82,98,258,262,265,541,551,555,636,642,646,656],[24,25,26,29,30,33],"p",{},[27,28,14],"code",{}," is a Nuxt 4 module that ships a drop-in\n",[27,31,32],{},"\u003CParticleCanvas \u002F>"," component for animated linked-particle backgrounds. Zero\nruntime dependencies, ~10 KB unminified (~3 KB gzipped), TypeScript-first.",[35,36,37],"blockquote",{},[24,38,39,43],{},[40,41,42],"strong",{},"Status: experimental."," Pre-1.0 — the API may shift between minor releases.",[45,46,48],"h2",{"id":47},"why-it-exists","Why it exists",[24,50,51],{},"Every marketing site we build ends up wanting a particle-y hero background.\nWe wanted something small, Nuxt-native, and SSR-safe — so we wrote one,\noptimized for the way we ship sites.",[53,54,55,62,65,72,75],"ul",{},[56,57,58,59,61],"li",{},"Auto-imported ",[27,60,32],{}," component",[56,63,64],{},"Zero runtime dependencies",[56,66,67,68,71],{},"SSR-safe — the engine runs only in the browser via a ",[27,69,70],{},"window"," guard",[56,73,74],{},"Linked-line constellations, hover\u002Fclick interactions, density-aware scaling",[56,76,77],{},"First-class TypeScript types",[45,79,81],{"id":80},"install","Install",[83,84,89],"pre",{"className":85,"code":86,"language":87,"meta":88,"style":88},"language-sh shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add @weburz\u002Fparticle-canvas\n","sh","",[27,90,91],{"__ignoreMap":88},[92,93,96],"span",{"class":94,"line":95},"line",1,[92,97,86],{},[83,99,103],{"className":100,"code":101,"language":102,"meta":88,"style":88},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: [\"@weburz\u002Fparticle-canvas\"],\n\n  particleCanvas: {\n    defaults: {\n      count: 100,\n      color: [\"#a3c4e0\", \"#ffd86b\"],\n    },\n  },\n});\n","ts",[27,104,105,111,133,160,167,178,188,202,234,240,246],{"__ignoreMap":88},[92,106,107],{"class":94,"line":95},[92,108,110],{"class":109},"sHwdD","\u002F\u002F nuxt.config.ts\n",[92,112,114,118,121,125,129],{"class":94,"line":113},2,[92,115,117],{"class":116},"s7zQu","export",[92,119,120],{"class":116}," default",[92,122,124],{"class":123},"s2Zo4"," defineNuxtConfig",[92,126,128],{"class":127},"sTEyZ","(",[92,130,132],{"class":131},"sMK4o","{\n",[92,134,136,140,143,146,149,152,154,157],{"class":94,"line":135},3,[92,137,139],{"class":138},"swJcz","  modules",[92,141,142],{"class":131},":",[92,144,145],{"class":127}," [",[92,147,148],{"class":131},"\"",[92,150,14],{"class":151},"sfazB",[92,153,148],{"class":131},[92,155,156],{"class":127},"]",[92,158,159],{"class":131},",\n",[92,161,163],{"class":94,"line":162},4,[92,164,166],{"emptyLinePlaceholder":165},true,"\n",[92,168,170,173,175],{"class":94,"line":169},5,[92,171,172],{"class":138},"  particleCanvas",[92,174,142],{"class":131},[92,176,177],{"class":131}," {\n",[92,179,181,184,186],{"class":94,"line":180},6,[92,182,183],{"class":138},"    defaults",[92,185,142],{"class":131},[92,187,177],{"class":131},[92,189,191,194,196,200],{"class":94,"line":190},7,[92,192,193],{"class":138},"      count",[92,195,142],{"class":131},[92,197,199],{"class":198},"sbssI"," 100",[92,201,159],{"class":131},[92,203,205,208,210,212,214,217,219,222,225,228,230,232],{"class":94,"line":204},8,[92,206,207],{"class":138},"      color",[92,209,142],{"class":131},[92,211,145],{"class":127},[92,213,148],{"class":131},[92,215,216],{"class":151},"#a3c4e0",[92,218,148],{"class":131},[92,220,221],{"class":131},",",[92,223,224],{"class":131}," \"",[92,226,227],{"class":151},"#ffd86b",[92,229,148],{"class":131},[92,231,156],{"class":127},[92,233,159],{"class":131},[92,235,237],{"class":94,"line":236},9,[92,238,239],{"class":131},"    },\n",[92,241,243],{"class":94,"line":242},10,[92,244,245],{"class":131},"  },\n",[92,247,249,252,255],{"class":94,"line":248},11,[92,250,251],{"class":131},"}",[92,253,254],{"class":127},")",[92,256,257],{"class":131},";\n",[45,259,261],{"id":260},"usage","Usage",[24,263,264],{},"Drop the component anywhere — it auto-imports:",[83,266,270],{"className":267,"code":268,"language":269,"meta":88,"style":88},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv class=\"hero\">\n    \u003CParticleCanvas\n      :config=\"{\n        count: 150,\n        linked: {\n          enable: true,\n          distance: 140,\n          color: '#a3c4e0',\n          width: 1,\n          opacity: 0.4,\n        },\n      }\"\n    \u002F>\n    \u003Ch1>Hello\u003C\u002Fh1>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.hero {\n  position: relative;\n  height: 100vh;\n}\n.hero > :first-child {\n  position: absolute;\n  inset: 0;\n}\n\u003C\u002Fstyle>\n","vue",[27,271,272,283,307,315,326,331,336,341,346,351,356,361,367,376,382,403,413,422,427,440,451,465,478,484,502,514,527,532],{"__ignoreMap":88},[92,273,274,277,280],{"class":94,"line":95},[92,275,276],{"class":131},"\u003C",[92,278,279],{"class":138},"template",[92,281,282],{"class":131},">\n",[92,284,285,288,291,295,298,300,303,305],{"class":94,"line":113},[92,286,287],{"class":131},"  \u003C",[92,289,290],{"class":138},"div",[92,292,294],{"class":293},"spNyl"," class",[92,296,297],{"class":131},"=",[92,299,148],{"class":131},[92,301,302],{"class":151},"hero",[92,304,148],{"class":131},[92,306,282],{"class":131},[92,308,309,312],{"class":94,"line":135},[92,310,311],{"class":131},"    \u003C",[92,313,314],{"class":138},"ParticleCanvas\n",[92,316,317,320,322,324],{"class":94,"line":162},[92,318,319],{"class":293},"      :config",[92,321,297],{"class":131},[92,323,148],{"class":131},[92,325,132],{"class":151},[92,327,328],{"class":94,"line":169},[92,329,330],{"class":151},"        count: 150,\n",[92,332,333],{"class":94,"line":180},[92,334,335],{"class":151},"        linked: {\n",[92,337,338],{"class":94,"line":190},[92,339,340],{"class":151},"          enable: true,\n",[92,342,343],{"class":94,"line":204},[92,344,345],{"class":151},"          distance: 140,\n",[92,347,348],{"class":94,"line":236},[92,349,350],{"class":151},"          color: '#a3c4e0',\n",[92,352,353],{"class":94,"line":242},[92,354,355],{"class":151},"          width: 1,\n",[92,357,358],{"class":94,"line":248},[92,359,360],{"class":151},"          opacity: 0.4,\n",[92,362,364],{"class":94,"line":363},12,[92,365,366],{"class":151},"        },\n",[92,368,370,373],{"class":94,"line":369},13,[92,371,372],{"class":151},"      }",[92,374,375],{"class":131},"\"\n",[92,377,379],{"class":94,"line":378},14,[92,380,381],{"class":131},"    \u002F>\n",[92,383,385,387,390,393,396,399,401],{"class":94,"line":384},15,[92,386,311],{"class":131},[92,388,389],{"class":138},"h1",[92,391,392],{"class":131},">",[92,394,395],{"class":127},"Hello",[92,397,398],{"class":131},"\u003C\u002F",[92,400,389],{"class":138},[92,402,282],{"class":131},[92,404,406,409,411],{"class":94,"line":405},16,[92,407,408],{"class":131},"  \u003C\u002F",[92,410,290],{"class":138},[92,412,282],{"class":131},[92,414,416,418,420],{"class":94,"line":415},17,[92,417,398],{"class":131},[92,419,279],{"class":138},[92,421,282],{"class":131},[92,423,425],{"class":94,"line":424},18,[92,426,166],{"emptyLinePlaceholder":165},[92,428,430,432,435,438],{"class":94,"line":429},19,[92,431,276],{"class":131},[92,433,434],{"class":138},"style",[92,436,437],{"class":293}," scoped",[92,439,282],{"class":131},[92,441,443,446,449],{"class":94,"line":442},20,[92,444,445],{"class":131},".",[92,447,302],{"class":448},"sBMFI",[92,450,177],{"class":131},[92,452,454,458,460,463],{"class":94,"line":453},21,[92,455,457],{"class":456},"sqsOY","  position",[92,459,142],{"class":131},[92,461,462],{"class":127}," relative",[92,464,257],{"class":131},[92,466,468,471,473,476],{"class":94,"line":467},22,[92,469,470],{"class":456},"  height",[92,472,142],{"class":131},[92,474,475],{"class":198}," 100vh",[92,477,257],{"class":131},[92,479,481],{"class":94,"line":480},23,[92,482,483],{"class":131},"}\n",[92,485,487,489,491,494,497,500],{"class":94,"line":486},24,[92,488,445],{"class":131},[92,490,302],{"class":448},[92,492,493],{"class":131}," >",[92,495,496],{"class":131}," :",[92,498,499],{"class":293},"first-child",[92,501,177],{"class":131},[92,503,505,507,509,512],{"class":94,"line":504},25,[92,506,457],{"class":456},[92,508,142],{"class":131},[92,510,511],{"class":127}," absolute",[92,513,257],{"class":131},[92,515,517,520,522,525],{"class":94,"line":516},26,[92,518,519],{"class":456},"  inset",[92,521,142],{"class":131},[92,523,524],{"class":198}," 0",[92,526,257],{"class":131},[92,528,530],{"class":94,"line":529},27,[92,531,483],{"class":131},[92,533,535,537,539],{"class":94,"line":534},28,[92,536,398],{"class":131},[92,538,434],{"class":138},[92,540,282],{"class":131},[24,542,543,544,546,547,550],{},"The composable short-circuits when ",[27,545,70],{}," is undefined, so the engine never\nexecutes during SSR. The ",[27,548,549],{},"\u003Ccanvas>"," element renders identically on server and\nclient — no hydration mismatch.",[45,552,554],{"id":553},"module-options","Module options",[556,557,558,577],"table",{},[559,560,561],"thead",{},[562,563,564,568,571,574],"tr",{},[565,566,567],"th",{},"Option",[565,569,570],{},"Type",[565,572,573],{},"Default",[565,575,576],{},"Description",[578,579,580,609],"tbody",{},[562,581,582,588,593,598],{},[583,584,585],"td",{},[27,586,587],{},"defaults",[583,589,590],{},[27,591,592],{},"ParticleConfig",[583,594,595],{},[27,596,597],{},"{}",[583,599,600,601,604,605,608],{},"Config applied when ",[27,602,603],{},"\u003CParticleCanvas>"," is rendered without a ",[27,606,607],{},"config"," prop",[562,610,611,616,621,626],{},[583,612,613],{},[27,614,615],{},"prefix",[583,617,618],{},[27,619,620],{},"string",[583,622,623],{},[27,624,625],{},"\"\"",[583,627,628,629,632,633],{},"Component name prefix, e.g. ",[27,630,631],{},"\"Weburz\""," → ",[27,634,635],{},"\u003CWeburzParticleCanvas>",[24,637,638,639,641],{},"Full ",[27,640,592],{}," reference lives in the repo README — see below.",[45,643,645],{"id":644},"source","Source",[24,647,648,655],{},[649,650,654],"a",{"href":651,"rel":652},"https:\u002F\u002Fgithub.com\u002FWeburz\u002Fparticle-canvas",[653],"nofollow","github.com\u002FWeburz\u002Fparticle-canvas"," — MIT licensed.",[434,657,658],{},"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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}",{"title":88,"searchDepth":95,"depth":113,"links":660},[661,662,663,664,665],{"id":47,"depth":113,"text":48},{"id":80,"depth":113,"text":81},{"id":260,"depth":113,"text":261},{"id":553,"depth":113,"text":554},{"id":644,"depth":113,"text":645},"Zero-dependency animated particle canvas for Nuxt 4 — drop-in \u003CParticleCanvas \u002F> component, ~10 KB.","md","i-simple-icons-nuxt",[670,674],{"label":671,"icon":672,"to":651,"target":673},"GitHub","i-simple-icons-github","_blank",{"label":675,"icon":676,"to":677,"target":673},"npm","i-simple-icons-npm","https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@weburz\u002Fparticle-canvas",{},{"title":14,"description":666},[681,682,683],"Nuxt","TypeScript","Canvas","j4w1YBLHRGVS2F1l_a8E4d76ZEHQTb5ehd3tb2fGEzg",[686,688],{"title":10,"path":11,"stem":12,"description":687,"children":-1},"A no-nonsense Conventional Commits linter for Git, written in Go. Single binary, no Node required.",null,1779552213643]