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