[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"github-stars":3,"guide-nav":5,"doc-\u002Fdocs\u002Fprimitives\u002Fmath":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":138,"categorySlug":138,"categoryTitle":1523,"curated":550,"description":1524,"editUrl":1525,"extension":1526,"group":1527,"groupTitle":1528,"kind":1523,"meta":1529,"navigation":550,"path":1530,"seo":1531,"sourceUrl":1532,"stem":1533,"wordCount":1534,"__hash__":1535},"primitives\u002Fdocs\u002Fprimitives\u002F22.math\u002Findex.md","Math",{"type":133,"value":134,"toc":1518},"minimark",[135,139,182,211,216,525,529,1060,1064,1514],[136,137,131],"h1",{"id":138},"math",[140,141,142,143,146,147,150,151,154,155,158,159,162,163,170,171,174,175,181],"p",{},"The arithmetic you write your own paint with. Every word takes expressions or plain numbers\nand returns an expression the GPU works out once per pixel: ",[10,144,145],{},"mul(color, coverage)"," fades a\ncolor, ",[10,148,149],{},"smoothstep(a, b, dist)"," turns a distance into a soft mask, ",[10,152,153],{},"mix(a, b, t)"," blends two\ncolors. Props reach you as ",[10,156,157],{},"params.uniforms.\u003Cname>"," (or ",[10,160,161],{},"uniformOf(p('name'), params)","), a\nframe gives you the coordinate, and the words compose by nesting until you return a ",[164,165,167],"a",{"href":166},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fvec4",[10,168,169],{},"vec4","\ncolor from ",[10,172,173],{},"paint:",". Wrap anything you read twice in ",[164,176,178],{"href":177},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Flocal",[10,179,180],{},"local"," so it is computed once.",[183,184,189],"pre",{"className":185,"code":186,"language":187,"meta":188,"style":188},"language-ts shiki shiki-themes github-dark","import {math} from 'shaders\u002Fstd'\n","ts","",[10,190,191],{"__ignoreMap":188},[192,193,196,200,204,207],"span",{"class":194,"line":195},"line",1,[192,197,199],{"class":198},"snl16","import",[192,201,203],{"class":202},"s95oV"," {math} ",[192,205,206],{"class":198},"from",[192,208,210],{"class":209},"sU2Wk"," 'shaders\u002Fstd'\n",[212,213,215],"h2",{"id":214},"reach-for-it-when","Reach for it when",[217,218,219,232],"table",{},[220,221,222],"thead",{},[223,224,225,229],"tr",{},[226,227,228],"th",{},"When you need",[226,230,231],{},"Use",[233,234,235,268,289,310,335,346,365,386,411,424,443,456,493,506],"tbody",{},[223,236,237,241],{},[238,239,240],"td",{},"combining numbers, colors or coordinates",[238,242,243,249,250,249,256,249,262],{},[164,244,246],{"href":245},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fadd",[10,247,248],{},"add",", ",[164,251,253],{"href":252},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fsub",[10,254,255],{},"sub",[164,257,259],{"href":258},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fmul",[10,260,261],{},"mul",[164,263,265],{"href":264},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fdiv",[10,266,267],{},"div",[223,269,270,273],{},[238,271,272],{},"blending two colors or values by an amount",[238,274,275,281,282,288],{},[164,276,278],{"href":277},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fmix",[10,279,280],{},"mix"," with ",[164,283,285],{"href":284},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fsplat3",[10,286,287],{},"splat3"," for colors",[223,290,291,294],{},[238,292,293],{},"a soft edge from a distance",[238,295,296,302,303,309],{},[164,297,299],{"href":298},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fsmoothstep",[10,300,301],{},"smoothstep","; ",[164,304,306],{"href":305},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fstep",[10,307,308],{},"step"," for a hard one",[223,311,312,315],{},[238,313,314],{},"keeping a value in range",[238,316,317,249,323,249,329],{},[164,318,320],{"href":319},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fclamp",[10,321,322],{},"clamp",[164,324,326],{"href":325},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fmin",[10,327,328],{},"min",[164,330,332],{"href":331},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fmax",[10,333,334],{},"max",[223,336,337,340],{},[238,338,339],{},"a value you read more than once",[238,341,342],{},[164,343,344],{"href":177},[10,345,180],{},[223,347,348,351],{},[238,349,350],{},"the distance from a center or between points",[238,352,353,249,359],{},[164,354,356],{"href":355},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Flength",[10,357,358],{},"length",[164,360,362],{"href":361},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fdistance",[10,363,364],{},"distance",[223,366,367,370],{},[238,368,369],{},"a pattern that repeats across the canvas",[238,371,372,378,379,385],{},[164,373,375],{"href":374},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Ffract",[10,376,377],{},"fract"," and ",[164,380,382],{"href":381},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Ffloor",[10,383,384],{},"floor"," on a scaled coordinate",[223,387,388,391],{},[238,389,390],{},"a wave or a rotation over time",[238,392,393,249,399,249,405],{},[164,394,396],{"href":395},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fsin",[10,397,398],{},"sin",[164,400,402],{"href":401},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fcos",[10,403,404],{},"cos",[164,406,408],{"href":407},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Frotate2",[10,409,410],{},"rotate2",[223,412,413,416],{},[238,414,415],{},"an angle around a center",[238,417,418],{},[164,419,421],{"href":420},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fatan2",[10,422,423],{},"atan2",[223,425,426,429],{},[238,427,428],{},"a smooth falloff or a bell shape",[238,430,431,249,437],{},[164,432,434],{"href":433},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fexp",[10,435,436],{},"exp",[164,438,440],{"href":439},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fgaussbell",[10,441,442],{},"gaussBell",[223,444,445,448],{},[238,446,447],{},"a hinge that bends instead of creasing",[238,449,450],{},[164,451,453],{"href":452},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fsoftplus",[10,454,455],{},"softPlus",[223,457,458,461],{},[238,459,460],{},"picking one of two values per pixel",[238,462,463,281,469,249,475,249,481,249,487],{},[164,464,466],{"href":465},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fselect",[10,467,468],{},"select",[164,470,472],{"href":471},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Flt",[10,473,474],{},"lt",[164,476,478],{"href":477},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fgt",[10,479,480],{},"gt",[164,482,484],{"href":483},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fle",[10,485,486],{},"le",[164,488,490],{"href":489},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fge",[10,491,492],{},"ge",[223,494,495,498],{},[238,496,497],{},"several motions that must not move in step",[238,499,500],{},[164,501,503],{"href":502},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fhashphase",[10,504,505],{},"hashPhase",[223,507,508,511],{},[238,509,510],{},"the final color",[238,512,513,517,518,524],{},[164,514,515],{"href":166},[10,516,169],{}," from a ",[164,519,521],{"href":520},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fvec3",[10,522,523],{},"vec3"," and an alpha",[212,526,528],{"id":527},"example","Example",[183,530,532],{"className":185,"code":531,"language":187,"meta":188,"style":188},"import {defineShader, p, uniformOf, animatedTime, math, frames, transformColor, transformPosition} from 'shaders\u002Fstd'\n\nconst {add, sub, mul, sin, smoothstep, mix, splat3, local, vec4} = math\n\n\u002F\u002F Rings: concentric waves spreading from a draggable center, blended between two colors.\nexport const Rings = defineShader({\n  name: 'Rings',\n  animatedTime: {speed: 'speed'},\n  props: {\n    center: {default: {x: 0.5, y: 0.5}, transform: transformPosition},\n    colorA: {default: '#0b1026', transform: transformColor},\n    colorB: {default: '#7dd3fc', transform: transformColor},\n    frequency: {default: 24},\n    softness: {default: 0.25},\n    speed: {default: 1},\n  },\n  paint: (params) => {\n    const u = (name: string) => uniformOf(p(name), params)\n    const {dist} = frames.centredFrame({center: p('center')})(params, frames.surfaceOf(params))\n    \u002F\u002F A −1..1 wave along the distance, moved into 0..1 and computed once.\n    const wave = local(add(mul(sin(sub(mul(dist, u('frequency')), animatedTime(params))), 0.5), 0.5), 'wave')\n    \u002F\u002F softness 0 is a hard ring, 0.5 a smooth gradient between rings.\n    const band = smoothstep(sub(0.5, u('softness')), add(0.5, u('softness')), wave)\n    const rgb = mix(u('colorA').member('rgb'), u('colorB').member('rgb'), splat3(band))\n    return vec4(rgb, 1)\n  },\n})\n",[10,533,534,545,552,605,610,617,639,651,663,669,686,698,709,720,731,742,748,770,808,847,853,921,927,976,1033,1049,1054],{"__ignoreMap":188},[192,535,536,538,541,543],{"class":194,"line":195},[192,537,199],{"class":198},[192,539,540],{"class":202}," {defineShader, p, uniformOf, animatedTime, math, frames, transformColor, transformPosition} ",[192,542,206],{"class":198},[192,544,210],{"class":209},[192,546,548],{"class":194,"line":547},2,[192,549,551],{"emptyLinePlaceholder":550},true,"\n",[192,553,555,558,561,564,566,568,570,572,574,576,578,580,582,584,586,588,590,592,594,596,599,602],{"class":194,"line":554},3,[192,556,557],{"class":198},"const",[192,559,560],{"class":202}," {",[192,562,248],{"class":563},"sDLfK",[192,565,249],{"class":202},[192,567,255],{"class":563},[192,569,249],{"class":202},[192,571,261],{"class":563},[192,573,249],{"class":202},[192,575,398],{"class":563},[192,577,249],{"class":202},[192,579,301],{"class":563},[192,581,249],{"class":202},[192,583,280],{"class":563},[192,585,249],{"class":202},[192,587,287],{"class":563},[192,589,249],{"class":202},[192,591,180],{"class":563},[192,593,249],{"class":202},[192,595,169],{"class":563},[192,597,598],{"class":202},"} ",[192,600,601],{"class":198},"=",[192,603,604],{"class":202}," math\n",[192,606,608],{"class":194,"line":607},4,[192,609,551],{"emptyLinePlaceholder":550},[192,611,613],{"class":194,"line":612},5,[192,614,616],{"class":615},"sAwPA","\u002F\u002F Rings: concentric waves spreading from a draggable center, blended between two colors.\n",[192,618,620,623,626,629,632,636],{"class":194,"line":619},6,[192,621,622],{"class":198},"export",[192,624,625],{"class":198}," const",[192,627,628],{"class":563}," Rings",[192,630,631],{"class":198}," =",[192,633,635],{"class":634},"svObZ"," defineShader",[192,637,638],{"class":202},"({\n",[192,640,642,645,648],{"class":194,"line":641},7,[192,643,644],{"class":202},"  name: ",[192,646,647],{"class":209},"'Rings'",[192,649,650],{"class":202},",\n",[192,652,654,657,660],{"class":194,"line":653},8,[192,655,656],{"class":202},"  animatedTime: {speed: ",[192,658,659],{"class":209},"'speed'",[192,661,662],{"class":202},"},\n",[192,664,666],{"class":194,"line":665},9,[192,667,668],{"class":202},"  props: {\n",[192,670,672,675,678,681,683],{"class":194,"line":671},10,[192,673,674],{"class":202},"    center: {default: {x: ",[192,676,677],{"class":563},"0.5",[192,679,680],{"class":202},", y: ",[192,682,677],{"class":563},[192,684,685],{"class":202},"}, transform: transformPosition},\n",[192,687,689,692,695],{"class":194,"line":688},11,[192,690,691],{"class":202},"    colorA: {default: ",[192,693,694],{"class":209},"'#0b1026'",[192,696,697],{"class":202},", transform: transformColor},\n",[192,699,701,704,707],{"class":194,"line":700},12,[192,702,703],{"class":202},"    colorB: {default: ",[192,705,706],{"class":209},"'#7dd3fc'",[192,708,697],{"class":202},[192,710,712,715,718],{"class":194,"line":711},13,[192,713,714],{"class":202},"    frequency: {default: ",[192,716,717],{"class":563},"24",[192,719,662],{"class":202},[192,721,723,726,729],{"class":194,"line":722},14,[192,724,725],{"class":202},"    softness: {default: ",[192,727,728],{"class":563},"0.25",[192,730,662],{"class":202},[192,732,734,737,740],{"class":194,"line":733},15,[192,735,736],{"class":202},"    speed: {default: ",[192,738,739],{"class":563},"1",[192,741,662],{"class":202},[192,743,745],{"class":194,"line":744},16,[192,746,747],{"class":202},"  },\n",[192,749,751,754,757,761,764,767],{"class":194,"line":750},17,[192,752,753],{"class":634},"  paint",[192,755,756],{"class":202},": (",[192,758,760],{"class":759},"s9osk","params",[192,762,763],{"class":202},") ",[192,765,766],{"class":198},"=>",[192,768,769],{"class":202}," {\n",[192,771,773,776,779,781,784,787,790,793,795,797,800,803,805],{"class":194,"line":772},18,[192,774,775],{"class":198},"    const",[192,777,778],{"class":634}," u",[192,780,631],{"class":198},[192,782,783],{"class":202}," (",[192,785,786],{"class":759},"name",[192,788,789],{"class":198},":",[192,791,792],{"class":563}," string",[192,794,763],{"class":202},[192,796,766],{"class":198},[192,798,799],{"class":634}," uniformOf",[192,801,802],{"class":202},"(",[192,804,140],{"class":634},[192,806,807],{"class":202},"(name), params)\n",[192,809,811,813,815,818,820,822,825,828,831,833,835,838,841,844],{"class":194,"line":810},19,[192,812,775],{"class":198},[192,814,560],{"class":202},[192,816,817],{"class":563},"dist",[192,819,598],{"class":202},[192,821,601],{"class":198},[192,823,824],{"class":202}," frames.",[192,826,827],{"class":634},"centredFrame",[192,829,830],{"class":202},"({center: ",[192,832,140],{"class":634},[192,834,802],{"class":202},[192,836,837],{"class":209},"'center'",[192,839,840],{"class":202},")})(params, frames.",[192,842,843],{"class":634},"surfaceOf",[192,845,846],{"class":202},"(params))\n",[192,848,850],{"class":194,"line":849},20,[192,851,852],{"class":615},"    \u002F\u002F A −1..1 wave along the distance, moved into 0..1 and computed once.\n",[192,854,856,858,861,863,866,868,870,872,874,876,878,880,882,884,886,889,892,894,897,900,903,906,908,911,913,915,918],{"class":194,"line":855},21,[192,857,775],{"class":198},[192,859,860],{"class":563}," wave",[192,862,631],{"class":198},[192,864,865],{"class":634}," local",[192,867,802],{"class":202},[192,869,248],{"class":634},[192,871,802],{"class":202},[192,873,261],{"class":634},[192,875,802],{"class":202},[192,877,398],{"class":634},[192,879,802],{"class":202},[192,881,255],{"class":634},[192,883,802],{"class":202},[192,885,261],{"class":634},[192,887,888],{"class":202},"(dist, ",[192,890,891],{"class":634},"u",[192,893,802],{"class":202},[192,895,896],{"class":209},"'frequency'",[192,898,899],{"class":202},")), ",[192,901,902],{"class":634},"animatedTime",[192,904,905],{"class":202},"(params))), ",[192,907,677],{"class":563},[192,909,910],{"class":202},"), ",[192,912,677],{"class":563},[192,914,910],{"class":202},[192,916,917],{"class":209},"'wave'",[192,919,920],{"class":202},")\n",[192,922,924],{"class":194,"line":923},22,[192,925,926],{"class":615},"    \u002F\u002F softness 0 is a hard ring, 0.5 a smooth gradient between rings.\n",[192,928,930,932,935,937,940,942,944,946,948,950,952,954,957,959,961,963,965,967,969,971,973],{"class":194,"line":929},23,[192,931,775],{"class":198},[192,933,934],{"class":563}," band",[192,936,631],{"class":198},[192,938,939],{"class":634}," smoothstep",[192,941,802],{"class":202},[192,943,255],{"class":634},[192,945,802],{"class":202},[192,947,677],{"class":563},[192,949,249],{"class":202},[192,951,891],{"class":634},[192,953,802],{"class":202},[192,955,956],{"class":209},"'softness'",[192,958,899],{"class":202},[192,960,248],{"class":634},[192,962,802],{"class":202},[192,964,677],{"class":563},[192,966,249],{"class":202},[192,968,891],{"class":634},[192,970,802],{"class":202},[192,972,956],{"class":209},[192,974,975],{"class":202},")), wave)\n",[192,977,979,981,984,986,989,991,993,995,998,1001,1004,1006,1009,1011,1013,1015,1018,1020,1022,1024,1026,1028,1030],{"class":194,"line":978},24,[192,980,775],{"class":198},[192,982,983],{"class":563}," rgb",[192,985,631],{"class":198},[192,987,988],{"class":634}," mix",[192,990,802],{"class":202},[192,992,891],{"class":634},[192,994,802],{"class":202},[192,996,997],{"class":209},"'colorA'",[192,999,1000],{"class":202},").",[192,1002,1003],{"class":634},"member",[192,1005,802],{"class":202},[192,1007,1008],{"class":209},"'rgb'",[192,1010,910],{"class":202},[192,1012,891],{"class":634},[192,1014,802],{"class":202},[192,1016,1017],{"class":209},"'colorB'",[192,1019,1000],{"class":202},[192,1021,1003],{"class":634},[192,1023,802],{"class":202},[192,1025,1008],{"class":209},[192,1027,910],{"class":202},[192,1029,287],{"class":634},[192,1031,1032],{"class":202},"(band))\n",[192,1034,1036,1039,1042,1045,1047],{"class":194,"line":1035},25,[192,1037,1038],{"class":198},"    return",[192,1040,1041],{"class":634}," vec4",[192,1043,1044],{"class":202},"(rgb, ",[192,1046,739],{"class":563},[192,1048,920],{"class":202},[192,1050,1052],{"class":194,"line":1051},26,[192,1053,747],{"class":202},[192,1055,1057],{"class":194,"line":1056},27,[192,1058,1059],{"class":202},"})\n",[212,1061,1063],{"id":1062},"words","Words",[1065,1066,1068],"primitive-words",{":words":1067},"[{\"name\":\"add\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fadd\",\"summary\":\"The sum of two values.\"},{\"name\":\"sub\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fsub\",\"summary\":\"The first value minus the second.\"},{\"name\":\"mul\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fmul\",\"summary\":\"The product of two values.\"},{\"name\":\"div\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fdiv\",\"summary\":\"The first value divided by the second.\"},{\"name\":\"mix\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fmix\",\"summary\":\"A blend from `a` to `b` by `t`, where 0 gives `a` and 1 gives `b`.\"},{\"name\":\"smoothstep\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fsmoothstep\",\"summary\":\"A soft edge: 0 below `e0`, 1 above `e1`, an S-curve between.\"},{\"name\":\"clamp\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fclamp\",\"summary\":\"The value limited to the range `lo`..`hi`.\"},{\"name\":\"local\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Flocal\",\"summary\":\"A value computed once per pixel and shared by everything that reads it.\"},{\"name\":\"vec4\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fvec4\",\"summary\":\"A 4D vector, usually the final color with alpha.\"},{\"name\":\"vec3\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fvec3\",\"summary\":\"A 3D vector from three values, often a color without alpha.\"},{\"name\":\"vec2\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fvec2\",\"summary\":\"A 2D vector from two values.\"},{\"name\":\"splat3\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fsplat3\",\"summary\":\"One number copied into all three channels of a vec3.\"},{\"name\":\"length\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Flength\",\"summary\":\"The length of a vector.\"},{\"name\":\"distance\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fdistance\",\"summary\":\"The distance between two points.\"},{\"name\":\"abs\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fabs\",\"summary\":\"The value without its sign.\"},{\"name\":\"fract\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Ffract\",\"summary\":\"The fractional part of a value, 0..1.\"},{\"name\":\"floor\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Ffloor\",\"summary\":\"The value rounded down to a whole number.\"},{\"name\":\"min\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fmin\",\"summary\":\"The smaller of two values.\"},{\"name\":\"max\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fmax\",\"summary\":\"The larger of two values.\"},{\"name\":\"sin\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fsin\",\"summary\":\"The sine of an angle in radians, −1..1.\"},{\"name\":\"cos\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fcos\",\"summary\":\"The cosine of an angle in radians, −1..1.\"},{\"name\":\"step\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fstep\",\"summary\":\"A hard edge: 0 when `x` is below `edge`, 1 from `edge` on.\"},{\"name\":\"pow\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fpow\",\"summary\":\"The first value raised to the power of the second.\"},{\"name\":\"exp\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fexp\",\"summary\":\"e raised to the value.\"},{\"name\":\"sqrt\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fsqrt\",\"summary\":\"The square root of a value.\"},{\"name\":\"neg\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fneg\",\"summary\":\"The value with its sign flipped.\"},{\"name\":\"select\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fselect\",\"summary\":\"`ifTrue` when the condition holds, otherwise `ifFalse`.\"},{\"name\":\"lt\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Flt\",\"summary\":\"True when `a` is less than `b`.\"},{\"name\":\"gt\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fgt\",\"summary\":\"True when `a` is greater than `b`.\"},{\"name\":\"le\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fle\",\"summary\":\"True when `a` is less than or equal to `b`.\"},{\"name\":\"ge\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fge\",\"summary\":\"True when `a` is greater than or equal to `b`.\"},{\"name\":\"atan2\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fatan2\",\"summary\":\"The angle of the point (x, y) in radians, −π..π.\"},{\"name\":\"dot\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fdot\",\"summary\":\"The dot product of two vectors.\"},{\"name\":\"normalize\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fnormalize\",\"summary\":\"The vector scaled to length 1.\"},{\"name\":\"rotate2\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Frotate2\",\"summary\":\"A 2D point rotated around the origin.\"},{\"name\":\"gaussBell\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fgaussbell\",\"summary\":\"A bell curve: 1 at zero, falling toward 0 on both sides.\"},{\"name\":\"softPlus\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fsoftplus\",\"summary\":\"A soft hinge: about 0 for values well below zero, about `x` above, rounded near zero.\"},{\"name\":\"hashPhase\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fhashphase\",\"summary\":\"A random but stable angle in radians, 0..2π, from a seed.\"},{\"name\":\"sign\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fsign\",\"summary\":\"−1, 0 or 1 by the sign of the value.\"},{\"name\":\"ceil\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fceil\",\"summary\":\"The value rounded up to a whole number.\"},{\"name\":\"log\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Flog\",\"summary\":\"The natural logarithm of a value.\"},{\"name\":\"exp2\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fexp2\",\"summary\":\"2 raised to the value.\"},{\"name\":\"tan\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Ftan\",\"summary\":\"The tangent of an angle in radians.\"},{\"name\":\"cross\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fcross\",\"summary\":\"The cross product of two 3D vectors.\"},{\"name\":\"reflect\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Freflect\",\"summary\":\"The direction `i` bounced off a surface with unit normal `n`.\"},{\"name\":\"refract\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Frefract\",\"summary\":\"The direction `i` bent through a surface with unit normal `n`.\"},{\"name\":\"float\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmath\u002Ffloat\",\"summary\":\"A plain number as an expression.\"}]",[1069,1070,1071,1079,1086,1093,1100,1124,1139,1153,1160,1167,1174,1183,1190,1197,1204,1213,1220,1227,1234,1241,1248,1255,1273,1282,1289,1298,1307,1321,1333,1344,1355,1366,1373,1382,1391,1398,1405,1415,1422,1431,1440,1449,1458,1467,1476,1492,1505],"ul",{},[1072,1073,1074,1078],"li",{},[164,1075,1076],{"href":245},[10,1077,248],{}," — The sum of two values.",[1072,1080,1081,1085],{},[164,1082,1083],{"href":252},[10,1084,255],{}," — The first value minus the second.",[1072,1087,1088,1092],{},[164,1089,1090],{"href":258},[10,1091,261],{}," — The product of two values.",[1072,1094,1095,1099],{},[164,1096,1097],{"href":264},[10,1098,267],{}," — The first value divided by the second.",[1072,1101,1102,1106,1107,1109,1110,1113,1114,1117,1118,1120,1121,1123],{},[164,1103,1104],{"href":277},[10,1105,280],{}," — A blend from ",[10,1108,164],{}," to ",[10,1111,1112],{},"b"," by ",[10,1115,1116],{},"t",", where 0 gives ",[10,1119,164],{}," and 1 gives ",[10,1122,1112],{},".",[1072,1125,1126,1130,1131,1134,1135,1138],{},[164,1127,1128],{"href":298},[10,1129,301],{}," — A soft edge: 0 below ",[10,1132,1133],{},"e0",", 1 above ",[10,1136,1137],{},"e1",", an S-curve between.",[1072,1140,1141,1145,1146,1149,1150,1123],{},[164,1142,1143],{"href":319},[10,1144,322],{}," — The value limited to the range ",[10,1147,1148],{},"lo","..",[10,1151,1152],{},"hi",[1072,1154,1155,1159],{},[164,1156,1157],{"href":177},[10,1158,180],{}," — A value computed once per pixel and shared by everything that reads it.",[1072,1161,1162,1166],{},[164,1163,1164],{"href":166},[10,1165,169],{}," — A 4D vector, usually the final color with alpha.",[1072,1168,1169,1173],{},[164,1170,1171],{"href":520},[10,1172,523],{}," — A 3D vector from three values, often a color without alpha.",[1072,1175,1176,1182],{},[164,1177,1179],{"href":1178},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fvec2",[10,1180,1181],{},"vec2"," — A 2D vector from two values.",[1072,1184,1185,1189],{},[164,1186,1187],{"href":284},[10,1188,287],{}," — One number copied into all three channels of a vec3.",[1072,1191,1192,1196],{},[164,1193,1194],{"href":355},[10,1195,358],{}," — The length of a vector.",[1072,1198,1199,1203],{},[164,1200,1201],{"href":361},[10,1202,364],{}," — The distance between two points.",[1072,1205,1206,1212],{},[164,1207,1209],{"href":1208},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fabs",[10,1210,1211],{},"abs"," — The value without its sign.",[1072,1214,1215,1219],{},[164,1216,1217],{"href":374},[10,1218,377],{}," — The fractional part of a value, 0..1.",[1072,1221,1222,1226],{},[164,1223,1224],{"href":381},[10,1225,384],{}," — The value rounded down to a whole number.",[1072,1228,1229,1233],{},[164,1230,1231],{"href":325},[10,1232,328],{}," — The smaller of two values.",[1072,1235,1236,1240],{},[164,1237,1238],{"href":331},[10,1239,334],{}," — The larger of two values.",[1072,1242,1243,1247],{},[164,1244,1245],{"href":395},[10,1246,398],{}," — The sine of an angle in radians, −1..1.",[1072,1249,1250,1254],{},[164,1251,1252],{"href":401},[10,1253,404],{}," — The cosine of an angle in radians, −1..1.",[1072,1256,1257,1261,1262,1265,1266,1269,1270,1272],{},[164,1258,1259],{"href":305},[10,1260,308],{}," — A hard edge: 0 when ",[10,1263,1264],{},"x"," is below ",[10,1267,1268],{},"edge",", 1 from ",[10,1271,1268],{}," on.",[1072,1274,1275,1281],{},[164,1276,1278],{"href":1277},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fpow",[10,1279,1280],{},"pow"," — The first value raised to the power of the second.",[1072,1283,1284,1288],{},[164,1285,1286],{"href":433},[10,1287,436],{}," — e raised to the value.",[1072,1290,1291,1297],{},[164,1292,1294],{"href":1293},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fsqrt",[10,1295,1296],{},"sqrt"," — The square root of a value.",[1072,1299,1300,1306],{},[164,1301,1303],{"href":1302},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fneg",[10,1304,1305],{},"neg"," — The value with its sign flipped.",[1072,1308,1309,1313,1314,1317,1318,1123],{},[164,1310,1311],{"href":465},[10,1312,468],{}," — ",[10,1315,1316],{},"ifTrue"," when the condition holds, otherwise ",[10,1319,1320],{},"ifFalse",[1072,1322,1323,1327,1328,1330,1331,1123],{},[164,1324,1325],{"href":471},[10,1326,474],{}," — True when ",[10,1329,164],{}," is less than ",[10,1332,1112],{},[1072,1334,1335,1327,1339,1341,1342,1123],{},[164,1336,1337],{"href":477},[10,1338,480],{},[10,1340,164],{}," is greater than ",[10,1343,1112],{},[1072,1345,1346,1327,1350,1352,1353,1123],{},[164,1347,1348],{"href":483},[10,1349,486],{},[10,1351,164],{}," is less than or equal to ",[10,1354,1112],{},[1072,1356,1357,1327,1361,1363,1364,1123],{},[164,1358,1359],{"href":489},[10,1360,492],{},[10,1362,164],{}," is greater than or equal to ",[10,1365,1112],{},[1072,1367,1368,1372],{},[164,1369,1370],{"href":420},[10,1371,423],{}," — The angle of the point (x, y) in radians, −π..π.",[1072,1374,1375,1381],{},[164,1376,1378],{"href":1377},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fdot",[10,1379,1380],{},"dot"," — The dot product of two vectors.",[1072,1383,1384,1390],{},[164,1385,1387],{"href":1386},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fnormalize",[10,1388,1389],{},"normalize"," — The vector scaled to length 1.",[1072,1392,1393,1397],{},[164,1394,1395],{"href":407},[10,1396,410],{}," — A 2D point rotated around the origin.",[1072,1399,1400,1404],{},[164,1401,1402],{"href":439},[10,1403,442],{}," — A bell curve: 1 at zero, falling toward 0 on both sides.",[1072,1406,1407,1411,1412,1414],{},[164,1408,1409],{"href":452},[10,1410,455],{}," — A soft hinge: about 0 for values well below zero, about ",[10,1413,1264],{}," above, rounded near zero.",[1072,1416,1417,1421],{},[164,1418,1419],{"href":502},[10,1420,505],{}," — A random but stable angle in radians, 0..2π, from a seed.",[1072,1423,1424,1430],{},[164,1425,1427],{"href":1426},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fsign",[10,1428,1429],{},"sign"," — −1, 0 or 1 by the sign of the value.",[1072,1432,1433,1439],{},[164,1434,1436],{"href":1435},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fceil",[10,1437,1438],{},"ceil"," — The value rounded up to a whole number.",[1072,1441,1442,1448],{},[164,1443,1445],{"href":1444},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Flog",[10,1446,1447],{},"log"," — The natural logarithm of a value.",[1072,1450,1451,1457],{},[164,1452,1454],{"href":1453},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fexp2",[10,1455,1456],{},"exp2"," — 2 raised to the value.",[1072,1459,1460,1466],{},[164,1461,1463],{"href":1462},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Ftan",[10,1464,1465],{},"tan"," — The tangent of an angle in radians.",[1072,1468,1469,1475],{},[164,1470,1472],{"href":1471},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Fcross",[10,1473,1474],{},"cross"," — The cross product of two 3D vectors.",[1072,1477,1478,1484,1485,1488,1489,1123],{},[164,1479,1481],{"href":1480},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Freflect",[10,1482,1483],{},"reflect"," — The direction ",[10,1486,1487],{},"i"," bounced off a surface with unit normal ",[10,1490,1491],{},"n",[1072,1493,1494,1484,1500,1502,1503,1123],{},[164,1495,1497],{"href":1496},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Frefract",[10,1498,1499],{},"refract",[10,1501,1487],{}," bent through a surface with unit normal ",[10,1504,1491],{},[1072,1506,1507,1513],{},[164,1508,1510],{"href":1509},"\u002Fdocs\u002Fprimitives\u002Fmath\u002Ffloat",[10,1511,1512],{},"float"," — A plain number as an expression.",[1515,1516,1517],"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":188,"searchDepth":547,"depth":547,"links":1519},[1520,1521,1522],{"id":214,"depth":547,"text":215},{"id":527,"depth":547,"text":528},{"id":1062,"depth":547,"text":1063},null,"The arithmetic you write your own paint with.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fmath.md","md","space","Shapes, frames & warps",{},"\u002Fdocs\u002Fprimitives\u002Fmath",{"title":131,"description":1524},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fmath.ts","docs\u002Fprimitives\u002F22.math\u002Findex",47,"KLQgzNLx2F75QgF4_3wR9bVHG5jfpfY6Ye_E38ol6jE"]