[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Fpatterns":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":1451,"categorySlug":1451,"categoryTitle":9,"curated":655,"description":1452,"editUrl":1453,"extension":1454,"group":1455,"groupTitle":1456,"kind":9,"meta":1457,"navigation":655,"path":1458,"seo":1459,"sourceUrl":1460,"stem":1461,"wordCount":1462,"__hash__":1463},"primitives\u002Fdocs\u002Fprimitives\u002F8.patterns\u002Findex.md","Patterns & tiling",{"type":149,"value":150,"toc":1445},"minimark",[151,155,176,279,308,313,630,634,1037,1041,1167,1171,1441],[152,153,147],"h1",{"id":154},"patterns-tiling",[156,157,158,159,163,164,167,168,175],"p",{},"Repeating patterns you can color and animate: checkers, stripes, zigzags, rings, falling\nstreaks, and tiled lattices of squares, hexagons, triangles, bricks, truchet arcs, woven\nthreads and isometric cubes, plus the print-screen filters (halftone dots, CMYK plates and\ndithering). Most pattern words return a ",[160,161,162],"strong",{},"mask",": a number per pixel that is 1 on the pattern\nand 0 off it. The lattice words also return a per-cell ",[160,165,166],{},"shade",", a brightness factor around 1\nthat ",[169,170,172],"a",{"href":171},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fvary",[8,173,174],{},"vary"," multiplies into a fill so every tile reads slightly different.",[156,177,178,179,185,186,192,193,199,200,192,206,192,212,218,219,225,226,192,232,192,238,192,244,199,250,256,257,263,264,270,271,274,275,278],{},"The lattice words share one coordinate system: ",[169,180,182],{"href":181},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fcellframe",[8,183,184],{},"cellFrame"," sets how many cells fit down the\ncanvas height and how far the lattice is rotated, and ",[169,187,189],{"href":188},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fgridlines",[8,190,191],{},"gridLines",", ",[169,194,196],{"href":195},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fhexlines",[8,197,198],{},"hexLines",",\n",[169,201,203],{"href":202},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Ftrianglelines",[8,204,205],{},"triangleLines",[169,207,209],{"href":208},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Ftruchetarcs",[8,210,211],{},"truchetArcs",[169,213,215],{"href":214},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fweavethreads",[8,216,217],{},"weaveThreads"," and ",[169,220,222],{"href":221},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fisocubefaces",[8,223,224],{},"isoCubeFaces"," draw inside it. The\nfree-standing words (",[169,227,229],{"href":228},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fcheckercells",[8,230,231],{},"checkerCells",[169,233,235],{"href":234},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fstripebands",[8,236,237],{},"stripeBands",[169,239,241],{"href":240},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fringwaves",[8,242,243],{},"ringWaves",[169,245,247],{"href":246},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fdotlattice",[8,248,249],{},"dotLattice",[169,251,253],{"href":252},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fbrickcourses",[8,254,255],{},"brickCourses",") bring their own. Color a mask with ",[169,258,260],{"href":259},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fstrokeover",[8,261,262],{},"strokeOver"," (fill where 0, stroke where 1,\nin a chosen color space) or hang it under one color as alpha with ",[169,265,267],{"href":266},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fwithalpha",[8,268,269],{},"withAlpha","; the result goes\nin ",[8,272,273],{},"paint:",". The halftone and dither words are filters over the layer inside them and go in\n",[8,276,277],{},"effect:",".",[280,281,286],"pre",{"className":282,"code":283,"language":284,"meta":285,"style":285},"language-ts shiki shiki-themes github-dark","import {patterns} from 'shaders\u002Fstd'\n","ts","",[8,287,288],{"__ignoreMap":285},[289,290,293,297,301,304],"span",{"class":291,"line":292},"line",1,[289,294,296],{"class":295},"snl16","import",[289,298,300],{"class":299},"s95oV"," {patterns} ",[289,302,303],{"class":295},"from",[289,305,307],{"class":306},"sU2Wk"," 'shaders\u002Fstd'\n",[309,310,312],"h2",{"id":311},"reach-for-it-when","Reach for it when",[314,315,316,329],"table",{},[317,318,319],"thead",{},[320,321,322,326],"tr",{},[323,324,325],"th",{},"When you need",[323,327,328],{},"Use",[330,331,332,349,366,377,395,411,434,446,457,468,479,508,522,535,554,573,586,611],"tbody",{},[320,333,334,338],{},[335,336,337],"td",{},"a two-color checkerboard",[335,339,340,344,345],{},[169,341,342],{"href":228},[8,343,231],{}," colored with ",[169,346,347],{"href":259},[8,348,262],{},[320,350,351,354],{},[335,352,353],{},"stripes or chevrons that scroll",[335,355,356,192,360],{},[169,357,358],{"href":234},[8,359,237],{},[169,361,363],{"href":362},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fzigzagbands",[8,364,365],{},"zigzagBands",[320,367,368,371],{},[335,369,370],{},"rings rippling out from a point",[335,372,373],{},[169,374,375],{"href":240},[8,376,243],{},[320,378,379,382],{},[335,380,381],{},"rain or streaks falling across the canvas",[335,383,384,390,391],{},[169,385,387],{"href":386},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Ffallingstreaks",[8,388,389],{},"fallingStreaks"," with ",[169,392,393],{"href":266},[8,394,269],{},[320,396,397,400],{},[335,398,399],{},"a field of dots, optionally staggered or twinkling",[335,401,402,406,407],{},[169,403,404],{"href":246},[8,405,249],{}," under ",[169,408,409],{"href":266},[8,410,269],{},[320,412,413,416],{},[335,414,415],{},"grid lines, honeycombs or triangle lattices",[335,417,418,390,422,192,426,192,430],{},[169,419,420],{"href":181},[8,421,184],{},[169,423,424],{"href":188},[8,425,191],{},[169,427,428],{"href":195},[8,429,198],{},[169,431,432],{"href":202},[8,433,205],{},[320,435,436,439],{},[335,437,438],{},"every tile a slightly different brightness",[335,440,441,445],{},[169,442,443],{"href":171},[8,444,174],{}," with a lattice word's shade output",[320,447,448,451],{},[335,449,450],{},"a brick wall",[335,452,453],{},[169,454,455],{"href":252},[8,456,255],{},[320,458,459,462],{},[335,460,461],{},"a maze of joined arcs",[335,463,464],{},[169,465,466],{"href":208},[8,467,211],{},[320,469,470,473],{},[335,471,472],{},"a woven textile",[335,474,475],{},[169,476,477],{"href":214},[8,478,217],{},[320,480,481,484],{},[335,482,483],{},"tumbling 3D cubes",[335,485,486,390,490,192,496,192,502],{},[169,487,488],{"href":221},[8,489,224],{},[169,491,493],{"href":492},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Ftimes",[8,494,495],{},"times",[169,497,499],{"href":498},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fmixof",[8,500,501],{},"mixOf",[169,503,505],{"href":504},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fopaque",[8,506,507],{},"opaque",[320,509,510,513],{},[335,511,512],{},"a mapped size or thickness that should change per whole cell",[335,514,515,521],{},[169,516,518],{"href":517},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fsamplemapsatcellcentres",[8,519,520],{},"sampleMapsAtCellCentres"," on the definition's mapSampleUVs field",[320,523,524,527],{},[335,525,526],{},"a halftone dot screen over the layer inside",[335,528,529],{},[169,530,532],{"href":531},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fdotscreen",[8,533,534],{},"dotScreen",[320,536,537,540],{},[335,538,539],{},"a four-color print with plate angles and misregistration",[335,541,542,390,548],{},[169,543,545],{"href":544},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fcmykpress",[8,546,547],{},"cmykPress",[169,549,551],{"href":550},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Finkplate",[8,552,553],{},"inkPlate",[320,555,556,559],{},[335,557,558],{},"your own ink press inside a gather build",[335,560,561,192,567],{},[169,562,564],{"href":563},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fdotscreenmask",[8,565,566],{},"dotScreenMask",[169,568,570],{"href":569},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Finktransmission",[8,571,572],{},"inkTransmission",[320,574,575,578],{},[335,576,577],{},"one select prop that swaps whole effect recipes",[335,579,580],{},[169,581,583],{"href":582},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fchosenby",[8,584,585],{},"chosenBy",[320,587,588,591],{},[335,589,590],{},"a retro dither",[335,592,593,192,599,192,605],{},[169,594,596],{"href":595},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fpixelgrid",[8,597,598],{},"pixelGrid",[169,600,602],{"href":601},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fquantise",[8,603,604],{},"quantise",[169,606,608],{"href":607},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fditherinks",[8,609,610],{},"ditherInks",[320,612,613,616],{},[335,614,615],{},"a color's alpha or RGB on its own",[335,617,618,192,624],{},[169,619,621],{"href":620},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Falphaof",[8,622,623],{},"alphaOf",[169,625,627],{"href":626},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Frgbof",[8,628,629],{},"rgbOf",[309,631,633],{"id":632},"example","Example",[280,635,637],{"className":282,"code":636,"language":284,"meta":285,"style":285},"import {defineShader, p, patterns, transformColor, transformColorSpace, transformAngle, colorSpaceOptions} from 'shaders\u002Fstd'\n\nconst {cellFrame, hexLines, strokeOver, vary} = patterns\n\n\u002F\u002F A honeycomb: hexagon lines in a rotatable lattice, each cell's fill lightened or darkened at random.\nconst field = hexLines({\n  frame: cellFrame({cells: p('cells'), rotation: p('rotation'), convention: 'clockwise'}),\n  thickness: p('thickness'),\n  softness: p('softness'),\n  variation: p('variation'),\n})\n\nexport const Honeycomb = defineShader({\n  name: 'Honeycomb',\n  props: {\n    fill: {default: '#101828', transform: transformColor},\n    line: {default: '#f5d90a', transform: transformColor},\n    colorSpace: {default: 'linear', transform: transformColorSpace, compileTime: true, ui: {type: 'select', options: colorSpaceOptions}},\n    cells: {default: 8},\n    thickness: {default: 1},\n    rotation: {default: 0, transform: transformAngle},\n    softness: {default: 0},\n    variation: {default: 0.3},\n  },\n  paint: strokeOver({\n    fill: vary(p('fill'), field.shade),\n    stroke: p('line'),\n    mask: field.lines,\n    space: p('colorSpace'),\n  }),\n})\n",[8,638,639,650,657,690,695,702,720,758,774,789,804,810,815,834,845,851,863,874,898,910,921,933,943,954,960,970,990,1005,1011,1026,1032],{"__ignoreMap":285},[289,640,641,643,646,648],{"class":291,"line":292},[289,642,296],{"class":295},[289,644,645],{"class":299}," {defineShader, p, patterns, transformColor, transformColorSpace, transformAngle, colorSpaceOptions} ",[289,647,303],{"class":295},[289,649,307],{"class":306},[289,651,653],{"class":291,"line":652},2,[289,654,656],{"emptyLinePlaceholder":655},true,"\n",[289,658,660,663,666,669,671,673,675,677,679,681,684,687],{"class":291,"line":659},3,[289,661,662],{"class":295},"const",[289,664,665],{"class":299}," {",[289,667,184],{"class":668},"sDLfK",[289,670,192],{"class":299},[289,672,198],{"class":668},[289,674,192],{"class":299},[289,676,262],{"class":668},[289,678,192],{"class":299},[289,680,174],{"class":668},[289,682,683],{"class":299},"} ",[289,685,686],{"class":295},"=",[289,688,689],{"class":299}," patterns\n",[289,691,693],{"class":291,"line":692},4,[289,694,656],{"emptyLinePlaceholder":655},[289,696,698],{"class":291,"line":697},5,[289,699,701],{"class":700},"sAwPA","\u002F\u002F A honeycomb: hexagon lines in a rotatable lattice, each cell's fill lightened or darkened at random.\n",[289,703,705,707,710,713,717],{"class":291,"line":704},6,[289,706,662],{"class":295},[289,708,709],{"class":668}," field",[289,711,712],{"class":295}," =",[289,714,716],{"class":715},"svObZ"," hexLines",[289,718,719],{"class":299},"({\n",[289,721,723,726,728,731,733,736,739,742,744,746,749,752,755],{"class":291,"line":722},7,[289,724,725],{"class":299},"  frame: ",[289,727,184],{"class":715},[289,729,730],{"class":299},"({cells: ",[289,732,156],{"class":715},[289,734,735],{"class":299},"(",[289,737,738],{"class":306},"'cells'",[289,740,741],{"class":299},"), rotation: ",[289,743,156],{"class":715},[289,745,735],{"class":299},[289,747,748],{"class":306},"'rotation'",[289,750,751],{"class":299},"), convention: ",[289,753,754],{"class":306},"'clockwise'",[289,756,757],{"class":299},"}),\n",[289,759,761,764,766,768,771],{"class":291,"line":760},8,[289,762,763],{"class":299},"  thickness: ",[289,765,156],{"class":715},[289,767,735],{"class":299},[289,769,770],{"class":306},"'thickness'",[289,772,773],{"class":299},"),\n",[289,775,777,780,782,784,787],{"class":291,"line":776},9,[289,778,779],{"class":299},"  softness: ",[289,781,156],{"class":715},[289,783,735],{"class":299},[289,785,786],{"class":306},"'softness'",[289,788,773],{"class":299},[289,790,792,795,797,799,802],{"class":291,"line":791},10,[289,793,794],{"class":299},"  variation: ",[289,796,156],{"class":715},[289,798,735],{"class":299},[289,800,801],{"class":306},"'variation'",[289,803,773],{"class":299},[289,805,807],{"class":291,"line":806},11,[289,808,809],{"class":299},"})\n",[289,811,813],{"class":291,"line":812},12,[289,814,656],{"emptyLinePlaceholder":655},[289,816,818,821,824,827,829,832],{"class":291,"line":817},13,[289,819,820],{"class":295},"export",[289,822,823],{"class":295}," const",[289,825,826],{"class":668}," Honeycomb",[289,828,712],{"class":295},[289,830,831],{"class":715}," defineShader",[289,833,719],{"class":299},[289,835,837,840,843],{"class":291,"line":836},14,[289,838,839],{"class":299},"  name: ",[289,841,842],{"class":306},"'Honeycomb'",[289,844,199],{"class":299},[289,846,848],{"class":291,"line":847},15,[289,849,850],{"class":299},"  props: {\n",[289,852,854,857,860],{"class":291,"line":853},16,[289,855,856],{"class":299},"    fill: {default: ",[289,858,859],{"class":306},"'#101828'",[289,861,862],{"class":299},", transform: transformColor},\n",[289,864,866,869,872],{"class":291,"line":865},17,[289,867,868],{"class":299},"    line: {default: ",[289,870,871],{"class":306},"'#f5d90a'",[289,873,862],{"class":299},[289,875,877,880,883,886,889,892,895],{"class":291,"line":876},18,[289,878,879],{"class":299},"    colorSpace: {default: ",[289,881,882],{"class":306},"'linear'",[289,884,885],{"class":299},", transform: transformColorSpace, compileTime: ",[289,887,888],{"class":668},"true",[289,890,891],{"class":299},", ui: {type: ",[289,893,894],{"class":306},"'select'",[289,896,897],{"class":299},", options: colorSpaceOptions}},\n",[289,899,901,904,907],{"class":291,"line":900},19,[289,902,903],{"class":299},"    cells: {default: ",[289,905,906],{"class":668},"8",[289,908,909],{"class":299},"},\n",[289,911,913,916,919],{"class":291,"line":912},20,[289,914,915],{"class":299},"    thickness: {default: ",[289,917,918],{"class":668},"1",[289,920,909],{"class":299},[289,922,924,927,930],{"class":291,"line":923},21,[289,925,926],{"class":299},"    rotation: {default: ",[289,928,929],{"class":668},"0",[289,931,932],{"class":299},", transform: transformAngle},\n",[289,934,936,939,941],{"class":291,"line":935},22,[289,937,938],{"class":299},"    softness: {default: ",[289,940,929],{"class":668},[289,942,909],{"class":299},[289,944,946,949,952],{"class":291,"line":945},23,[289,947,948],{"class":299},"    variation: {default: ",[289,950,951],{"class":668},"0.3",[289,953,909],{"class":299},[289,955,957],{"class":291,"line":956},24,[289,958,959],{"class":299},"  },\n",[289,961,963,966,968],{"class":291,"line":962},25,[289,964,965],{"class":299},"  paint: ",[289,967,262],{"class":715},[289,969,719],{"class":299},[289,971,973,976,978,980,982,984,987],{"class":291,"line":972},26,[289,974,975],{"class":299},"    fill: ",[289,977,174],{"class":715},[289,979,735],{"class":299},[289,981,156],{"class":715},[289,983,735],{"class":299},[289,985,986],{"class":306},"'fill'",[289,988,989],{"class":299},"), field.shade),\n",[289,991,993,996,998,1000,1003],{"class":291,"line":992},27,[289,994,995],{"class":299},"    stroke: ",[289,997,156],{"class":715},[289,999,735],{"class":299},[289,1001,1002],{"class":306},"'line'",[289,1004,773],{"class":299},[289,1006,1008],{"class":291,"line":1007},28,[289,1009,1010],{"class":299},"    mask: field.lines,\n",[289,1012,1014,1017,1019,1021,1024],{"class":291,"line":1013},29,[289,1015,1016],{"class":299},"    space: ",[289,1018,156],{"class":715},[289,1020,735],{"class":299},[289,1022,1023],{"class":306},"'colorSpace'",[289,1025,773],{"class":299},[289,1027,1029],{"class":291,"line":1028},30,[289,1030,1031],{"class":299},"  }),\n",[289,1033,1035],{"class":291,"line":1034},31,[289,1036,809],{"class":299},[309,1038,1040],{"id":1039},"types","Types",[314,1042,1043,1053],{},[317,1044,1045],{},[320,1046,1047,1050],{},[323,1048,1049],{},"Type",[323,1051,1052],{},"What it is",[330,1054,1055,1065,1075,1088,1102,1115,1140,1157],{},[320,1056,1057,1062],{},[335,1058,1059],{},[8,1060,1061],{},"CellFrameConvention",[335,1063,1064],{},"Which way a lattice's rows and rotation run.",[320,1066,1067,1072],{},[335,1068,1069],{},[8,1070,1071],{},"GatherStage",[335,1073,1074],{},"A value computed per pixel from the layer inside a gather effect, such as a dither level.",[320,1076,1077,1082],{},[335,1078,1079],{},[8,1080,1081],{},"InkPlateSpec",[335,1083,1084,1085,1087],{},"One ink plate of a ",[8,1086,547],{},": which channel it prints, its screen-angle prop (degrees) and its ink-color prop.",[320,1089,1090,1095],{},[335,1091,1092],{},[8,1093,1094],{},"PaintSlot",[335,1096,1097,1098,1101],{},"What a pattern slot accepts: a prop ",[8,1099,1100],{},"p('name')"," or another pattern value.",[320,1103,1104,1109],{},[335,1105,1106],{},[8,1107,1108],{},"PatternPaint",[335,1110,1111,1112,1114],{},"A pattern value: something you place in ",[8,1113,273],{}," or hand to another pattern word, yielding a color or a mask per pixel.",[320,1116,1117,1122],{},[335,1118,1119],{},[8,1120,1121],{},"PixelGrid",[335,1123,1124,1125,1127,1128,1131,1132,1135,1136,1139],{},"The pixel grid a dither works on, from ",[8,1126,598],{},": the cell ",[8,1129,1130],{},"size"," prop, the cell coordinate ",[8,1133,1134],{},"coord",", and ",[8,1137,1138],{},"source",", the child's color sampled once per cell.",[320,1141,1142,1147],{},[335,1143,1144],{},[8,1145,1146],{},"ScatterOptions",[335,1148,1149,1150,218,1153,1156],{},"What ",[8,1151,1152],{},"scatterPoint",[8,1154,1155],{},"scatterPoints"," take.",[320,1158,1159,1164],{},[335,1160,1161],{},[8,1162,1163],{},"ScatteredPoint",[335,1165,1166],{},"One scattered point: where it sits, the pixel's offset from it, and three random 0–1 values for its cell.",[309,1168,1170],{"id":1169},"words","Words",[1172,1173,1175],"primitive-words",{":words":1174},"[{\"name\":\"strokeOver\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fstrokeover\",\"summary\":\"Two colors mixed through a mask: `fill` where the mask is 0, `stroke` where it is 1.\"},{\"name\":\"withAlpha\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fwithalpha\",\"summary\":\"A color with its alpha replaced by a separately built mask.\"},{\"name\":\"checkerCells\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fcheckercells\",\"summary\":\"A checkerboard mask: 1 on one set of squares, 0 on the other, with clean edges at any size.\"},{\"name\":\"stripeBands\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fstripebands\",\"summary\":\"A mask of straight parallel stripes that scroll with the layer's clock.\"},{\"name\":\"zigzagBands\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fzigzagbands\",\"summary\":\"A mask of chevron (zigzag) stripes that scroll with the layer's clock.\"},{\"name\":\"ringWaves\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fringwaves\",\"summary\":\"A mask of concentric rings spreading out from a point, animated by the layer's clock.\"},{\"name\":\"fallingStreaks\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Ffallingstreaks\",\"summary\":\"Streaks that fall across the canvas in columns, each column at its own random speed.\"},{\"name\":\"dotLattice\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fdotlattice\",\"summary\":\"A mask of round dots on a square grid, with optional row stagger, drift and twinkle.\"},{\"name\":\"cellFrame\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fcellframe\",\"summary\":\"The shared coordinate system of a tiled pattern: how many cells fit down the canvas height and how far the whole lattice is rotated.\"},{\"name\":\"gridLines\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fgridlines\",\"summary\":\"Square grid lines drawn in a `cellFrame`, plus a per-cell shade for the fill.\"},{\"name\":\"hexLines\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fhexlines\",\"summary\":\"Honeycomb lines (pointy-top hexagons) drawn in a `cellFrame`, plus a per-cell shade.\"},{\"name\":\"triangleLines\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Ftrianglelines\",\"summary\":\"A lattice of equilateral triangles drawn in a `cellFrame`, with rows that can drift.\"},{\"name\":\"brickCourses\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fbrickcourses\",\"summary\":\"A brick wall: staggered rows with mortar gaps, optional rotation and per-row drift.\"},{\"name\":\"truchetArcs\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Ftruchetarcs\",\"summary\":\"A maze of quarter-circle arcs, two per tile, flipped at random so they join into flowing curves.\"},{\"name\":\"weaveThreads\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fweavethreads\",\"summary\":\"Two sets of threads woven over and under each other, returned as a finished color.\"},{\"name\":\"isoCubeFaces\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fisocubefaces\",\"summary\":\"Tumbling blocks: three shaded rhombus faces per hexagon that read as a field of 3D cubes.\"},{\"name\":\"vary\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fvary\",\"summary\":\"A color lightened or darkened per cell by a shade factor, alpha untouched.\"},{\"name\":\"sampleMapsAtCellCentres\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fsamplemapsatcellcentres\",\"summary\":\"Makes map-driven props change per whole cell instead of per pixel, so a mapped dot size or line thickness grows cell by cell rather than being cut off mid-cell.\"},{\"name\":\"times\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Ftimes\",\"summary\":\"The product of two values: a mask scaled by a prop, an RGB dimmed by a shade, two masks combined.\"},{\"name\":\"mixOf\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fmixof\",\"summary\":\"A straight blend from one value to another by an amount from 0 to 1.\"},{\"name\":\"alphaOf\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Falphaof\",\"summary\":\"The alpha channel of a color, as a number per pixel.\"},{\"name\":\"rgbOf\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Frgbof\",\"summary\":\"The RGB channels of a color, without its alpha.\"},{\"name\":\"opaque\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fopaque\",\"summary\":\"An RGB value finished as a fully opaque color.\"},{\"name\":\"dotScreen\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fdotscreen\",\"summary\":\"A classic halftone filter: the layer inside it redrawn as a grid of dots that grow where it is bright.\"},{\"name\":\"cmykPress\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fcmykpress\",\"summary\":\"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.\"},{\"name\":\"inkPlate\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Finkplate\",\"summary\":\"Declares one ink plate for `cmykPress`.\"},{\"name\":\"dotScreenMask\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fdotscreenmask\",\"summary\":\"The dot coverage of one halftone screen: 1 inside a dot, 0 between, with the dot size set by an ink amount.\"},{\"name\":\"inkTransmission\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Finktransmission\",\"summary\":\"How much light passes one ink plate: white where the dot mask is 0, the ink color where it is 1.\"},{\"name\":\"chosenBy\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fchosenby\",\"summary\":\"Picks one whole effect recipe from a select prop, decided when the shader compiles.\"},{\"name\":\"pixelGrid\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fpixelgrid\",\"summary\":\"The pixel grid of a dither: the layer inside it chopped into square cells of a given size.\"},{\"name\":\"quantise\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fquantise\",\"summary\":\"Reduces each grid cell of the layer inside to 0 or 1 using a dither pattern.\"},{\"name\":\"ditherInks\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fditherinks\",\"summary\":\"A dither filter: colors the 0\u002F1 levels from `quantise`, either with two colors of your own or with darkened and brightened versions of the layer's own pixels.\"},{\"name\":\"scatterPoint\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fscatterpoint\",\"summary\":\"One random point in each cell of a square grid: the classic scatter for glitter, stars, dust and sparkles.\"},{\"name\":\"scatterPoints\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fscatterpoints\",\"summary\":\"The scattered points of the four grid cells nearest the pixel, so anything drawn up to half a cell from its point shows whole, never clipped at a cell edge.\"}]",[1176,1177,1178,1194,1201,1208,1215,1222,1229,1236,1243,1250,1260,1270,1280,1287,1294,1301,1308,1315,1322,1329,1336,1343,1350,1357,1364,1371,1380,1387,1394,1401,1408,1415,1425,1433],"ul",{},[1179,1180,1181,1185,1186,1189,1190,1193],"li",{},[169,1182,1183],{"href":259},[8,1184,262],{}," — Two colors mixed through a mask: ",[8,1187,1188],{},"fill"," where the mask is 0, ",[8,1191,1192],{},"stroke"," where it is 1.",[1179,1195,1196,1200],{},[169,1197,1198],{"href":266},[8,1199,269],{}," — A color with its alpha replaced by a separately built mask.",[1179,1202,1203,1207],{},[169,1204,1205],{"href":228},[8,1206,231],{}," — A checkerboard mask: 1 on one set of squares, 0 on the other, with clean edges at any size.",[1179,1209,1210,1214],{},[169,1211,1212],{"href":234},[8,1213,237],{}," — A mask of straight parallel stripes that scroll with the layer's clock.",[1179,1216,1217,1221],{},[169,1218,1219],{"href":362},[8,1220,365],{}," — A mask of chevron (zigzag) stripes that scroll with the layer's clock.",[1179,1223,1224,1228],{},[169,1225,1226],{"href":240},[8,1227,243],{}," — A mask of concentric rings spreading out from a point, animated by the layer's clock.",[1179,1230,1231,1235],{},[169,1232,1233],{"href":386},[8,1234,389],{}," — Streaks that fall across the canvas in columns, each column at its own random speed.",[1179,1237,1238,1242],{},[169,1239,1240],{"href":246},[8,1241,249],{}," — A mask of round dots on a square grid, with optional row stagger, drift and twinkle.",[1179,1244,1245,1249],{},[169,1246,1247],{"href":181},[8,1248,184],{}," — The shared coordinate system of a tiled pattern: how many cells fit down the canvas height and how far the whole lattice is rotated.",[1179,1251,1252,1256,1257,1259],{},[169,1253,1254],{"href":188},[8,1255,191],{}," — Square grid lines drawn in a ",[8,1258,184],{},", plus a per-cell shade for the fill.",[1179,1261,1262,1266,1267,1269],{},[169,1263,1264],{"href":195},[8,1265,198],{}," — Honeycomb lines (pointy-top hexagons) drawn in a ",[8,1268,184],{},", plus a per-cell shade.",[1179,1271,1272,1276,1277,1279],{},[169,1273,1274],{"href":202},[8,1275,205],{}," — A lattice of equilateral triangles drawn in a ",[8,1278,184],{},", with rows that can drift.",[1179,1281,1282,1286],{},[169,1283,1284],{"href":252},[8,1285,255],{}," — A brick wall: staggered rows with mortar gaps, optional rotation and per-row drift.",[1179,1288,1289,1293],{},[169,1290,1291],{"href":208},[8,1292,211],{}," — A maze of quarter-circle arcs, two per tile, flipped at random so they join into flowing curves.",[1179,1295,1296,1300],{},[169,1297,1298],{"href":214},[8,1299,217],{}," — Two sets of threads woven over and under each other, returned as a finished color.",[1179,1302,1303,1307],{},[169,1304,1305],{"href":221},[8,1306,224],{}," — Tumbling blocks: three shaded rhombus faces per hexagon that read as a field of 3D cubes.",[1179,1309,1310,1314],{},[169,1311,1312],{"href":171},[8,1313,174],{}," — A color lightened or darkened per cell by a shade factor, alpha untouched.",[1179,1316,1317,1321],{},[169,1318,1319],{"href":517},[8,1320,520],{}," — Makes map-driven props change per whole cell instead of per pixel, so a mapped dot size or line thickness grows cell by cell rather than being cut off mid-cell.",[1179,1323,1324,1328],{},[169,1325,1326],{"href":492},[8,1327,495],{}," — The product of two values: a mask scaled by a prop, an RGB dimmed by a shade, two masks combined.",[1179,1330,1331,1335],{},[169,1332,1333],{"href":498},[8,1334,501],{}," — A straight blend from one value to another by an amount from 0 to 1.",[1179,1337,1338,1342],{},[169,1339,1340],{"href":620},[8,1341,623],{}," — The alpha channel of a color, as a number per pixel.",[1179,1344,1345,1349],{},[169,1346,1347],{"href":626},[8,1348,629],{}," — The RGB channels of a color, without its alpha.",[1179,1351,1352,1356],{},[169,1353,1354],{"href":504},[8,1355,507],{}," — An RGB value finished as a fully opaque color.",[1179,1358,1359,1363],{},[169,1360,1361],{"href":531},[8,1362,534],{}," — A classic halftone filter: the layer inside it redrawn as a grid of dots that grow where it is bright.",[1179,1365,1366,1370],{},[169,1367,1368],{"href":544},[8,1369,547],{}," — 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.",[1179,1372,1373,1377,1378,278],{},[169,1374,1375],{"href":550},[8,1376,553],{}," — Declares one ink plate for ",[8,1379,547],{},[1179,1381,1382,1386],{},[169,1383,1384],{"href":563},[8,1385,566],{}," — The dot coverage of one halftone screen: 1 inside a dot, 0 between, with the dot size set by an ink amount.",[1179,1388,1389,1393],{},[169,1390,1391],{"href":569},[8,1392,572],{}," — How much light passes one ink plate: white where the dot mask is 0, the ink color where it is 1.",[1179,1395,1396,1400],{},[169,1397,1398],{"href":582},[8,1399,585],{}," — Picks one whole effect recipe from a select prop, decided when the shader compiles.",[1179,1402,1403,1407],{},[169,1404,1405],{"href":595},[8,1406,598],{}," — The pixel grid of a dither: the layer inside it chopped into square cells of a given size.",[1179,1409,1410,1414],{},[169,1411,1412],{"href":601},[8,1413,604],{}," — Reduces each grid cell of the layer inside to 0 or 1 using a dither pattern.",[1179,1416,1417,1421,1422,1424],{},[169,1418,1419],{"href":607},[8,1420,610],{}," — A dither filter: colors the 0\u002F1 levels from ",[8,1423,604],{},", either with two colors of your own or with darkened and brightened versions of the layer's own pixels.",[1179,1426,1427,1432],{},[169,1428,1430],{"href":1429},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fscatterpoint",[8,1431,1152],{}," — One random point in each cell of a square grid: the classic scatter for glitter, stars, dust and sparkles.",[1179,1434,1435,1440],{},[169,1436,1438],{"href":1437},"\u002Fdocs\u002Fprimitives\u002Fpatterns\u002Fscatterpoints",[8,1439,1155],{}," — The scattered points of the four grid cells nearest the pixel, so anything drawn up to half a cell from its point shows whole, never clipped at a cell edge.",[1442,1443,1444],"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 .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}",{"title":285,"searchDepth":652,"depth":652,"links":1446},[1447,1448,1449,1450],{"id":311,"depth":652,"text":312},{"id":632,"depth":652,"text":633},{"id":1039,"depth":652,"text":1040},{"id":1169,"depth":652,"text":1170},"patterns","Repeating patterns you can color and animate: checkers, stripes, zigzags, rings, falling streaks, and tiled lattices of squares, hexagons, triangles, bricks, truchet arcs, woven threads and isometric cubes, plus the print-screen filters (halftone dots, CMYK plates and dithering).","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fpatterns.md","md","paint","Painting",{},"\u002Fdocs\u002Fprimitives\u002Fpatterns",{"title":147,"description":1452},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fpaint\u002Fpatterns.ts","docs\u002Fprimitives\u002F8.patterns\u002Findex",34,"JeCYy3QHMGNpqSfZWslFkE2VRZxpnv_6WTInldjTlss"]