[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Fshape":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":1068,"categorySlug":1068,"categoryTitle":9,"curated":482,"description":1069,"editUrl":1070,"extension":1071,"group":1072,"groupTitle":1073,"kind":9,"meta":1074,"navigation":482,"path":1075,"seo":1076,"sourceUrl":1077,"stem":1078,"wordCount":711,"__hash__":1079},"primitives\u002Fdocs\u002Fprimitives\u002F18.shape\u002Findex.md","Shapes",{"type":149,"value":150,"toc":1063},"minimark",[151,155,164,221,250,255,457,461,932,936,1059],[152,153,147],"h1",{"id":154},"shapes",[156,157,158,159,163],"p",{},"The 2D shapes: a circle, a star, a heart and a dozen more, each as a function of a point\nthat tells you how far that point is from the shape's edge. The number is a ",[160,161,162],"strong",{},"signed\ndistance",": negative inside, zero on the edge, positive outside. Sizes are in uv, where 1 is\nthe canvas height.",[156,165,166,167,170,171,174,175,178,179,182,183,186,187,190,191,194,195,197,198,197,201,204,205,208,209,212,213,216,217,220],{},"A shape becomes a component through the ",[8,168,169],{},"shape:"," field of ",[8,172,173],{},"defineShader",". Its ",[8,176,177],{},"distance","\nreceives the shape-local point (already centred on the ",[8,180,181],{},"center"," prop, aspect-corrected,\nrotated and y down) and ",[8,184,185],{},"u('name')"," for each of your size props, and returns one of these\nwords. ",[8,188,189],{},"shapeProps"," declares those size props. ",[8,192,193],{},"bounds"," names the props that size the\nselection box in the editor. The engine adds the ",[8,196,181],{},", ",[8,199,200],{},"rotation",[8,202,203],{},"color",", stroke and\nsoftness props, the bounding box and the anti-aliased pixel mask, so a shape shader is a\nfew lines. Shapes also combine with ",[8,206,207],{},"math",": ",[8,210,211],{},"mix"," two distances to morph between them,\n",[8,214,215],{},"min"," for a union, ",[8,218,219],{},"max"," for an intersection.",[222,223,228],"pre",{"className":224,"code":225,"language":226,"meta":227,"style":227},"language-ts shiki shiki-themes github-dark","import {shape} from 'shaders\u002Fstd'\n","ts","",[8,229,230],{"__ignoreMap":227},[231,232,235,239,243,246],"span",{"class":233,"line":234},"line",1,[231,236,238],{"class":237},"snl16","import",[231,240,242],{"class":241},"s95oV"," {shape} ",[231,244,245],{"class":237},"from",[231,247,249],{"class":248},"sU2Wk"," 'shaders\u002Fstd'\n",[251,252,254],"h2",{"id":253},"reach-for-it-when","Reach for it when",[256,257,258,271],"table",{},[259,260,261],"thead",{},[262,263,264,268],"tr",{},[265,266,267],"th",{},"When you need",[265,269,270],{},"Use",[272,273,274,289,302,315,328,347,360,380,411,430,443],"tbody",{},[262,275,276,280],{},[277,278,279],"td",{},"a disc",[277,281,282],{},[283,284,286],"a",{"href":285},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fcircle",[8,287,288],{},"circle",[262,290,291,294],{},[277,292,293],{},"an oval",[277,295,296],{},[283,297,299],{"href":298},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fellipse",[8,300,301],{},"ellipse",[262,303,304,307],{},[277,305,306],{},"a card, a button, a pill",[277,308,309],{},[283,310,312],{"href":311},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Froundedrect",[8,313,314],{},"roundedRect",[262,316,317,320],{},[277,318,319],{},"a triangle, a hexagon, any regular polygon",[277,321,322],{},[283,323,325],{"href":324},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fpolygon",[8,326,327],{},"polygon",[262,329,330,333],{},[277,331,332],{},"a star or a flower",[277,334,335,197,341],{},[283,336,338],{"href":337},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fstar",[8,339,340],{},"star",[283,342,344],{"href":343},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fflower",[8,345,346],{},"flower",[262,348,349,352],{},[277,350,351],{},"a donut",[277,353,354],{},[283,355,357],{"href":356},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fring",[8,358,359],{},"ring",[262,361,362,365],{},[277,363,364],{},"a pie slice or a gauge arc",[277,366,367,373,374],{},[283,368,370],{"href":369},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Farc",[8,371,372],{},"arc"," with ",[283,375,377],{"href":376},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Faperture-to-half-angle",[8,378,379],{},"APERTURE_TO_HALF_ANGLE",[262,381,382,385],{},[277,383,384],{},"a heart, a drop, a lens, a moon",[277,386,387,197,393,197,399,197,405],{},[283,388,390],{"href":389},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fheart",[8,391,392],{},"heart",[283,394,396],{"href":395},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fteardrop",[8,397,398],{},"teardrop",[283,400,402],{"href":401},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fvesica",[8,403,404],{},"vesica",[283,406,408],{"href":407},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fcrescent",[8,409,410],{},"crescent",[262,412,413,416],{},[277,414,415],{},"a slanted or tapered box",[277,417,418,197,424],{},[283,419,421],{"href":420},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fparallelogram",[8,422,423],{},"parallelogram",[283,425,427],{"href":426},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Ftrapezoid",[8,428,429],{},"trapezoid",[262,431,432,435],{},[277,433,434],{},"a plus sign",[277,436,437],{},[283,438,440],{"href":439},"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fcross",[8,441,442],{},"cross",[262,444,445,448],{},[277,446,447],{},"rounded corners on a sharp shape",[277,449,450,452,453],{},[8,451,211],{}," toward ",[283,454,455],{"href":285},[8,456,288],{},[251,458,460],{"id":459},"example","Example",[222,462,464],{"className":224,"code":463,"language":226,"meta":227,"style":227},"import {defineShader, shape, math} from 'shaders\u002Fstd'\n\nconst {polygon, circle} = shape\n\n\u002F\u002F A regular polygon whose corners round off toward a circle.\nexport const Hexagon = defineShader({\n  role: 'shape',\n  name: 'Hexagon',\n  description: 'Regular polygon with adjustable sides and corner rounding',\n  shape: {\n    distance: ({x, y}, u) =>\n      math.mix(polygon(x, y, u('radius'), u('sides')), circle(x, y, u('radius')), u('rounding')),\n    colorDescription: 'Fill color of the polygon',\n    centerDescription: 'Center position of the polygon',\n    bounds: {size: {width: 'radius', height: 'radius'}},\n    shapeProps: {\n      radius: {\n        default: 0.4,\n        description: 'Distance from the center to the middle of each side',\n        ui: {type: 'range', min: 0, max: 1, step: 0.01, label: 'Radius', group: 'Shape'},\n      },\n      sides: {\n        default: 6,\n        description: 'Number of sides (3 = triangle, 4 = square, 6 = hexagon)',\n        ui: {type: 'range', min: 3, max: 12, step: 1, label: 'Sides', group: 'Shape'},\n      },\n      rounding: {\n        default: 0,\n        description: 'Corner rounding: 0 is sharp, 1 becomes a circle',\n        ui: {type: 'range', min: 0, max: 1, step: 0.01, label: 'Rounding', group: 'Shape'},\n      },\n    },\n  },\n})\n",[8,465,466,477,484,509,514,521,543,555,566,577,583,613,671,682,693,709,715,721,732,743,785,791,797,807,817,849,854,860,869,879,909,914,920,926],{"__ignoreMap":227},[231,467,468,470,473,475],{"class":233,"line":234},[231,469,238],{"class":237},[231,471,472],{"class":241}," {defineShader, shape, math} ",[231,474,245],{"class":237},[231,476,249],{"class":248},[231,478,480],{"class":233,"line":479},2,[231,481,483],{"emptyLinePlaceholder":482},true,"\n",[231,485,487,490,493,496,498,500,503,506],{"class":233,"line":486},3,[231,488,489],{"class":237},"const",[231,491,492],{"class":241}," {",[231,494,327],{"class":495},"sDLfK",[231,497,197],{"class":241},[231,499,288],{"class":495},[231,501,502],{"class":241},"} ",[231,504,505],{"class":237},"=",[231,507,508],{"class":241}," shape\n",[231,510,512],{"class":233,"line":511},4,[231,513,483],{"emptyLinePlaceholder":482},[231,515,517],{"class":233,"line":516},5,[231,518,520],{"class":519},"sAwPA","\u002F\u002F A regular polygon whose corners round off toward a circle.\n",[231,522,524,527,530,533,536,540],{"class":233,"line":523},6,[231,525,526],{"class":237},"export",[231,528,529],{"class":237}," const",[231,531,532],{"class":495}," Hexagon",[231,534,535],{"class":237}," =",[231,537,539],{"class":538},"svObZ"," defineShader",[231,541,542],{"class":241},"({\n",[231,544,546,549,552],{"class":233,"line":545},7,[231,547,548],{"class":241},"  role: ",[231,550,551],{"class":248},"'shape'",[231,553,554],{"class":241},",\n",[231,556,558,561,564],{"class":233,"line":557},8,[231,559,560],{"class":241},"  name: ",[231,562,563],{"class":248},"'Hexagon'",[231,565,554],{"class":241},[231,567,569,572,575],{"class":233,"line":568},9,[231,570,571],{"class":241},"  description: ",[231,573,574],{"class":248},"'Regular polygon with adjustable sides and corner rounding'",[231,576,554],{"class":241},[231,578,580],{"class":233,"line":579},10,[231,581,582],{"class":241},"  shape: {\n",[231,584,586,589,592,596,598,601,604,607,610],{"class":233,"line":585},11,[231,587,588],{"class":538},"    distance",[231,590,591],{"class":241},": ({",[231,593,595],{"class":594},"s9osk","x",[231,597,197],{"class":241},[231,599,600],{"class":594},"y",[231,602,603],{"class":241},"}, ",[231,605,606],{"class":594},"u",[231,608,609],{"class":241},") ",[231,611,612],{"class":237},"=>\n",[231,614,616,619,621,624,626,629,631,633,636,639,641,643,646,649,651,653,655,657,659,661,663,665,668],{"class":233,"line":615},12,[231,617,618],{"class":241},"      math.",[231,620,211],{"class":538},[231,622,623],{"class":241},"(",[231,625,327],{"class":538},[231,627,628],{"class":241},"(x, y, ",[231,630,606],{"class":538},[231,632,623],{"class":241},[231,634,635],{"class":248},"'radius'",[231,637,638],{"class":241},"), ",[231,640,606],{"class":538},[231,642,623],{"class":241},[231,644,645],{"class":248},"'sides'",[231,647,648],{"class":241},")), ",[231,650,288],{"class":538},[231,652,628],{"class":241},[231,654,606],{"class":538},[231,656,623],{"class":241},[231,658,635],{"class":248},[231,660,648],{"class":241},[231,662,606],{"class":538},[231,664,623],{"class":241},[231,666,667],{"class":248},"'rounding'",[231,669,670],{"class":241},")),\n",[231,672,674,677,680],{"class":233,"line":673},13,[231,675,676],{"class":241},"    colorDescription: ",[231,678,679],{"class":248},"'Fill color of the polygon'",[231,681,554],{"class":241},[231,683,685,688,691],{"class":233,"line":684},14,[231,686,687],{"class":241},"    centerDescription: ",[231,689,690],{"class":248},"'Center position of the polygon'",[231,692,554],{"class":241},[231,694,696,699,701,704,706],{"class":233,"line":695},15,[231,697,698],{"class":241},"    bounds: {size: {width: ",[231,700,635],{"class":248},[231,702,703],{"class":241},", height: ",[231,705,635],{"class":248},[231,707,708],{"class":241},"}},\n",[231,710,712],{"class":233,"line":711},16,[231,713,714],{"class":241},"    shapeProps: {\n",[231,716,718],{"class":233,"line":717},17,[231,719,720],{"class":241},"      radius: {\n",[231,722,724,727,730],{"class":233,"line":723},18,[231,725,726],{"class":241},"        default: ",[231,728,729],{"class":495},"0.4",[231,731,554],{"class":241},[231,733,735,738,741],{"class":233,"line":734},19,[231,736,737],{"class":241},"        description: ",[231,739,740],{"class":248},"'Distance from the center to the middle of each side'",[231,742,554],{"class":241},[231,744,746,749,752,755,758,761,764,767,770,773,776,779,782],{"class":233,"line":745},20,[231,747,748],{"class":241},"        ui: {type: ",[231,750,751],{"class":248},"'range'",[231,753,754],{"class":241},", min: ",[231,756,757],{"class":495},"0",[231,759,760],{"class":241},", max: ",[231,762,763],{"class":495},"1",[231,765,766],{"class":241},", step: ",[231,768,769],{"class":495},"0.01",[231,771,772],{"class":241},", label: ",[231,774,775],{"class":248},"'Radius'",[231,777,778],{"class":241},", group: ",[231,780,781],{"class":248},"'Shape'",[231,783,784],{"class":241},"},\n",[231,786,788],{"class":233,"line":787},21,[231,789,790],{"class":241},"      },\n",[231,792,794],{"class":233,"line":793},22,[231,795,796],{"class":241},"      sides: {\n",[231,798,800,802,805],{"class":233,"line":799},23,[231,801,726],{"class":241},[231,803,804],{"class":495},"6",[231,806,554],{"class":241},[231,808,810,812,815],{"class":233,"line":809},24,[231,811,737],{"class":241},[231,813,814],{"class":248},"'Number of sides (3 = triangle, 4 = square, 6 = hexagon)'",[231,816,554],{"class":241},[231,818,820,822,824,826,829,831,834,836,838,840,843,845,847],{"class":233,"line":819},25,[231,821,748],{"class":241},[231,823,751],{"class":248},[231,825,754],{"class":241},[231,827,828],{"class":495},"3",[231,830,760],{"class":241},[231,832,833],{"class":495},"12",[231,835,766],{"class":241},[231,837,763],{"class":495},[231,839,772],{"class":241},[231,841,842],{"class":248},"'Sides'",[231,844,778],{"class":241},[231,846,781],{"class":248},[231,848,784],{"class":241},[231,850,852],{"class":233,"line":851},26,[231,853,790],{"class":241},[231,855,857],{"class":233,"line":856},27,[231,858,859],{"class":241},"      rounding: {\n",[231,861,863,865,867],{"class":233,"line":862},28,[231,864,726],{"class":241},[231,866,757],{"class":495},[231,868,554],{"class":241},[231,870,872,874,877],{"class":233,"line":871},29,[231,873,737],{"class":241},[231,875,876],{"class":248},"'Corner rounding: 0 is sharp, 1 becomes a circle'",[231,878,554],{"class":241},[231,880,882,884,886,888,890,892,894,896,898,900,903,905,907],{"class":233,"line":881},30,[231,883,748],{"class":241},[231,885,751],{"class":248},[231,887,754],{"class":241},[231,889,757],{"class":495},[231,891,760],{"class":241},[231,893,763],{"class":495},[231,895,766],{"class":241},[231,897,769],{"class":495},[231,899,772],{"class":241},[231,901,902],{"class":248},"'Rounding'",[231,904,778],{"class":241},[231,906,781],{"class":248},[231,908,784],{"class":241},[231,910,912],{"class":233,"line":911},31,[231,913,790],{"class":241},[231,915,917],{"class":233,"line":916},32,[231,918,919],{"class":241},"    },\n",[231,921,923],{"class":233,"line":922},33,[231,924,925],{"class":241},"  },\n",[231,927,929],{"class":233,"line":928},34,[231,930,931],{"class":241},"})\n",[251,933,935],{"id":934},"words","Words",[937,938,940],"primitive-words",{":words":939},"[{\"name\":\"circle\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fcircle\",\"summary\":\"A circle of a given radius.\"},{\"name\":\"ellipse\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fellipse\",\"summary\":\"An ellipse with separate horizontal and vertical radii.\"},{\"name\":\"roundedRect\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Froundedrect\",\"summary\":\"A rectangle with rounded corners.\"},{\"name\":\"polygon\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fpolygon\",\"summary\":\"A regular polygon with any number of sides.\"},{\"name\":\"star\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fstar\",\"summary\":\"A star with straight sides and sharp points.\"},{\"name\":\"flower\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fflower\",\"summary\":\"A flower with pointed petals and V-shaped valleys between them.\"},{\"name\":\"heart\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fheart\",\"summary\":\"A heart, point down at rotation 0.\"},{\"name\":\"ring\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fring\",\"summary\":\"A ring: a circular band around a centre.\"},{\"name\":\"arc\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Farc\",\"summary\":\"A pie wedge: a filled sector of a circle.\"},{\"name\":\"APERTURE_TO_HALF_ANGLE\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Faperture-to-half-angle\",\"summary\":\"The factor that turns an opening angle in degrees into the half-angle `arc` takes.\"},{\"name\":\"vesica\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fvesica\",\"summary\":\"A vesica: the lens where two equal circles overlap.\"},{\"name\":\"crescent\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fcrescent\",\"summary\":\"A crescent: a disc with a smaller disc bitten out of it.\"},{\"name\":\"teardrop\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fteardrop\",\"summary\":\"A teardrop: a round bulb tapering to a sharp point, point up at rotation 0.\"},{\"name\":\"cross\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fcross\",\"summary\":\"A plus-shaped cross with four equal arms.\"},{\"name\":\"trapezoid\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Ftrapezoid\",\"summary\":\"A trapezoid: a four-sided shape with a flat top and bottom of different widths.\"},{\"name\":\"parallelogram\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fshape\u002Fparallelogram\",\"summary\":\"A parallelogram: a rectangle with its top edge slid sideways.\"}]",[941,942,943,951,958,965,972,979,986,993,1000,1007,1017,1024,1031,1038,1045,1052],"ul",{},[944,945,946,950],"li",{},[283,947,948],{"href":285},[8,949,288],{}," — A circle of a given radius.",[944,952,953,957],{},[283,954,955],{"href":298},[8,956,301],{}," — An ellipse with separate horizontal and vertical radii.",[944,959,960,964],{},[283,961,962],{"href":311},[8,963,314],{}," — A rectangle with rounded corners.",[944,966,967,971],{},[283,968,969],{"href":324},[8,970,327],{}," — A regular polygon with any number of sides.",[944,973,974,978],{},[283,975,976],{"href":337},[8,977,340],{}," — A star with straight sides and sharp points.",[944,980,981,985],{},[283,982,983],{"href":343},[8,984,346],{}," — A flower with pointed petals and V-shaped valleys between them.",[944,987,988,992],{},[283,989,990],{"href":389},[8,991,392],{}," — A heart, point down at rotation 0.",[944,994,995,999],{},[283,996,997],{"href":356},[8,998,359],{}," — A ring: a circular band around a centre.",[944,1001,1002,1006],{},[283,1003,1004],{"href":369},[8,1005,372],{}," — A pie wedge: a filled sector of a circle.",[944,1008,1009,1013,1014,1016],{},[283,1010,1011],{"href":376},[8,1012,379],{}," — The factor that turns an opening angle in degrees into the half-angle ",[8,1015,372],{}," takes.",[944,1018,1019,1023],{},[283,1020,1021],{"href":401},[8,1022,404],{}," — A vesica: the lens where two equal circles overlap.",[944,1025,1026,1030],{},[283,1027,1028],{"href":407},[8,1029,410],{}," — A crescent: a disc with a smaller disc bitten out of it.",[944,1032,1033,1037],{},[283,1034,1035],{"href":395},[8,1036,398],{}," — A teardrop: a round bulb tapering to a sharp point, point up at rotation 0.",[944,1039,1040,1044],{},[283,1041,1042],{"href":439},[8,1043,442],{}," — A plus-shaped cross with four equal arms.",[944,1046,1047,1051],{},[283,1048,1049],{"href":426},[8,1050,429],{}," — A trapezoid: a four-sided shape with a flat top and bottom of different widths.",[944,1053,1054,1058],{},[283,1055,1056],{"href":420},[8,1057,423],{}," — A parallelogram: a rectangle with its top edge slid sideways.",[1060,1061,1062],"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}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":227,"searchDepth":479,"depth":479,"links":1064},[1065,1066,1067],{"id":253,"depth":479,"text":254},{"id":459,"depth":479,"text":460},{"id":934,"depth":479,"text":935},"shape","The 2D shapes: a circle, a star, a heart and a dozen more, each as a function of a point that tells you how far that point is from the shape's edge.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fshape.md","md","space","Shapes, frames & warps",{},"\u002Fdocs\u002Fprimitives\u002Fshape",{"title":147,"description":1069},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fshape.ts","docs\u002Fprimitives\u002F18.shape\u002Findex","u4E-XENOoaLGwT4-Q2jpP72SrgOhtIGuJmhE2SXaQ6U"]