[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Fwarps":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":154,"categorySlug":154,"categoryTitle":9,"curated":553,"description":971,"editUrl":972,"extension":973,"group":974,"groupTitle":975,"kind":9,"meta":976,"navigation":553,"path":977,"seo":978,"sourceUrl":979,"stem":980,"wordCount":981,"__hash__":982},"primitives\u002Fdocs\u002Fprimitives\u002F20.warps\u002Findex.md","Warps",{"type":149,"value":150,"toc":966},"minimark",[151,155,168,220,234,263,268,528,532,792,796,962],[152,153,147],"h1",{"id":154},"warps",[156,157,158,159,162,163,167],"p",{},"Words for the ",[8,160,161],{},"map:"," field. A ",[164,165,166],"strong",{},"warp"," is a component that moves the pixels of the layer\ninside it (the child): for every pixel on screen, the map says where in the child to look.\nTwisting, bulging, mirroring, tilting and wiping are all warps. Positions are in uv (0–1\nacross the canvas, y down) and angles are in degrees.",[156,169,170,171,173,174,177,178,180,181,184,185,184,188,191,192,195,196,199,200,203,204,207,208,211,212,215,216,219],{},"A definition with a ",[8,172,161],{}," is a warp, nothing else to declare. Most maps can look outside\nthe child, so the definition also says what happens there with ",[8,175,176],{},"edges",": the default reads\nan ",[8,179,176],{}," prop holding ",[8,182,183],{},"'stretch'",", ",[8,186,187],{},"'transparent'",[8,189,190],{},"'mirror'"," or ",[8,193,194],{},"'wrap'","; a number bakes\none mode in (",[8,197,198],{},"edges: 1"," is transparent); ",[8,201,202],{},"'none'"," is for a map that never leaves the child.\n",[8,205,206],{},"resample"," picks the texture filter, ",[8,209,210],{},"'catmullRom'"," (the default, sharp under\nmagnification) or ",[8,213,214],{},"'bilinear'",". Animated warps read the layer's clock, so declare\n",[8,217,218],{},"animatedTime: {speed: 'speed'}",".",[156,221,222,223,230,231,219],{},"One word is not a map: ",[224,225,227],"a",{"href":226},"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fdisplacebylayer",[8,228,229],{},"displaceByLayer"," reads a second layer, so it goes in ",[8,232,233],{},"effect:",[235,236,241],"pre",{"className":237,"code":238,"language":239,"meta":240,"style":240},"language-ts shiki shiki-themes github-dark","import {warps} from 'shaders\u002Fstd'\n","ts","",[8,242,243],{"__ignoreMap":240},[244,245,248,252,256,259],"span",{"class":246,"line":247},"line",1,[244,249,251],{"class":250},"snl16","import",[244,253,255],{"class":254},"s95oV"," {warps} ",[244,257,258],{"class":250},"from",[244,260,262],{"class":261},"sU2Wk"," 'shaders\u002Fstd'\n",[264,265,267],"h2",{"id":266},"reach-for-it-when","Reach for it when",[269,270,271,284],"table",{},[272,273,274],"thead",{},[275,276,277,281],"tr",{},[278,279,280],"th",{},"When you need",[278,282,283],{},"Use",[285,286,287,301,314,327,344,357,370,383,396,409,422,435,454,467,480,495,514],"tbody",{},[275,288,289,293],{},[290,291,292],"td",{},"twist the picture around a point",[290,294,295],{},[224,296,298],{"href":297},"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Ftwirl",[8,299,300],{},"twirl",[275,302,303,306],{},[290,304,305],{},"a magnifying glass or a pinch",[290,307,308],{},[224,309,311],{"href":310},"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fbulge",[8,312,313],{},"bulge",[275,315,316,319],{},[290,317,318],{},"reflect one half onto the other",[290,320,321],{},[224,322,324],{"href":323},"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fmirrorline",[8,325,326],{},"mirrorLine",[275,328,329,332],{},[290,330,331],{},"flip horizontally or vertically",[290,333,334,340,341],{},[224,335,337],{"href":336},"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fflip",[8,338,339],{},"flip"," with ",[8,342,343],{},"edges: 'none'",[275,345,346,349],{},[290,347,348],{},"mirrored pie slices",[290,350,351],{},[224,352,354],{"href":353},"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fkaleidoscope",[8,355,356],{},"kaleidoscope",[275,358,359,362],{},[290,360,361],{},"a card tilted in 3D",[290,363,364],{},[224,365,367],{"href":366},"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fperspective",[8,368,369],{},"perspective",[275,371,372,375],{},[290,373,374],{},"pin the corners anywhere",[290,376,377],{},[224,378,380],{"href":379},"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fcornerpin",[8,381,382],{},"cornerPin",[275,384,385,388],{},[290,386,387],{},"a curved screen",[290,389,390],{},[224,391,393],{"href":392},"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fbend",[8,394,395],{},"bend",[275,397,398,401],{},[290,399,400],{},"pull the picture out along one direction",[290,402,403],{},[224,404,406],{"href":405},"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fstretch",[8,407,408],{},"stretch",[275,410,411,414],{},[290,412,413],{},"a travelling ripple",[290,415,416],{},[224,417,419],{"href":418},"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fwave",[8,420,421],{},"wave",[275,423,424,427],{},[290,425,426],{},"a slow liquid drift",[290,428,429],{},[224,430,432],{"href":431},"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fflownoise",[8,433,434],{},"flowNoise",[275,436,437,440],{},[290,438,439],{},"unroll the picture into a circle, or roll it back",[290,441,442,184,448],{},[224,443,445],{"href":444},"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Ftopolar",[8,446,447],{},"toPolar",[224,449,451],{"href":450},"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Ffrompolar",[8,452,453],{},"fromPolar",[275,455,456,459],{},[290,457,458],{},"rings that each spin on their own",[290,460,461],{},[224,462,464],{"href":463},"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fconcentricrings",[8,465,466],{},"concentricRings",[275,468,469,472],{},[290,470,471],{},"a glitch of shifted bars",[290,473,474],{},[224,475,477],{"href":476},"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fbaroffset",[8,478,479],{},"barOffset",[275,481,482,485],{},[290,483,484],{},"a wipe transition that shreds the picture",[290,486,487,340,493],{},[224,488,490],{"href":489},"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fslicedslide",[8,491,492],{},"slicedSlide",[8,494,198],{},[275,496,497,500],{},[290,498,499],{},"distortion driven by your own simulation",[290,501,502,184,508],{},[224,503,505],{"href":504},"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fliquiddisplace",[8,506,507],{},"liquidDisplace",[224,509,511],{"href":510},"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fgridcelldisplace",[8,512,513],{},"gridCellDisplace",[275,515,516,519],{},[290,517,518],{},"another layer's pixels as a displacement map",[290,520,521,525,526],{},[224,522,523],{"href":226},[8,524,229],{}," in ",[8,527,233],{},[264,529,531],{"id":530},"example","Example",[235,533,535],{"className":237,"code":534,"language":239,"meta":240,"style":240},"import {defineShader, p, warps, transformPosition, transformEdges} from 'shaders\u002Fstd'\n\n\u002F\u002F Twirl: twist the child around a draggable center, more the farther from it.\nexport const Twirl = defineShader({\n  name: 'Twirl',\n  props: {\n    center: {default: {x: 0.5, y: 0.5}, transform: transformPosition},\n    intensity: {default: 1, ui: {type: 'range', min: -5, max: 5, step: 0.1}},\n    edges: {\n      default: 'stretch',\n      transform: transformEdges,\n      compileTime: true,\n      ui: {type: 'select', options: [{label: 'Stretch', value: 'stretch'}, {label: 'Transparent', value: 'transparent'}, {label: 'Mirror', value: 'mirror'}, {label: 'Wrap', value: 'wrap'}]},\n    },\n  },\n  map: warps.twirl({center: p('center'), intensity: p('intensity')}),\n})\n",[8,536,537,548,555,562,585,597,603,620,658,664,674,680,691,742,748,754,786],{"__ignoreMap":240},[244,538,539,541,544,546],{"class":246,"line":247},[244,540,251],{"class":250},[244,542,543],{"class":254}," {defineShader, p, warps, transformPosition, transformEdges} ",[244,545,258],{"class":250},[244,547,262],{"class":261},[244,549,551],{"class":246,"line":550},2,[244,552,554],{"emptyLinePlaceholder":553},true,"\n",[244,556,558],{"class":246,"line":557},3,[244,559,561],{"class":560},"sAwPA","\u002F\u002F Twirl: twist the child around a draggable center, more the farther from it.\n",[244,563,565,568,571,575,578,582],{"class":246,"line":564},4,[244,566,567],{"class":250},"export",[244,569,570],{"class":250}," const",[244,572,574],{"class":573},"sDLfK"," Twirl",[244,576,577],{"class":250}," =",[244,579,581],{"class":580},"svObZ"," defineShader",[244,583,584],{"class":254},"({\n",[244,586,588,591,594],{"class":246,"line":587},5,[244,589,590],{"class":254},"  name: ",[244,592,593],{"class":261},"'Twirl'",[244,595,596],{"class":254},",\n",[244,598,600],{"class":246,"line":599},6,[244,601,602],{"class":254},"  props: {\n",[244,604,606,609,612,615,617],{"class":246,"line":605},7,[244,607,608],{"class":254},"    center: {default: {x: ",[244,610,611],{"class":573},"0.5",[244,613,614],{"class":254},", y: ",[244,616,611],{"class":573},[244,618,619],{"class":254},"}, transform: transformPosition},\n",[244,621,623,626,629,632,635,638,641,644,647,649,652,655],{"class":246,"line":622},8,[244,624,625],{"class":254},"    intensity: {default: ",[244,627,628],{"class":573},"1",[244,630,631],{"class":254},", ui: {type: ",[244,633,634],{"class":261},"'range'",[244,636,637],{"class":254},", min: ",[244,639,640],{"class":250},"-",[244,642,643],{"class":573},"5",[244,645,646],{"class":254},", max: ",[244,648,643],{"class":573},[244,650,651],{"class":254},", step: ",[244,653,654],{"class":573},"0.1",[244,656,657],{"class":254},"}},\n",[244,659,661],{"class":246,"line":660},9,[244,662,663],{"class":254},"    edges: {\n",[244,665,667,670,672],{"class":246,"line":666},10,[244,668,669],{"class":254},"      default: ",[244,671,183],{"class":261},[244,673,596],{"class":254},[244,675,677],{"class":246,"line":676},11,[244,678,679],{"class":254},"      transform: transformEdges,\n",[244,681,683,686,689],{"class":246,"line":682},12,[244,684,685],{"class":254},"      compileTime: ",[244,687,688],{"class":573},"true",[244,690,596],{"class":254},[244,692,694,697,700,703,706,709,711,714,717,719,721,723,726,728,730,732,735,737,739],{"class":246,"line":693},13,[244,695,696],{"class":254},"      ui: {type: ",[244,698,699],{"class":261},"'select'",[244,701,702],{"class":254},", options: [{label: ",[244,704,705],{"class":261},"'Stretch'",[244,707,708],{"class":254},", value: ",[244,710,183],{"class":261},[244,712,713],{"class":254},"}, {label: ",[244,715,716],{"class":261},"'Transparent'",[244,718,708],{"class":254},[244,720,187],{"class":261},[244,722,713],{"class":254},[244,724,725],{"class":261},"'Mirror'",[244,727,708],{"class":254},[244,729,190],{"class":261},[244,731,713],{"class":254},[244,733,734],{"class":261},"'Wrap'",[244,736,708],{"class":254},[244,738,194],{"class":261},[244,740,741],{"class":254},"}]},\n",[244,743,745],{"class":246,"line":744},14,[244,746,747],{"class":254},"    },\n",[244,749,751],{"class":246,"line":750},15,[244,752,753],{"class":254},"  },\n",[244,755,757,760,762,765,767,770,773,776,778,780,783],{"class":246,"line":756},16,[244,758,759],{"class":254},"  map: warps.",[244,761,300],{"class":580},[244,763,764],{"class":254},"({center: ",[244,766,156],{"class":580},[244,768,769],{"class":254},"(",[244,771,772],{"class":261},"'center'",[244,774,775],{"class":254},"), intensity: ",[244,777,156],{"class":580},[244,779,769],{"class":254},[244,781,782],{"class":261},"'intensity'",[244,784,785],{"class":254},")}),\n",[244,787,789],{"class":246,"line":788},17,[244,790,791],{"class":254},"})\n",[264,793,795],{"id":794},"words","Words",[797,798,800],"primitive-words",{":words":799},"[{\"name\":\"twirl\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Ftwirl\",\"summary\":\"Twist the child around `center`, turning more the farther a pixel is from it.\"},{\"name\":\"bulge\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fbulge\",\"summary\":\"Magnify or pinch the child inside a disc around `center`.\"},{\"name\":\"mirrorLine\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fmirrorline\",\"summary\":\"Mirror the child across a line through `center` at `angle`.\"},{\"name\":\"flip\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fflip\",\"summary\":\"Flip the child horizontally, vertically, or both.\"},{\"name\":\"kaleidoscope\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fkaleidoscope\",\"summary\":\"Fold the child into mirrored pie slices around `center`.\"},{\"name\":\"perspective\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fperspective\",\"summary\":\"Tilt the child in 3D, as if it were a card turned away from the camera.\"},{\"name\":\"cornerPin\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fcornerpin\",\"summary\":\"Pin the four corners of the child to new positions, with true perspective between them.\"},{\"name\":\"bend\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fbend\",\"summary\":\"Curve the child like a bent sheet seen in perspective, so its ends swell or shrink.\"},{\"name\":\"stretch\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fstretch\",\"summary\":\"Stretch the child along one direction, starting at `center`.\"},{\"name\":\"wave\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fwave\",\"summary\":\"Ripple the child with a travelling wave.\"},{\"name\":\"flowNoise\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fflownoise\",\"summary\":\"Push the child around with a slowly flowing liquid motion.\"},{\"name\":\"toPolar\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Ftopolar\",\"summary\":\"Unroll the child around `center`, so angle becomes x and distance becomes y.\"},{\"name\":\"fromPolar\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Ffrompolar\",\"summary\":\"Wrap the child into a circle around `center`, reading its x as angle and its y as distance.\"},{\"name\":\"concentricRings\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fconcentricrings\",\"summary\":\"Cut the child into rings around `center` and spin each ring by its own amount.\"},{\"name\":\"barOffset\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fbaroffset\",\"summary\":\"Cut the child into parallel bars and shift each one sideways by a random amount.\"},{\"name\":\"slicedSlide\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fslicedslide\",\"summary\":\"Slice the child into strips that slide out of frame in alternating directions.\"},{\"name\":\"liquidDisplace\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fliquiddisplace\",\"summary\":\"Move the child smoothly by a displacement field your own simulation produces.\"},{\"name\":\"gridCellDisplace\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fgridcelldisplace\",\"summary\":\"Move the child by a displacement field your own simulation produces, one grid cell at a time.\"},{\"name\":\"displaceByLayer\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fwarps\u002Fdisplacebylayer\",\"summary\":\"Distort the child using another layer's pixels as a displacement map.\"}]",[801,802,803,815,824,837,844,853,860,867,874,883,890,897,907,917,927,934,941,948,955],"ul",{},[804,805,806,810,811,814],"li",{},[224,807,808],{"href":297},[8,809,300],{}," — Twist the child around ",[8,812,813],{},"center",", turning more the farther a pixel is from it.",[804,816,817,821,822,219],{},[224,818,819],{"href":310},[8,820,313],{}," — Magnify or pinch the child inside a disc around ",[8,823,813],{},[804,825,826,830,831,833,834,219],{},[224,827,828],{"href":323},[8,829,326],{}," — Mirror the child across a line through ",[8,832,813],{}," at ",[8,835,836],{},"angle",[804,838,839,843],{},[224,840,841],{"href":336},[8,842,339],{}," — Flip the child horizontally, vertically, or both.",[804,845,846,850,851,219],{},[224,847,848],{"href":353},[8,849,356],{}," — Fold the child into mirrored pie slices around ",[8,852,813],{},[804,854,855,859],{},[224,856,857],{"href":366},[8,858,369],{}," — Tilt the child in 3D, as if it were a card turned away from the camera.",[804,861,862,866],{},[224,863,864],{"href":379},[8,865,382],{}," — Pin the four corners of the child to new positions, with true perspective between them.",[804,868,869,873],{},[224,870,871],{"href":392},[8,872,395],{}," — Curve the child like a bent sheet seen in perspective, so its ends swell or shrink.",[804,875,876,880,881,219],{},[224,877,878],{"href":405},[8,879,408],{}," — Stretch the child along one direction, starting at ",[8,882,813],{},[804,884,885,889],{},[224,886,887],{"href":418},[8,888,421],{}," — Ripple the child with a travelling wave.",[804,891,892,896],{},[224,893,894],{"href":431},[8,895,434],{}," — Push the child around with a slowly flowing liquid motion.",[804,898,899,903,904,906],{},[224,900,901],{"href":444},[8,902,447],{}," — Unroll the child around ",[8,905,813],{},", so angle becomes x and distance becomes y.",[804,908,909,913,914,916],{},[224,910,911],{"href":450},[8,912,453],{}," — Wrap the child into a circle around ",[8,915,813],{},", reading its x as angle and its y as distance.",[804,918,919,923,924,926],{},[224,920,921],{"href":463},[8,922,466],{}," — Cut the child into rings around ",[8,925,813],{}," and spin each ring by its own amount.",[804,928,929,933],{},[224,930,931],{"href":476},[8,932,479],{}," — Cut the child into parallel bars and shift each one sideways by a random amount.",[804,935,936,940],{},[224,937,938],{"href":489},[8,939,492],{}," — Slice the child into strips that slide out of frame in alternating directions.",[804,942,943,947],{},[224,944,945],{"href":504},[8,946,507],{}," — Move the child smoothly by a displacement field your own simulation produces.",[804,949,950,954],{},[224,951,952],{"href":510},[8,953,513],{}," — Move the child by a displacement field your own simulation produces, one grid cell at a time.",[804,956,957,961],{},[224,958,959],{"href":226},[8,960,229],{}," — Distort the child using another layer's pixels as a displacement map.",[963,964,965],"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 .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}",{"title":240,"searchDepth":550,"depth":550,"links":967},[968,969,970],{"id":266,"depth":550,"text":267},{"id":530,"depth":550,"text":531},{"id":794,"depth":550,"text":795},"Words for the map: field.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fwarps.md","md","space","Shapes, frames & warps",{},"\u002Fdocs\u002Fprimitives\u002Fwarps",{"title":147,"description":971},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fwarps.ts","docs\u002Fprimitives\u002F20.warps\u002Findex",19,"4Ea28xEhglpSI15s4eX0iEOHb18gaIIbgwaja6X-7L0"]