[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Feffects-instances":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":1290,"categorySlug":1291,"categoryTitle":9,"curated":357,"description":1292,"editUrl":1293,"extension":1294,"group":1295,"groupTitle":1296,"kind":9,"meta":1297,"navigation":357,"path":1298,"seo":1299,"sourceUrl":1300,"stem":1301,"wordCount":391,"__hash__":1302},"primitives\u002Fdocs\u002Fprimitives\u002F31.effects-instances\u002Findex.md","Instances",{"type":149,"value":150,"toc":1284},"minimark",[151,155,202,224,252,257,332,336,1069,1073,1233,1237,1280],[152,153,147],"h1",{"id":154},"instances",[156,157,158,159,166,167,170,171,177,178,177,184,190,191,197,198,201],"p",{},"Repeat the layer inside. ",[160,161,163],"a",{"href":162},"\u002Fdocs\u002Fprimitives\u002Feffects-instances\u002Frepeatinstances",[8,164,165],{},"repeatInstances"," draws many copies of it, laid out in a grid, around\na circle or along a line, each copy scaled, turned, faded and jittered a little more than the\nlast. It returns the fragment for ",[8,168,169],{},"gpu.fragment",". The layout words (",[160,172,174],{"href":173},"\u002Fdocs\u002Fprimitives\u002Feffects-instances\u002Fgrid",[8,175,176],{},"grid",", ",[160,179,181],{"href":180},"\u002Fdocs\u002Fprimitives\u002Feffects-instances\u002Fradial",[8,182,183],{},"radial",[160,185,187],{"href":186},"\u002Fdocs\u002Fprimitives\u002Feffects-instances\u002Fline",[8,188,189],{},"line",")\nsay where the copies go, ",[160,192,194],{"href":193},"\u002Fdocs\u002Fprimitives\u002Feffects-instances\u002Fbymode",[8,195,196],{},"byMode"," lets one select prop switch between all three, and the\nrecipe's ",[8,199,200],{},"variation"," object says how the copies differ.",[156,203,204,205,177,208,211,212,215,216,219,220,223],{},"The definition sets ",[8,206,207],{},"requiresRTT",[8,209,210],{},"requiresChild"," and ",[8,213,214],{},"wantsBoundsParams",": copies are cut from\nthe layer's own bounds and spread across this layer's bounding box. Radius, spacing and gaps\nare fractions of the canvas, layout angles are in degrees, and the per-copy ",[8,217,218],{},"rotation"," and\n",[8,221,222],{},"hueShift"," are in radians (give those props a degrees-to-radians transform).",[225,226,231],"pre",{"className":227,"code":228,"language":229,"meta":230,"style":230},"language-ts shiki shiki-themes github-dark","import {effects} from 'shaders\u002Fstd'\n","ts","",[8,232,233],{"__ignoreMap":230},[234,235,237,241,245,248],"span",{"class":189,"line":236},1,[234,238,240],{"class":239},"snl16","import",[234,242,244],{"class":243},"s95oV"," {effects} ",[234,246,247],{"class":239},"from",[234,249,251],{"class":250},"sU2Wk"," 'shaders\u002Fstd'\n",[253,254,256],"h2",{"id":255},"reach-for-it-when","Reach for it when",[258,259,260,273],"table",{},[261,262,263],"thead",{},[264,265,266,270],"tr",{},[267,268,269],"th",{},"When you need",[267,271,272],{},"Use",[274,275,276,288,299,310,321],"tbody",{},[264,277,278,282],{},[279,280,281],"td",{},"copies in rows and columns, brick-staggered or mirrored",[279,283,284],{},[160,285,286],{"href":173},[8,287,176],{},[264,289,290,293],{},[279,291,292],{},"copies around a circle, or along an arc",[279,294,295],{},[160,296,297],{"href":180},[8,298,183],{},[264,300,301,304],{},[279,302,303],{},"copies trailing off in one direction",[279,305,306],{},[160,307,308],{"href":186},[8,309,189],{},[264,311,312,315],{},[279,313,314],{},"one select prop that switches between layouts",[279,316,317],{},[160,318,319],{"href":193},[8,320,196],{},[264,322,323,326],{},[279,324,325],{},"the copies themselves, with their variation",[279,327,328],{},[160,329,330],{"href":162},[8,331,165],{},[253,333,335],{"id":334},"example","Example",[225,337,339],{"className":227,"code":338,"language":229,"meta":230,"style":230},"import {defineShader, p, effects, crosses, transformBoolean} from 'shaders\u002Fstd'\n\nconst {repeatInstances, radial} = effects.instances\n\nconst degToRad = (v: number) => (v * Math.PI) \u002F 180\n\n\u002F\u002F Orbit: copies of the layer inside around a circle, each one smaller, fainter and hue-shifted.\nexport const Orbit = defineShader({\n  name: 'Orbit',\n  requiresRTT: true,\n  requiresChild: true,\n  wantsBoundsParams: true,\n  props: {\n    count: {default: 8},\n    radius: {default: 0.3},\n    startAngle: {default: 0},\n    sweep: {default: 360},\n    faceCenter: {default: false, transform: transformBoolean},\n    instanceScale: {default: 0.9},\n    instanceRotation: {default: 0, transform: degToRad},\n    instanceOpacity: {default: 0.9},\n    jitterPosition: {default: 0},\n    jitterRotation: {default: 0},\n    jitterScale: {default: 0},\n    jitterOpacity: {default: 0},\n    seed: {default: 0},\n    phase: {default: 0},\n    hueShift: {default: 30, transform: degToRad, recompile: crosses(0)},\n    zOrder: {default: 'forward', transform: (v: string) => (v === 'backward' ? 1 : 0), compileTime: true},\n    cropLeft: {default: 0},\n    cropRight: {default: 0},\n    cropTop: {default: 0},\n    cropBottom: {default: 0},\n  },\n  gpu: {fragment: repeatInstances({\n    source: {crop: {left: p('cropLeft'), right: p('cropRight'), top: p('cropTop'), bottom: p('cropBottom')}},\n    placement: radial({count: p('count'), radius: p('radius'), startAngle: p('startAngle'), sweep: p('sweep'), faceCenter: p('faceCenter')}),\n    variation: {\n      scale: p('instanceScale'), rotation: p('instanceRotation'), opacity: p('instanceOpacity'),\n      jitter: {position: p('jitterPosition'), rotation: p('jitterRotation'), scale: p('jitterScale'), opacity: p('jitterOpacity')},\n      seed: p('seed'), phase: p('phase'),\n    },\n    hueShift: p('hueShift'),\n    order: p('zOrder'),\n  })},\n})\n",[8,340,341,352,359,384,389,440,445,452,472,484,495,505,515,521,533,544,555,566,578,589,600,610,620,630,640,650,660,670,693,748,758,768,778,788,794,804,850,911,917,953,996,1021,1027,1042,1057,1063],{"__ignoreMap":230},[234,342,343,345,348,350],{"class":189,"line":236},[234,344,240],{"class":239},[234,346,347],{"class":243}," {defineShader, p, effects, crosses, transformBoolean} ",[234,349,247],{"class":239},[234,351,251],{"class":250},[234,353,355],{"class":189,"line":354},2,[234,356,358],{"emptyLinePlaceholder":357},true,"\n",[234,360,362,365,368,371,373,375,378,381],{"class":189,"line":361},3,[234,363,364],{"class":239},"const",[234,366,367],{"class":243}," {",[234,369,165],{"class":370},"sDLfK",[234,372,177],{"class":243},[234,374,183],{"class":370},[234,376,377],{"class":243},"} ",[234,379,380],{"class":239},"=",[234,382,383],{"class":243}," effects.instances\n",[234,385,387],{"class":189,"line":386},4,[234,388,358],{"emptyLinePlaceholder":357},[234,390,392,394,398,401,404,408,411,414,417,420,423,426,429,432,434,437],{"class":189,"line":391},5,[234,393,364],{"class":239},[234,395,397],{"class":396},"svObZ"," degToRad",[234,399,400],{"class":239}," =",[234,402,403],{"class":243}," (",[234,405,407],{"class":406},"s9osk","v",[234,409,410],{"class":239},":",[234,412,413],{"class":370}," number",[234,415,416],{"class":243},") ",[234,418,419],{"class":239},"=>",[234,421,422],{"class":243}," (v ",[234,424,425],{"class":239},"*",[234,427,428],{"class":243}," Math.",[234,430,431],{"class":370},"PI",[234,433,416],{"class":243},[234,435,436],{"class":239},"\u002F",[234,438,439],{"class":370}," 180\n",[234,441,443],{"class":189,"line":442},6,[234,444,358],{"emptyLinePlaceholder":357},[234,446,448],{"class":189,"line":447},7,[234,449,451],{"class":450},"sAwPA","\u002F\u002F Orbit: copies of the layer inside around a circle, each one smaller, fainter and hue-shifted.\n",[234,453,455,458,461,464,466,469],{"class":189,"line":454},8,[234,456,457],{"class":239},"export",[234,459,460],{"class":239}," const",[234,462,463],{"class":370}," Orbit",[234,465,400],{"class":239},[234,467,468],{"class":396}," defineShader",[234,470,471],{"class":243},"({\n",[234,473,475,478,481],{"class":189,"line":474},9,[234,476,477],{"class":243},"  name: ",[234,479,480],{"class":250},"'Orbit'",[234,482,483],{"class":243},",\n",[234,485,487,490,493],{"class":189,"line":486},10,[234,488,489],{"class":243},"  requiresRTT: ",[234,491,492],{"class":370},"true",[234,494,483],{"class":243},[234,496,498,501,503],{"class":189,"line":497},11,[234,499,500],{"class":243},"  requiresChild: ",[234,502,492],{"class":370},[234,504,483],{"class":243},[234,506,508,511,513],{"class":189,"line":507},12,[234,509,510],{"class":243},"  wantsBoundsParams: ",[234,512,492],{"class":370},[234,514,483],{"class":243},[234,516,518],{"class":189,"line":517},13,[234,519,520],{"class":243},"  props: {\n",[234,522,524,527,530],{"class":189,"line":523},14,[234,525,526],{"class":243},"    count: {default: ",[234,528,529],{"class":370},"8",[234,531,532],{"class":243},"},\n",[234,534,536,539,542],{"class":189,"line":535},15,[234,537,538],{"class":243},"    radius: {default: ",[234,540,541],{"class":370},"0.3",[234,543,532],{"class":243},[234,545,547,550,553],{"class":189,"line":546},16,[234,548,549],{"class":243},"    startAngle: {default: ",[234,551,552],{"class":370},"0",[234,554,532],{"class":243},[234,556,558,561,564],{"class":189,"line":557},17,[234,559,560],{"class":243},"    sweep: {default: ",[234,562,563],{"class":370},"360",[234,565,532],{"class":243},[234,567,569,572,575],{"class":189,"line":568},18,[234,570,571],{"class":243},"    faceCenter: {default: ",[234,573,574],{"class":370},"false",[234,576,577],{"class":243},", transform: transformBoolean},\n",[234,579,581,584,587],{"class":189,"line":580},19,[234,582,583],{"class":243},"    instanceScale: {default: ",[234,585,586],{"class":370},"0.9",[234,588,532],{"class":243},[234,590,592,595,597],{"class":189,"line":591},20,[234,593,594],{"class":243},"    instanceRotation: {default: ",[234,596,552],{"class":370},[234,598,599],{"class":243},", transform: degToRad},\n",[234,601,603,606,608],{"class":189,"line":602},21,[234,604,605],{"class":243},"    instanceOpacity: {default: ",[234,607,586],{"class":370},[234,609,532],{"class":243},[234,611,613,616,618],{"class":189,"line":612},22,[234,614,615],{"class":243},"    jitterPosition: {default: ",[234,617,552],{"class":370},[234,619,532],{"class":243},[234,621,623,626,628],{"class":189,"line":622},23,[234,624,625],{"class":243},"    jitterRotation: {default: ",[234,627,552],{"class":370},[234,629,532],{"class":243},[234,631,633,636,638],{"class":189,"line":632},24,[234,634,635],{"class":243},"    jitterScale: {default: ",[234,637,552],{"class":370},[234,639,532],{"class":243},[234,641,643,646,648],{"class":189,"line":642},25,[234,644,645],{"class":243},"    jitterOpacity: {default: ",[234,647,552],{"class":370},[234,649,532],{"class":243},[234,651,653,656,658],{"class":189,"line":652},26,[234,654,655],{"class":243},"    seed: {default: ",[234,657,552],{"class":370},[234,659,532],{"class":243},[234,661,663,666,668],{"class":189,"line":662},27,[234,664,665],{"class":243},"    phase: {default: ",[234,667,552],{"class":370},[234,669,532],{"class":243},[234,671,673,676,679,682,685,688,690],{"class":189,"line":672},28,[234,674,675],{"class":243},"    hueShift: {default: ",[234,677,678],{"class":370},"30",[234,680,681],{"class":243},", transform: degToRad, recompile: ",[234,683,684],{"class":396},"crosses",[234,686,687],{"class":243},"(",[234,689,552],{"class":370},[234,691,692],{"class":243},")},\n",[234,694,696,699,702,704,707,710,712,714,717,719,721,723,726,729,732,735,738,741,744,746],{"class":189,"line":695},29,[234,697,698],{"class":243},"    zOrder: {default: ",[234,700,701],{"class":250},"'forward'",[234,703,177],{"class":243},[234,705,706],{"class":396},"transform",[234,708,709],{"class":243},": (",[234,711,407],{"class":406},[234,713,410],{"class":239},[234,715,716],{"class":370}," string",[234,718,416],{"class":243},[234,720,419],{"class":239},[234,722,422],{"class":243},[234,724,725],{"class":239},"===",[234,727,728],{"class":250}," 'backward'",[234,730,731],{"class":239}," ?",[234,733,734],{"class":370}," 1",[234,736,737],{"class":239}," :",[234,739,740],{"class":370}," 0",[234,742,743],{"class":243},"), compileTime: ",[234,745,492],{"class":370},[234,747,532],{"class":243},[234,749,751,754,756],{"class":189,"line":750},30,[234,752,753],{"class":243},"    cropLeft: {default: ",[234,755,552],{"class":370},[234,757,532],{"class":243},[234,759,761,764,766],{"class":189,"line":760},31,[234,762,763],{"class":243},"    cropRight: {default: ",[234,765,552],{"class":370},[234,767,532],{"class":243},[234,769,771,774,776],{"class":189,"line":770},32,[234,772,773],{"class":243},"    cropTop: {default: ",[234,775,552],{"class":370},[234,777,532],{"class":243},[234,779,781,784,786],{"class":189,"line":780},33,[234,782,783],{"class":243},"    cropBottom: {default: ",[234,785,552],{"class":370},[234,787,532],{"class":243},[234,789,791],{"class":189,"line":790},34,[234,792,793],{"class":243},"  },\n",[234,795,797,800,802],{"class":189,"line":796},35,[234,798,799],{"class":243},"  gpu: {fragment: ",[234,801,165],{"class":396},[234,803,471],{"class":243},[234,805,807,810,812,814,817,820,822,824,827,830,832,834,837,840,842,844,847],{"class":189,"line":806},36,[234,808,809],{"class":243},"    source: {crop: {left: ",[234,811,156],{"class":396},[234,813,687],{"class":243},[234,815,816],{"class":250},"'cropLeft'",[234,818,819],{"class":243},"), right: ",[234,821,156],{"class":396},[234,823,687],{"class":243},[234,825,826],{"class":250},"'cropRight'",[234,828,829],{"class":243},"), top: ",[234,831,156],{"class":396},[234,833,687],{"class":243},[234,835,836],{"class":250},"'cropTop'",[234,838,839],{"class":243},"), bottom: ",[234,841,156],{"class":396},[234,843,687],{"class":243},[234,845,846],{"class":250},"'cropBottom'",[234,848,849],{"class":243},")}},\n",[234,851,853,856,858,861,863,865,868,871,873,875,878,881,883,885,888,891,893,895,898,901,903,905,908],{"class":189,"line":852},37,[234,854,855],{"class":243},"    placement: ",[234,857,183],{"class":396},[234,859,860],{"class":243},"({count: ",[234,862,156],{"class":396},[234,864,687],{"class":243},[234,866,867],{"class":250},"'count'",[234,869,870],{"class":243},"), radius: ",[234,872,156],{"class":396},[234,874,687],{"class":243},[234,876,877],{"class":250},"'radius'",[234,879,880],{"class":243},"), startAngle: ",[234,882,156],{"class":396},[234,884,687],{"class":243},[234,886,887],{"class":250},"'startAngle'",[234,889,890],{"class":243},"), sweep: ",[234,892,156],{"class":396},[234,894,687],{"class":243},[234,896,897],{"class":250},"'sweep'",[234,899,900],{"class":243},"), faceCenter: ",[234,902,156],{"class":396},[234,904,687],{"class":243},[234,906,907],{"class":250},"'faceCenter'",[234,909,910],{"class":243},")}),\n",[234,912,914],{"class":189,"line":913},38,[234,915,916],{"class":243},"    variation: {\n",[234,918,920,923,925,927,930,933,935,937,940,943,945,947,950],{"class":189,"line":919},39,[234,921,922],{"class":243},"      scale: ",[234,924,156],{"class":396},[234,926,687],{"class":243},[234,928,929],{"class":250},"'instanceScale'",[234,931,932],{"class":243},"), rotation: ",[234,934,156],{"class":396},[234,936,687],{"class":243},[234,938,939],{"class":250},"'instanceRotation'",[234,941,942],{"class":243},"), opacity: ",[234,944,156],{"class":396},[234,946,687],{"class":243},[234,948,949],{"class":250},"'instanceOpacity'",[234,951,952],{"class":243},"),\n",[234,954,956,959,961,963,966,968,970,972,975,978,980,982,985,987,989,991,994],{"class":189,"line":955},40,[234,957,958],{"class":243},"      jitter: {position: ",[234,960,156],{"class":396},[234,962,687],{"class":243},[234,964,965],{"class":250},"'jitterPosition'",[234,967,932],{"class":243},[234,969,156],{"class":396},[234,971,687],{"class":243},[234,973,974],{"class":250},"'jitterRotation'",[234,976,977],{"class":243},"), scale: ",[234,979,156],{"class":396},[234,981,687],{"class":243},[234,983,984],{"class":250},"'jitterScale'",[234,986,942],{"class":243},[234,988,156],{"class":396},[234,990,687],{"class":243},[234,992,993],{"class":250},"'jitterOpacity'",[234,995,692],{"class":243},[234,997,999,1002,1004,1006,1009,1012,1014,1016,1019],{"class":189,"line":998},41,[234,1000,1001],{"class":243},"      seed: ",[234,1003,156],{"class":396},[234,1005,687],{"class":243},[234,1007,1008],{"class":250},"'seed'",[234,1010,1011],{"class":243},"), phase: ",[234,1013,156],{"class":396},[234,1015,687],{"class":243},[234,1017,1018],{"class":250},"'phase'",[234,1020,952],{"class":243},[234,1022,1024],{"class":189,"line":1023},42,[234,1025,1026],{"class":243},"    },\n",[234,1028,1030,1033,1035,1037,1040],{"class":189,"line":1029},43,[234,1031,1032],{"class":243},"    hueShift: ",[234,1034,156],{"class":396},[234,1036,687],{"class":243},[234,1038,1039],{"class":250},"'hueShift'",[234,1041,952],{"class":243},[234,1043,1045,1048,1050,1052,1055],{"class":189,"line":1044},44,[234,1046,1047],{"class":243},"    order: ",[234,1049,156],{"class":396},[234,1051,687],{"class":243},[234,1053,1054],{"class":250},"'zOrder'",[234,1056,952],{"class":243},[234,1058,1060],{"class":189,"line":1059},45,[234,1061,1062],{"class":243},"  })},\n",[234,1064,1066],{"class":189,"line":1065},46,[234,1067,1068],{"class":243},"})\n",[253,1070,1072],{"id":1071},"types","Types",[258,1074,1075,1085],{},[261,1076,1077],{},[264,1078,1079,1082],{},[267,1080,1081],{},"Type",[267,1083,1084],{},"What it is",[274,1086,1087,1132,1153,1166,1183,1210,1223],{},[264,1088,1089,1094],{},[279,1090,1091],{},[8,1092,1093],{},"GridSlots",[279,1095,1096,1097,211,1100,1103,1104,211,1107,1110,1111,1114,1115,1118,1119,177,1122,177,1125,177,1128,1131],{},"The props of a grid layout: ",[8,1098,1099],{},"columns",[8,1101,1102],{},"rows"," (counts), ",[8,1105,1106],{},"gapX",[8,1108,1109],{},"gapY"," (fractions of the canvas width and height), ",[8,1112,1113],{},"stagger"," (0 to 1, shifts every other row by that much of a cell) and ",[8,1116,1117],{},"flip",", a compile-time select that mirrors alternate cells (",[8,1120,1121],{},"'none'",[8,1123,1124],{},"'alternate-flip-x'",[8,1126,1127],{},"'alternate-flip-y'",[8,1129,1130],{},"'both'",").",[264,1133,1134,1139],{},[279,1135,1136],{},[8,1137,1138],{},"LineSlots",[279,1140,1141,1142,177,1145,1148,1149,1152],{},"The props of a line layout: ",[8,1143,1144],{},"count",[8,1146,1147],{},"direction"," (degrees, 0 points right) and ",[8,1150,1151],{},"spacing"," between copies (a fraction of the canvas height).",[264,1154,1155,1160],{},[279,1156,1157],{},[8,1158,1159],{},"PlacementPick",[279,1161,1162,1163,1165],{},"A layout chosen by a select prop, built by ",[8,1164,196],{},".",[264,1167,1168,1173],{},[279,1169,1170],{},[8,1171,1172],{},"PlacementSpec",[279,1174,1175,1176,177,1178,1180,1181,1165],{},"One layout, built by ",[8,1177,176],{},[8,1179,183],{}," or ",[8,1182,189],{},[264,1184,1185,1190],{},[279,1186,1187],{},[8,1188,1189],{},"RadialSlots",[279,1191,1192,1193,177,1195,1198,1199,211,1202,1205,1206,1209],{},"The props of a radial layout: ",[8,1194,1144],{},[8,1196,1197],{},"radius"," (a fraction of the canvas height), ",[8,1200,1201],{},"startAngle",[8,1203,1204],{},"sweep"," (degrees), and ",[8,1207,1208],{},"faceCenter",", a boolean that turns each copy to face the middle of the circle.",[264,1211,1212,1217],{},[279,1213,1214],{},[8,1215,1216],{},"RepeatInstancesRecipe",[279,1218,1219,1220,1222],{},"Everything ",[8,1221,165],{}," needs: what to copy, where to put the copies, and how they vary.",[264,1224,1225,1230],{},[279,1226,1227],{},[8,1228,1229],{},"VariationSlots",[279,1231,1232],{},"How each copy differs from the last.",[253,1234,1236],{"id":1235},"words","Words",[1238,1239,1241],"primitive-words",{":words":1240},"[{\"name\":\"repeatInstances\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-instances\u002Frepeatinstances\",\"summary\":\"Many copies of the layer inside, laid out and varied as the recipe says.\"},{\"name\":\"grid\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-instances\u002Fgrid\",\"summary\":\"Copies in rows and columns, filling this layer's bounding box.\"},{\"name\":\"radial\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-instances\u002Fradial\",\"summary\":\"Copies around a circle centred on the layer inside.\"},{\"name\":\"line\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-instances\u002Fline\",\"summary\":\"Copies in a row, marching away from the layer inside in one direction.\"},{\"name\":\"byMode\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-instances\u002Fbymode\",\"summary\":\"Lets one select prop switch between a grid, a radial and a linear layout.\"}]",[1242,1243,1244,1252,1259,1266,1273],"ul",{},[1245,1246,1247,1251],"li",{},[160,1248,1249],{"href":162},[8,1250,165],{}," — Many copies of the layer inside, laid out and varied as the recipe says.",[1245,1253,1254,1258],{},[160,1255,1256],{"href":173},[8,1257,176],{}," — Copies in rows and columns, filling this layer's bounding box.",[1245,1260,1261,1265],{},[160,1262,1263],{"href":180},[8,1264,183],{}," — Copies around a circle centred on the layer inside.",[1245,1267,1268,1272],{},[160,1269,1270],{"href":186},[8,1271,189],{}," — Copies in a row, marching away from the layer inside in one direction.",[1245,1274,1275,1279],{},[160,1276,1277],{"href":193},[8,1278,196],{}," — Lets one select prop switch between a grid, a radial and a linear layout.",[1281,1282,1283],"style",{},"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 .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 .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":230,"searchDepth":354,"depth":354,"links":1285},[1286,1287,1288,1289],{"id":255,"depth":354,"text":256},{"id":334,"depth":354,"text":335},{"id":1071,"depth":354,"text":1072},{"id":1235,"depth":354,"text":1236},"effects.instances","effects-instances","Repeat the layer inside. repeatInstances draws many copies of it, laid out in a grid, around a circle or along a line, each copy scaled, turned, faded and jittered a little more than the last.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Feffects.instances.md","md","effects","Filters & effects",{},"\u002Fdocs\u002Fprimitives\u002Feffects-instances",{"title":147,"description":1292},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Feffects\u002Finstances.ts","docs\u002Fprimitives\u002F31.effects-instances\u002Findex","tGQZm7cnFO7yNo-V_lJwCnG_ouDNVX0tBQYVT0Qb-kI"]