[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"github-stars":3,"guide-nav":5,"doc-\u002Fdocs\u002Fguide\u002Fcli":129},{"stars":4},5396,[6,11,15,19,23,27,31,35,39,43,47,51,55,59,63,67,72,76,80,84,88,93,97,101,105,109,113,117,121,125],{"path":7,"title":8,"description":9,"category":10},"\u002Fdocs\u002Fguide","Getting started","Shaders is a library of GPU effect components for Vue, React, Svelte, Solid, JavaScript and Framer, with a design editor for building with them.","code",{"path":12,"title":13,"description":14,"category":10},"\u002Fdocs\u002Fguide\u002Fquickstart","Quickstart","Install Shaders, render your first effect, and drive a prop from state.",{"path":16,"title":17,"description":18,"category":10},"\u002Fdocs\u002Fguide\u002Fcomposing-effects","Composing effects","Stack components as layers and nest them to control which layers an effect touches.",{"path":20,"title":21,"description":22,"category":10},"\u002Fdocs\u002Fguide\u002Fblending-masking","Blending and masking","Control how a layer mixes with the layers below it, and reveal one layer through another.",{"path":24,"title":25,"description":26,"category":10},"\u002Fdocs\u002Fguide\u002Fprops-reactivity","Props and reactivity","Bind props to your framework's state so effects update when it changes, and animate props with an animation library.",{"path":28,"title":29,"description":30,"category":10},"\u002Fdocs\u002Fguide\u002Fdynamic-props","Dynamic props","Drive any numeric or position prop from time, the cursor, or another layer, without writing animation code.",{"path":32,"title":33,"description":34,"category":10},"\u002Fdocs\u002Fguide\u002Flayout-positioning","Layout and positioning","Size and place a shader in your page with CSS, as a background, a fill, or an inline block.",{"path":36,"title":37,"description":38,"category":10},"\u002Fdocs\u002Fguide\u002Fsizing-and-units","Sizing and units","Size and place layers in CSS units (px, %, vw, rem, and canvas units) that stay correct as the canvas and window resize.",{"path":40,"title":41,"description":42,"category":10},"\u002Fdocs\u002Fguide\u002Ftransforms","Transforms","Position, size, and rotate any layer inside the canvas with a bounding box, in any CSS unit.",{"path":44,"title":45,"description":46,"category":10},"\u002Fdocs\u002Fguide\u002Fshape-effects","Shape effects","Pick the 2D, 3D or custom SVG shape that Glass, Neon, Emboss and other shape effects draw inside.",{"path":48,"title":49,"description":50,"category":10},"\u002Fdocs\u002Fguide\u002Fcolor-space","Color space","Match colors to your design tool with the output color space, and keep bright layers from clipping with tone mapping.",{"path":52,"title":53,"description":54,"category":10},"\u002Fdocs\u002Fguide\u002Fhooks-events","Hooks and events","Run code when an effect is ready to show, and show a fallback when the GPU can't run it.",{"path":56,"title":57,"description":58,"category":10},"\u002Fdocs\u002Fguide\u002Fperformance","Performance","Learn what makes an effect expensive on the GPU and how to keep it inside the frame budget.",{"path":60,"title":61,"description":62,"category":10},"\u002Fdocs\u002Fguide\u002Fcustom-shaders","Custom components","Write your own component in TypeScript, use it like any component in the library, and write WGSL by hand when you need to.",{"path":64,"title":65,"description":66,"category":10},"\u002Fdocs\u002Fguide\u002Ftelemetry","Telemetry","The `\u003CShader>` component occasionally sends an anonymous performance report to help us improve the engine over time.",{"path":68,"title":69,"description":70,"category":71},"\u002Fdocs\u002Fguide\u002Fmcp","Shaders MCP","Connect your AI coding agent to Shaders so it can find, install and edit effects in your codebase.","workflows",{"path":73,"title":74,"description":75,"category":71},"\u002Fdocs\u002Fguide\u002Fcli","Shaders CLI","Install your own shaders and Pro shaders into your codebase as component files, and keep them in sync with the design editor.",{"path":77,"title":78,"description":79,"category":71},"\u002Fdocs\u002Fguide\u002Fagent-skill","Agent skill","Give your coding agent a skill that teaches it to build with Shaders components, the CLI and Pro shaders.",{"path":81,"title":82,"description":83,"category":10},"\u002Fdocs\u002Fguide\u002Fvideo-rendering","Rendering to video","Turn a shader effect into a video file, from the design editor or from a frame-by-frame pipeline such as Remotion, Hyperframes or Puppeteer.",{"path":85,"title":86,"description":87,"category":10},"\u002Fdocs\u002Fguide\u002Fssr","Server rendering","Render Shaders in Next.js, Nuxt, SvelteKit, SolidStart and other SSR apps by keeping each shader on the client.",{"path":89,"title":90,"description":91,"category":92},"\u002Fdocs\u002Fguide\u002Fquick-tour-of-the-design-editor","Quick tour of the design editor","A short walkthrough of the full Shaders workflow, from designing on the infinite canvas to exporting code.","editor",{"path":94,"title":95,"description":96,"category":92},"\u002Fdocs\u002Fguide\u002Fintro-to-the-interface","Intro to the interface","A tour of the design editor interface: the canvas, layers, the Properties panel, and the ways to share and export.",{"path":98,"title":99,"description":100,"category":92},"\u002Fdocs\u002Fguide\u002Fcomposing-your-first-shader-effect","Composing your first shader effect","Building a first shader effect in the design editor by stacking and nesting components as layers.",{"path":102,"title":103,"description":104,"category":92},"\u002Fdocs\u002Fguide\u002Fmasking-and-blending","Masking and blending","How blend modes and masks combine components in the design editor.",{"path":106,"title":107,"description":108,"category":92},"\u002Fdocs\u002Fguide\u002Fdynamic-prop-mapping","Dynamic prop mapping","Turning static props into dynamic ones in the design editor: mapping one layer's output into another's prop, following the cursor, or animating automatically.",{"path":110,"title":111,"description":112,"category":92},"\u002Fdocs\u002Fguide\u002Fcustom-media-and-transformations","Custom media and transformations","Uploading images, videos, and SVG files to the media gallery, adding them to a composition, and placing them with transformations.",{"path":114,"title":115,"description":116,"category":92},"\u002Fdocs\u002Fguide\u002Finstalling-a-shader-via-mcp","Installing a shader via MCP","Installing a shader from the design editor into a hero section with the Shaders MCP.",{"path":118,"title":119,"description":120,"category":92},"\u002Fdocs\u002Fguide\u002Fexploring-shape-effects","Exploring shape effects","Applying shape effects such as liquid glass, liquid metal, and glowing edges to built-in shapes and your own SVG.",{"path":122,"title":123,"description":124,"category":92},"\u002Fdocs\u002Fguide\u002Fglass-component-spotlight","Component spotlight: Glass","A short look at the Glass component and the liquid-glass look it creates.",{"path":126,"title":127,"description":128,"category":92},"\u002Fdocs\u002Fguide\u002Fdigital-looks-component-spotlight","Component spotlight: Digital looks","A look at the digital stylization components for glitchy, futuristic, or technical effects.",{"id":130,"title":74,"body":131,"category":71,"description":75,"extension":1253,"icon":1254,"meta":1255,"navigation":283,"path":73,"seo":1256,"stem":1257,"__hash__":1258},"guide\u002Fdocs\u002Fguide\u002F16.cli.md",{"type":132,"value":133,"toc":1237},"minimark",[134,138,141,144,150,157,179,182,188,216,221,228,241,256,349,368,383,389,445,454,458,461,521,531,537,542,550,579,585,588,608,615,619,625,662,669,695,702,706,711,741,752,761,765,768,782,786,789,812,823,827,834,837,840,863,866,870,881,904,908,1036,1163,1167,1177,1190,1198,1204,1208,1233],[135,136,74],"h1",{"id":137},"shaders-cli",[139,140,75],"p",{},[139,142,143],{},"The CLI works with any Shaders account for the shaders you save yourself. Installing shaders from the library requires Shaders Pro.",[139,145,146],{},[147,148],"img",{"alt":74,"src":149},"\u002Fimages\u002Fupdates\u002Fcli.png",[139,151,152,153,156],{},"Every command runs through ",[10,154,155],{},"npx shaders",", so there's nothing to install globally. Run it bare for the guided flow:",[158,159,164],"pre",{"className":160,"code":161,"language":162,"meta":163,"style":163},"language-bash shiki shiki-themes github-dark","npx shaders\n","bash","",[10,165,166],{"__ignoreMap":163},[167,168,171,175],"span",{"class":169,"line":170},"line",1,[167,172,174],{"class":173},"svObZ","npx",[167,176,178],{"class":177},"sU2Wk"," shaders\n",[139,180,181],{},"It reads your project first and shows what it found: the framework, whether this codebase is connected to a Shaders project, how many shaders are installed and whether any changed in the editor, and whether the agent skill and MCP are in place. On a fresh project it installs the package and writes the config before asking anything. Then one question: find a library shader to drop in, install a shader from your project, open the design editor, install the agent skill, or install the MCP. Searching, the skill and the MCP never ask you to sign in. Opening the editor does, since it connects this codebase to a project you own.",[139,183,184,185,187],{},"In a script or CI, bare ",[10,186,155],{}," prints the help instead. Two commands connect a project and install a library shader:",[158,189,191],{"className":160,"code":190,"language":162,"meta":163,"style":163},"npx shaders connect\nnpx shaders install offsets-1\n",[10,192,193,203],{"__ignoreMap":163},[167,194,195,197,200],{"class":169,"line":170},[167,196,174],{"class":173},[167,198,199],{"class":177}," shaders",[167,201,202],{"class":177}," connect\n",[167,204,206,208,210,213],{"class":169,"line":205},2,[167,207,174],{"class":173},[167,209,199],{"class":177},[167,211,212],{"class":177}," install",[167,214,215],{"class":177}," offsets-1\n",[217,218,220],"h2",{"id":219},"setting-up-a-project","Setting up a project",[139,222,223,224,227],{},"Run ",[10,225,226],{},"connect"," once inside your project:",[158,229,231],{"className":160,"code":230,"language":162,"meta":163,"style":163},"npx shaders connect\n",[10,232,233],{"__ignoreMap":163},[167,234,235,237,239],{"class":169,"line":170},[167,236,174],{"class":173},[167,238,199],{"class":177},[167,240,202],{"class":177},[139,242,243,244,247,248,251,252,255],{},"It detects your framework from ",[10,245,246],{},"package.json"," (Next.js, Nuxt, SvelteKit, SolidStart, Remix, Astro, Vite and plain React, Vue, Svelte or Solid). It then adds the ",[10,249,250],{},"shaders"," package with the project's package manager and writes a ",[10,253,254],{},"shaders.config.ts",":",[158,257,261],{"className":258,"code":259,"language":260,"meta":163,"style":163},"language-ts shiki shiki-themes github-dark","import { defineConfig } from 'shaders\u002Fconfig'\n\nexport default defineConfig({\n  framework: 'react',\n  project: '4a1e…',                 \u002F\u002F the Shaders project this codebase is connected to\n  outDir: 'src\u002Fcomponents\u002Fshaders', \u002F\u002F where installed components land\n})\n","ts",[10,262,263,279,285,300,312,328,343],{"__ignoreMap":163},[167,264,265,269,273,276],{"class":169,"line":170},[167,266,268],{"class":267},"snl16","import",[167,270,272],{"class":271},"s95oV"," { defineConfig } ",[167,274,275],{"class":267},"from",[167,277,278],{"class":177}," 'shaders\u002Fconfig'\n",[167,280,281],{"class":169,"line":205},[167,282,284],{"emptyLinePlaceholder":283},true,"\n",[167,286,288,291,294,297],{"class":169,"line":287},3,[167,289,290],{"class":267},"export",[167,292,293],{"class":267}," default",[167,295,296],{"class":173}," defineConfig",[167,298,299],{"class":271},"({\n",[167,301,303,306,309],{"class":169,"line":302},4,[167,304,305],{"class":271},"  framework: ",[167,307,308],{"class":177},"'react'",[167,310,311],{"class":271},",\n",[167,313,315,318,321,324],{"class":169,"line":314},5,[167,316,317],{"class":271},"  project: ",[167,319,320],{"class":177},"'4a1e…'",[167,322,323],{"class":271},",                 ",[167,325,327],{"class":326},"sAwPA","\u002F\u002F the Shaders project this codebase is connected to\n",[167,329,331,334,337,340],{"class":169,"line":330},6,[167,332,333],{"class":271},"  outDir: ",[167,335,336],{"class":177},"'src\u002Fcomponents\u002Fshaders'",[167,338,339],{"class":271},", ",[167,341,342],{"class":326},"\u002F\u002F where installed components land\n",[167,344,346],{"class":169,"line":345},7,[167,347,348],{"class":271},"})\n",[139,350,351,352,354,355,359,360,363,364,367],{},"Next, ",[10,353,226],{}," opens your browser to sign in and asks which Shaders project this codebase belongs to. Pick an existing one or create a new one. A ",[356,357,358],"strong",{},"project"," is a canvas in the design editor that holds any number of shaders. Connecting one tells ",[10,361,362],{},"install"," and ",[10,365,366],{},"update"," where to look.",[139,369,370,371,373,374,378,379,382],{},"Last, ",[10,372,226],{}," adds the ",[375,376,377],"a",{"href":77},"Shaders agent skill"," to the coding agents it finds in your project, so they know the component library and these commands. Pass ",[10,380,381],{},"--no-skill"," to leave it out.",[139,384,385,388],{},[10,386,387],{},"outDir"," follows your framework's conventions, and you can change it any time:",[390,391,392,407,415,423],"ul",{},[393,394,395,398,399,402,403,406],"li",{},[356,396,397],{},"Nuxt",": ",[10,400,401],{},"components\u002Fshaders",", so files auto-import as ",[10,404,405],{},"\u003CShadersName \u002F>",".",[393,408,409,398,412,406],{},[356,410,411],{},"SvelteKit",[10,413,414],{},"src\u002Flib\u002Fcomponents\u002Fshaders",[393,416,417,398,420,406],{},[356,418,419],{},"Remix and React Router",[10,421,422],{},"app\u002Fcomponents\u002Fshaders",[393,424,425,398,428,431,432,435,436,438,439,442,443,406],{},[356,426,427],{},"Everything else",[10,429,430],{},"src\u002Fcomponents\u002Fshaders",". Without a ",[10,433,434],{},"src\u002F"," directory, ",[10,437,422],{}," if there's an ",[10,440,441],{},"app\u002F"," directory (except in Next.js), otherwise ",[10,444,401],{},[139,446,447,448,450,451,453],{},"You can skip ",[10,449,226],{},". Running ",[10,452,362],{}," in a project that hasn't been set up walks you through it.",[217,455,457],{"id":456},"installing-shaders","Installing shaders",[139,459,460],{},"Pass an id, a library shader's name, or nothing at all:",[158,462,464],{"className":160,"code":463,"language":162,"meta":163,"style":163},"npx shaders install              # pick from the shaders in your connected project\nnpx shaders install --all        # install every shader in the project\nnpx shaders install 4728995      # one of your saved shaders, by id\nnpx shaders i offsets-1          # a preset, by name (i is short for install)\n",[10,465,466,477,492,506],{"__ignoreMap":163},[167,467,468,470,472,474],{"class":169,"line":170},[167,469,174],{"class":173},[167,471,199],{"class":177},[167,473,212],{"class":177},[167,475,476],{"class":326},"              # pick from the shaders in your connected project\n",[167,478,479,481,483,485,489],{"class":169,"line":205},[167,480,174],{"class":173},[167,482,199],{"class":177},[167,484,212],{"class":177},[167,486,488],{"class":487},"sDLfK"," --all",[167,490,491],{"class":326},"        # install every shader in the project\n",[167,493,494,496,498,500,503],{"class":169,"line":287},[167,495,174],{"class":173},[167,497,199],{"class":177},[167,499,212],{"class":177},[167,501,502],{"class":487}," 4728995",[167,504,505],{"class":326},"      # one of your saved shaders, by id\n",[167,507,508,510,512,515,518],{"class":169,"line":302},[167,509,174],{"class":173},[167,511,199],{"class":177},[167,513,514],{"class":177}," i",[167,516,517],{"class":177}," offsets-1",[167,519,520],{"class":326},"          # a preset, by name (i is short for install)\n",[139,522,523,524,526,527,530],{},"Each install writes one component file into ",[10,525,387],{}," and records it in ",[10,528,529],{},"shaders.lock.json"," next to your config. The file holds the full component tree with every prop inline, the same code the editor's Export Code dialog produces. It's ordinary source you own: change the props, wire them to state, compose it with other effects.",[139,532,533,534,536],{},"The id of a saved shader is shown in the design editor's Export Code dialog. With no id, ",[10,535,362],{}," lists the shaders in your connected project and lets you choose.",[538,539,541],"h3",{"id":540},"installing-from-the-library","Installing from the library",[139,543,544,545,549],{},"Shaders from the ",[375,546,548],{"href":547},"\u002Fpro#browse","library"," install by name or by id. The name is the collection slug plus the variant number, as shown on each shader's page:",[158,551,553],{"className":160,"code":552,"language":162,"meta":163,"style":163},"npx shaders install offsets-1\nnpx shaders install offsets      # pick a variant\n",[10,554,555,565],{"__ignoreMap":163},[167,556,557,559,561,563],{"class":169,"line":170},[167,558,174],{"class":173},[167,560,199],{"class":177},[167,562,212],{"class":177},[167,564,215],{"class":177},[167,566,567,569,571,573,576],{"class":169,"line":205},[167,568,174],{"class":173},[167,570,199],{"class":177},[167,572,212],{"class":177},[167,574,575],{"class":177}," offsets",[167,577,578],{"class":326},"      # pick a variant\n",[139,580,581,582,584],{},"With Shaders Pro, the library shader is first added to your connected project as a saved shader, then installed from that copy. The file then tracks something you can open in the design editor, tweak, and pull back into your codebase with ",[10,583,366],{},". Installing the same library shader again refreshes that copy instead of adding another.",[139,586,587],{},"Without Pro, the CLI says the shader requires a subscription and offers three choices:",[390,589,590,596,602],{},[393,591,592,595],{},[356,593,594],{},"Get Pro",": opens the pricing page.",[393,597,598,601],{},[356,599,600],{},"Sign in",": use an existing account that has Pro (offered when you're signed out).",[393,603,604,607],{},[356,605,606],{},"Install a watermarked preview",": a small component that renders the shader live with a watermark, so you can see it in place.",[139,609,610,611,614],{},"Once your account has Pro, ",[10,612,613],{},"npx shaders update"," swaps the preview for the real component and adds the shader to your project. You don't need to reinstall.",[217,616,618],{"id":617},"searching-the-library","Searching the library",[139,620,621,622,624],{},"Describe the look you want and the CLI searches the shader library, the same index the ",[375,623,548],{"href":547}," uses:",[158,626,628],{"className":160,"code":627,"language":162,"meta":163,"style":163},"npx shaders search \"liquid chrome hero background\"\nnpx shaders search glass logo --limit 3\n",[10,629,630,642],{"__ignoreMap":163},[167,631,632,634,636,639],{"class":169,"line":170},[167,633,174],{"class":173},[167,635,199],{"class":177},[167,637,638],{"class":177}," search",[167,640,641],{"class":177}," \"liquid chrome hero background\"\n",[167,643,644,646,648,650,653,656,659],{"class":169,"line":205},[167,645,174],{"class":173},[167,647,199],{"class":177},[167,649,638],{"class":177},[167,651,652],{"class":177}," glass",[167,654,655],{"class":177}," logo",[167,657,658],{"class":487}," --limit",[167,660,661],{"class":487}," 3\n",[139,663,664,665,668],{},"Each result prints its name, a short description, how closely it matched, and a short link (",[10,666,667],{},"shaders.com\u002Fp\u002F\u003Cname>",") your terminal can open. A last link opens the library page filtered to the same search, with every result rendering live. Open one on shaders.com from the terminal, then install it:",[158,670,672],{"className":160,"code":671,"language":162,"meta":163,"style":163},"npx shaders preview offsets-1\nnpx shaders install offsets-1\n",[10,673,674,685],{"__ignoreMap":163},[167,675,676,678,680,683],{"class":169,"line":170},[167,677,174],{"class":173},[167,679,199],{"class":177},[167,681,682],{"class":177}," preview",[167,684,215],{"class":177},[167,686,687,689,691,693],{"class":169,"line":205},[167,688,174],{"class":173},[167,690,199],{"class":177},[167,692,212],{"class":177},[167,694,215],{"class":177},[139,696,697,698,701],{},"Searching is free and needs no sign-in. Pass ",[10,699,700],{},"--json"," to get the results as JSON, which is what a coding agent reads.",[217,703,705],{"id":704},"keeping-shaders-up-to-date","Keeping shaders up to date",[139,707,223,708,710],{},[10,709,366],{}," for every installed shader, or pass an id for one:",[158,712,714],{"className":160,"code":713,"language":162,"meta":163,"style":163},"npx shaders update               # refresh every installed shader\nnpx shaders update 4728995       # only that shader\n",[10,715,716,728],{"__ignoreMap":163},[167,717,718,720,722,725],{"class":169,"line":170},[167,719,174],{"class":173},[167,721,199],{"class":177},[167,723,724],{"class":177}," update",[167,726,727],{"class":326},"               # refresh every installed shader\n",[167,729,730,732,734,736,738],{"class":169,"line":205},[167,731,174],{"class":173},[167,733,199],{"class":177},[167,735,724],{"class":177},[167,737,502],{"class":487},[167,739,740],{"class":326},"       # only that shader\n",[139,742,743,745,746,749,750,406],{},[10,744,366],{}," fetches the current version of each installed shader and rewrites its file when the source changed in the editor. Files you've edited by hand are left alone and reported, so your changes are never silently overwritten. Pass ",[10,747,748],{},"--force"," to replace them anyway. The same flag works with ",[10,751,362],{},[139,753,754,755,757,758,760],{},"If a shader has been deleted from Shaders, ",[10,756,366],{}," says so and leaves the local file untouched. Remove its entry from ",[10,759,529],{}," to stop tracking it.",[217,762,764],{"id":763},"opening-the-editor","Opening the editor",[139,766,767],{},"Open your connected project in the design editor:",[158,769,771],{"className":160,"code":770,"language":162,"meta":163,"style":163},"npx shaders open\n",[10,772,773],{"__ignoreMap":163},[167,774,775,777,779],{"class":169,"line":170},[167,776,174],{"class":173},[167,778,199],{"class":177},[167,780,781],{"class":177}," open\n",[217,783,785],{"id":784},"signing-in","Signing in",[139,787,788],{},"Sign in or out explicitly with:",[158,790,792],{"className":160,"code":791,"language":162,"meta":163,"style":163},"npx shaders login\nnpx shaders logout\n",[10,793,794,803],{"__ignoreMap":163},[167,795,796,798,800],{"class":169,"line":170},[167,797,174],{"class":173},[167,799,199],{"class":177},[167,801,802],{"class":177}," login\n",[167,804,805,807,809],{"class":169,"line":205},[167,806,174],{"class":173},[167,808,199],{"class":177},[167,810,811],{"class":177}," logout\n",[139,813,814,815,818,819,822],{},"Sign-in happens in your browser and is stored in ",[10,816,817],{},"~\u002F.shaders\u002Fcredentials.json",", so you sign in once per machine. ",[10,820,821],{},"logout"," removes it.",[538,824,826],{"id":825},"using-the-cli-in-ci-and-agents","Using the CLI in CI and agents",[139,828,829,830,833],{},"Set ",[10,831,832],{},"SHADERS_API_KEY"," to a personal API key where there's no browser. Every command then uses the key instead of the browser flow. Any signed-in Shaders account can create keys here:",[835,836],"api-keys",{},[139,838,839],{},"Pass the key as an environment variable:",[158,841,843],{"className":160,"code":842,"language":162,"meta":163,"style":163},"SHADERS_API_KEY=your_api_key npx shaders update\n",[10,844,845],{"__ignoreMap":163},[167,846,847,849,852,855,858,860],{"class":169,"line":170},[167,848,832],{"class":271},[167,850,851],{"class":267},"=",[167,853,854],{"class":177},"your_api_key",[167,856,857],{"class":173}," npx",[167,859,199],{"class":177},[167,861,862],{"class":177}," update\n",[139,864,865],{},"Keep the key out of source control: it's tied to your account. You can revoke it from the same panel.",[217,867,869],{"id":868},"installing-the-mcp-server","Installing the MCP server",[139,871,872,873,876,877,880],{},"The CLI also installs the ",[375,874,875],{"href":68},"Shaders MCP server"," and the ",[375,878,879],{"href":77},"agent skill"," into your coding agents:",[158,882,884],{"className":160,"code":883,"language":162,"meta":163,"style":163},"npx shaders install-mcp\nnpx shaders skill\n",[10,885,886,895],{"__ignoreMap":163},[167,887,888,890,892],{"class":169,"line":170},[167,889,174],{"class":173},[167,891,199],{"class":177},[167,893,894],{"class":177}," install-mcp\n",[167,896,897,899,901],{"class":169,"line":205},[167,898,174],{"class":173},[167,900,199],{"class":177},[167,902,903],{"class":177}," skill\n",[217,905,907],{"id":906},"reference","Reference",[909,910,911,924],"table",{},[912,913,914],"thead",{},[915,916,917,921],"tr",{},[918,919,920],"th",{},"Command",[918,922,923],{},"What it does",[925,926,927,936,948,961,971,981,991,1001,1013,1026],"tbody",{},[915,928,929,933],{},[930,931,932],"td",{},"(none)",[930,934,935],{},"Guided flow in a terminal; help text when piped",[915,937,938,945],{},[930,939,940,339,942],{},[10,941,226],{},[10,943,944],{},"init",[930,946,947],{},"Detect the framework, install the package, write the config, connect a project",[915,949,950,958],{},[930,951,952,339,955],{},[10,953,954],{},"install [\u003Cref>...]",[10,956,957],{},"i",[930,959,960],{},"Install your shaders by id or library shaders by name. With no ref, opens a picker",[915,962,963,968],{},[930,964,965],{},[10,966,967],{},"search \u003Cquery>",[930,969,970],{},"Search the shader library by description",[915,972,973,978],{},[930,974,975],{},[10,976,977],{},"preview \u003Cname>",[930,979,980],{},"Open a library shader on shaders.com to see it running",[915,982,983,988],{},[930,984,985],{},[10,986,987],{},"update [\u003Cid>...]",[930,989,990],{},"Refresh installed shaders. Upgrades previews once you have Pro",[915,992,993,998],{},[930,994,995],{},[10,996,997],{},"open",[930,999,1000],{},"Open the connected project in the design editor",[915,1002,1003,1010],{},[930,1004,1005,339,1008],{},[10,1006,1007],{},"login",[10,1009,821],{},[930,1011,1012],{},"Manage the stored sign-in",[915,1014,1015,1023],{},[930,1016,1017,339,1020],{},[10,1018,1019],{},"install-mcp",[10,1021,1022],{},"uninstall-mcp",[930,1024,1025],{},"Add or remove the Shaders MCP server in coding agents",[915,1027,1028,1033],{},[930,1029,1030],{},[10,1031,1032],{},"skill",[930,1034,1035],{},"Add the Shaders agent skill to coding agents",[909,1037,1038,1051],{},[912,1039,1040],{},[915,1041,1042,1045,1048],{},[918,1043,1044],{},"Flag",[918,1046,1047],{},"Applies to",[918,1049,1050],{},"Effect",[925,1052,1053,1067,1082,1099,1115,1131,1150],{},[915,1054,1055,1060,1064],{},[930,1056,1057],{},[10,1058,1059],{},"--all",[930,1061,1062],{},[10,1063,362],{},[930,1065,1066],{},"Install every shader in the connected project without prompting",[915,1068,1069,1073,1079],{},[930,1070,1071],{},[10,1072,748],{},[930,1074,1075,339,1077],{},[10,1076,362],{},[10,1078,366],{},[930,1080,1081],{},"Overwrite files that exist or have local edits",[915,1083,1084,1091,1096],{},[930,1085,1086,339,1089],{},[10,1087,1088],{},"--limit \u003Cn>",[10,1090,700],{},[930,1092,1093],{},[10,1094,1095],{},"search",[930,1097,1098],{},"Cap the number of results, or print them as JSON",[915,1100,1101,1106,1112],{},[930,1102,1103],{},[10,1104,1105],{},"-p, --project \u003Cid>",[930,1107,1108,339,1110],{},[10,1109,226],{},[10,1111,362],{},[930,1113,1114],{},"Connect a specific project without prompting",[915,1116,1117,1122,1128],{},[930,1118,1119],{},[10,1120,1121],{},"-f, --framework \u003Cname>",[930,1123,1124,339,1126],{},[10,1125,226],{},[10,1127,362],{},[930,1129,1130],{},"Override framework detection",[915,1132,1133,1143,1147],{},[930,1134,1135,339,1138,339,1141],{},[10,1136,1137],{},"--no-auth",[10,1139,1140],{},"--no-install",[10,1142,381],{},[930,1144,1145],{},[10,1146,226],{},[930,1148,1149],{},"Skip the sign-in step, the package install, or the agent skill",[915,1151,1152,1157,1160],{},[930,1153,1154],{},[10,1155,1156],{},"-y, --yes",[930,1158,1159],{},"all",[930,1161,1162],{},"Never prompt",[217,1164,1166],{"id":1165},"troubleshooting","Troubleshooting",[139,1168,1169,1172,1173,1176],{},[356,1170,1171],{},"\"… requires a Shaders Pro subscription\"",": the shader is part of the Pro library. Choose an option from the menu, or run ",[10,1174,1175],{},"npx shaders login"," if you're signed in to the wrong account.",[139,1178,1179,1182,1183,1185,1186,1189],{},[356,1180,1181],{},"\"… has been deleted from Shaders\"",": the shader or project the command refers to no longer exists. Remove the shader from ",[10,1184,529],{},", or run ",[10,1187,1188],{},"npx shaders connect"," to pick a different project.",[139,1191,1192,1195,1196,406],{},[356,1193,1194],{},"\"… has local edits\"",": you changed the file since it was installed. The CLI won't overwrite it unless you pass ",[10,1197,748],{},[139,1199,1200,1203],{},[356,1201,1202],{},"Couldn't reach Shaders",": browser-based sandboxes such as StackBlitz route network calls through the browser, and can't open a sign-in tab for you. Copy the printed URL into a tab to sign in.",[217,1205,1207],{"id":1206},"next-steps","Next steps",[390,1209,1210,1215,1223,1228],{},[393,1211,1212,1214],{},[375,1213,69],{"href":68},": connect your coding agent so it can install and edit shaders for you.",[393,1216,1217,1219,1220,1222],{},[375,1218,78],{"href":77},": what ",[10,1221,226],{}," adds to your coding agents, and how to add it on its own.",[393,1224,1225,1227],{},[375,1226,29],{"href":28},": drive an installed shader's props from the mouse or animate them.",[393,1229,1230,1232],{},[375,1231,57],{"href":56},": what each layer costs and how to keep effects fast.",[1234,1235,1236],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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 pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}",{"title":163,"searchDepth":205,"depth":205,"links":1238},[1239,1240,1243,1244,1245,1246,1249,1250,1251,1252],{"id":219,"depth":205,"text":220},{"id":456,"depth":205,"text":457,"children":1241},[1242],{"id":540,"depth":287,"text":541},{"id":617,"depth":205,"text":618},{"id":704,"depth":205,"text":705},{"id":763,"depth":205,"text":764},{"id":784,"depth":205,"text":785,"children":1247},[1248],{"id":825,"depth":287,"text":826},{"id":868,"depth":205,"text":869},{"id":906,"depth":205,"text":907},{"id":1165,"depth":205,"text":1166},{"id":1206,"depth":205,"text":1207},"md","terminal",{},{"title":74,"description":75},"docs\u002Fguide\u002F16.cli","aTA0K_EanRqDtyQUdY-GfWl03DeifMfjS2Y4GI0OCyI"]