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