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