[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fchosenby":145},[4,10,16,20,24,28,32,36,40,44,48,52,56,60,64,69,73,78,82,86,90,94,98,102,106,110,114,117,120,124,127,131,134,138,141],{"path":5,"title":6,"description":7,"category":8,"exclude":9,"forceFramework":9},"\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",null,{"path":11,"title":12,"description":13,"category":8,"exclude":14,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fquickstart","Quickstart","Install Shaders, render your first effect, and drive a prop from state.",[15],"js",{"path":17,"title":18,"description":19,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcomposing-effects","Composing effects","Stack components as layers and nest them to control which layers an effect touches.",{"path":21,"title":22,"description":23,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fblending-masking","Blending and masking","Control how a layer mixes with the layers below it, and reveal one layer through another.",{"path":25,"title":26,"description":27,"category":8,"exclude":9,"forceFramework":9},"\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":29,"title":30,"description":31,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fdynamic-props","Dynamic props","Drive any numeric or position prop from time, the cursor, or another layer, without writing animation code.",{"path":33,"title":34,"description":35,"category":8,"exclude":9,"forceFramework":9},"\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":37,"title":38,"description":39,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Ftransforms","Transforms","Position, size, and rotate any layer inside the canvas with a bounding box, in % or px units.",{"path":41,"title":42,"description":43,"category":8,"exclude":9,"forceFramework":9},"\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":45,"title":46,"description":47,"category":8,"exclude":9,"forceFramework":9},"\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":49,"title":50,"description":51,"category":8,"exclude":9,"forceFramework":9},"\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":53,"title":54,"description":55,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fperformance","Performance","Learn what makes an effect expensive on the GPU and how to keep it inside the frame budget.",{"path":57,"title":58,"description":59,"category":8,"exclude":9,"forceFramework":9},"\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":61,"title":62,"description":63,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Ftelemetry","Telemetry","The `\u003CShader>` component occasionally sends an anonymous performance report to help us improve the engine over time.",{"path":65,"title":66,"description":67,"category":68,"exclude":9,"forceFramework":9},"\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":70,"title":71,"description":72,"category":68,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcli","Shaders CLI","Install shaders and presets into your codebase as component files, and keep them in sync with the design editor.",{"path":74,"title":75,"description":76,"category":77,"exclude":9,"forceFramework":9},"\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":79,"title":80,"description":81,"category":77,"exclude":9,"forceFramework":9},"\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":83,"title":84,"description":85,"category":77,"exclude":9,"forceFramework":9},"\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":87,"title":88,"description":89,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fmasking-and-blending","Masking and blending","How blend modes and masks combine components in the design editor.",{"path":91,"title":92,"description":93,"category":77,"exclude":9,"forceFramework":9},"\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":95,"title":96,"description":97,"category":77,"exclude":9,"forceFramework":9},"\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":99,"title":100,"description":101,"category":77,"exclude":9,"forceFramework":9},"\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":103,"title":104,"description":105,"category":77,"exclude":9,"forceFramework":9},"\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":107,"title":108,"description":109,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fglass-component-spotlight","Component spotlight: Glass","A short look at the Glass component and the liquid-glass look it creates.",{"path":111,"title":112,"description":113,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fdigital-looks-component-spotlight","Component spotlight: Digital looks","A look at the digital stylization components for glitchy, futuristic, or technical effects.",{"path":115,"title":12,"description":116,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fjs\u002Fquickstart","Install Shaders without a framework, render your first effect on a canvas, and update props at runtime.",{"path":118,"title":12,"description":119,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Freact\u002Fquickstart","Install Shaders in a React app, render your first effect, and drive a prop from state.",{"path":121,"title":122,"description":123,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Freact\u002Fssr","Next.js and SSR","Render Shaders in Next.js and other React SSR apps by keeping each shader on the client.",{"path":125,"title":12,"description":126,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fquickstart","Install Shaders in a Solid app, render your first effect, and drive a prop from a signal.",{"path":128,"title":129,"description":130,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fssr","SolidStart and SSR","Render Shaders in SolidStart and other Solid SSR apps by keeping each shader on the client.",{"path":132,"title":12,"description":133,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fquickstart","Install Shaders in a Svelte app, render your first effect, and drive a prop from state.",{"path":135,"title":136,"description":137,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fssr","SvelteKit and SSR","Render Shaders in SvelteKit and other Svelte SSR apps, where each shader already waits for the browser.",{"path":139,"title":12,"description":140,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fvue\u002Fquickstart","Install Shaders in a Vue app, render your first effect, and drive a prop from a ref.",{"path":142,"title":143,"description":144,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fvue\u002Fssr","Nuxt and SSR","Render Shaders in Nuxt and other Vue SSR apps by keeping each shader on the client.",{"id":146,"title":147,"body":148,"categoryId":246,"categorySlug":246,"categoryTitle":541,"curated":542,"description":158,"editUrl":9,"extension":543,"group":544,"groupTitle":545,"kind":546,"meta":547,"navigation":548,"path":549,"seo":550,"sourceUrl":551,"stem":552,"wordCount":9,"__hash__":553},"primitives\u002Fdocs\u002Fprimitives\u002F8.patterns\u002F29.chosenby.md","chosenBy",{"type":149,"value":150,"toc":535},"minimark",[151,155,159,241,256,274,279,341,345,486,496,500,521,525,531],[152,153,147],"h1",{"id":154},"chosenby",[156,157,158],"p",{},"Picks one whole effect recipe from a select prop, decided when the shader compiles.",[160,161,166],"pre",{"className":162,"code":163,"language":164,"meta":165,"style":165},"language-ts shiki shiki-themes github-dark","chosenBy\u003CK extends string>(\n  prop: PropRef,\n  read: (raw: unknown) =,\n> K, recipes: Record\u003CK, GatherEffect>): GatherEffect\n","ts","",[8,167,168,193,199,218],{"__ignoreMap":165},[169,170,173,176,180,184,187,190],"span",{"class":171,"line":172},"line",1,[169,174,147],{"class":175},"s95oV",[169,177,179],{"class":178},"snl16","\u003C",[169,181,183],{"class":182},"sDLfK","K",[169,185,186],{"class":175}," extends string",[169,188,189],{"class":178},">",[169,191,192],{"class":175},"(\n",[169,194,196],{"class":171,"line":195},2,[169,197,198],{"class":175},"  prop: PropRef,\n",[169,200,202,205,209,212,215],{"class":171,"line":201},3,[169,203,204],{"class":175},"  read: (",[169,206,208],{"class":207},"s9osk","raw",[169,210,211],{"class":178},":",[169,213,214],{"class":182}," unknown",[169,216,217],{"class":175},") =,\n",[169,219,221,224,227,230,233,236,238],{"class":171,"line":220},4,[169,222,223],{"class":175},"> K, recipes: Record\u003C",[169,225,183],{"class":226},"svObZ",[169,228,229],{"class":175},", ",[169,231,232],{"class":226},"GatherEffect",[169,234,235],{"class":175},">)",[169,237,211],{"class":178},[169,239,240],{"class":226}," GatherEffect\n",[156,242,243,244,247,248,251,252,255],{},"Import ",[8,245,246],{},"patterns"," from ",[8,249,250],{},"shaders\u002Fstd"," and use ",[8,253,254],{},"patterns.chosenBy",".",[156,257,258,261,262,265,266,269,270,273],{},[8,259,260],{},"prop"," must be a ",[8,263,264],{},"compileTime: true"," prop. ",[8,267,268],{},"read"," turns its raw value into one of the keys of ",[8,271,272],{},"recipes","; accept both the option string and its transformed value. Every recipe must be a gather effect with the same alpha handling and no setup step, or this throws as soon as it is called.",[275,276,278],"h2",{"id":277},"parameters","Parameters",[280,281,282,298],"table",{},[283,284,285],"thead",{},[286,287,288,292,295],"tr",{},[289,290,291],"th",{},"Name",[289,293,294],{},"Type",[289,296,297],{},"Notes",[299,300,301,315,328],"tbody",{},[286,302,303,308,313],{},[304,305,306],"td",{},[8,307,260],{},[304,309,310],{},[8,311,312],{},"PropRef",[304,314],{},[286,316,317,321,326],{},[304,318,319],{},[8,320,268],{},[304,322,323],{},[8,324,325],{},"(raw: unknown) => K",[304,327],{},[286,329,330,334,339],{},[304,331,332],{},[8,333,272],{},[304,335,336],{},[8,337,338],{},"Record\u003CK, GatherEffect>",[304,340],{},[275,342,344],{"id":343},"example","Example",[160,346,348],{"className":162,"code":347,"language":164,"meta":165,"style":165},"effect: chosenBy(p('style'), (raw) => (raw === 'cmyk' || raw === 1 ? 'cmyk' : 'classic'), {classic: dotScreen({angle: p('angle'), frequency: p('frequency')}), cmyk: cmykPress({paper: p('paperColor'), frequency: p('frequency'), misprint: p('misprint'), misprintAngle: p('misprintAngle'), plates})})\n",[8,349,350],{"__ignoreMap":165},[169,351,352,355,358,360,363,365,367,371,374,376,379,382,385,388,391,394,397,399,402,405,407,410,413,416,419,422,424,426,429,432,434,436,439,442,445,448,450,452,455,457,459,461,463,466,468,470,473,476,478,480,483],{"class":171,"line":172},[169,353,354],{"class":226},"effect",[169,356,357],{"class":175},": ",[169,359,147],{"class":226},[169,361,362],{"class":175},"(",[169,364,156],{"class":226},[169,366,362],{"class":175},[169,368,370],{"class":369},"sU2Wk","'style'",[169,372,373],{"class":175},"), (",[169,375,208],{"class":207},[169,377,378],{"class":175},") ",[169,380,381],{"class":178},"=>",[169,383,384],{"class":175}," (raw ",[169,386,387],{"class":178},"===",[169,389,390],{"class":369}," 'cmyk'",[169,392,393],{"class":178}," ||",[169,395,396],{"class":175}," raw ",[169,398,387],{"class":178},[169,400,401],{"class":182}," 1",[169,403,404],{"class":178}," ?",[169,406,390],{"class":369},[169,408,409],{"class":178}," :",[169,411,412],{"class":369}," 'classic'",[169,414,415],{"class":175},"), {classic: ",[169,417,418],{"class":226},"dotScreen",[169,420,421],{"class":175},"({angle: ",[169,423,156],{"class":226},[169,425,362],{"class":175},[169,427,428],{"class":369},"'angle'",[169,430,431],{"class":175},"), frequency: ",[169,433,156],{"class":226},[169,435,362],{"class":175},[169,437,438],{"class":369},"'frequency'",[169,440,441],{"class":175},")}), cmyk: ",[169,443,444],{"class":226},"cmykPress",[169,446,447],{"class":175},"({paper: ",[169,449,156],{"class":226},[169,451,362],{"class":175},[169,453,454],{"class":369},"'paperColor'",[169,456,431],{"class":175},[169,458,156],{"class":226},[169,460,362],{"class":175},[169,462,438],{"class":369},[169,464,465],{"class":175},"), misprint: ",[169,467,156],{"class":226},[169,469,362],{"class":175},[169,471,472],{"class":369},"'misprint'",[169,474,475],{"class":175},"), misprintAngle: ",[169,477,156],{"class":226},[169,479,362],{"class":175},[169,481,482],{"class":369},"'misprintAngle'",[169,484,485],{"class":175},"), plates})})\n",[487,488,489],"blockquote",{},[156,490,491,495],{},[492,493,494],"strong",{},"Tip."," Changing the prop recompiles the shader, which is the point: each style pays only for its own code.",[275,497,499],{"id":498},"see-also","See also",[501,502,503,513],"ul",{},[504,505,506,512],"li",{},[507,508,510],"a",{"href":509},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fdotscreen",[8,511,418],{}," — A classic halftone filter: the layer inside it redrawn as a grid of dots that grow where it is bright.",[504,514,515,520],{},[507,516,518],{"href":517},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fcmykpress",[8,519,444],{}," — A four-color print filter: the layer inside it separated into ink plates, each screened into dots at its own angle and laid down on paper in order.",[275,522,524],{"id":523},"used-by","Used by",[156,526,527],{},[507,528,530],{"href":529},"\u002Fdocs\u002Fcomponents\u002Fhalftone","Halftone",[532,533,534],"style",{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}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 .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}",{"title":165,"searchDepth":195,"depth":195,"links":536},[537,538,539,540],{"id":277,"depth":195,"text":278},{"id":343,"depth":195,"text":344},{"id":498,"depth":195,"text":499},{"id":523,"depth":195,"text":524},"Patterns & tiling",false,"md","paint","Painting","function",{},true,"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fchosenby",{"title":147,"description":158},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fpaint\u002Fpatterns.ts#L983","docs\u002Fprimitives\u002F8.patterns\u002F29.chosenby","ts31-VoiyvRxOQ488vHqLIuGaPbCGG0e8r9re4IMiL8"]