[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Feffects-lens":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":737,"categorySlug":738,"categoryTitle":9,"curated":306,"description":739,"editUrl":740,"extension":741,"group":742,"groupTitle":743,"kind":9,"meta":744,"navigation":306,"path":745,"seo":746,"sourceUrl":747,"stem":748,"wordCount":303,"__hash__":749},"primitives\u002Fdocs\u002Fprimitives\u002F29.effects-lens\u002Findex.md","Lens",{"type":149,"value":150,"toc":731},"minimark",[151,155,195,202,231,236,281,285,670,674,701,705,727],[152,153,147],"h1",{"id":154},"lens",[156,157,158,159,163,164,171,172,175,176,179,180,183,184,190,191,194],"p",{},"Words for the color fringing a real lens leaves behind: the red, green and blue copies of\nthe layer inside pushed apart, or fanned out into a whole spectrum. Because they read the\nchild at several places per pixel, these are ",[160,161,162],"strong",{},"gather effects",": the child is rendered to a\ntexture first and the effect samples it. ",[165,166,168],"a",{"href":167},"\u002Fdocs\u002Fprimitives\u002Feffects-lens\u002Fchromaticfan",[8,169,170],{},"chromaticFan"," is a sampling stage; hand it to\n",[8,173,174],{},"gatherStack"," (from ",[8,177,178],{},"effects.blurs",") to turn it into the ",[8,181,182],{},"effect:"," of a filter definition,\noptionally followed by more stages. ",[165,185,187],{"href":186},"\u002Fdocs\u002Fprimitives\u002Feffects-lens\u002Fspectrallens",[8,188,189],{},"spectralLens"," is a complete fragment for a ",[8,192,193],{},"gpu:","\ndefinition, with the lens warp, focus zones and grain built in.",[156,196,197,198,201],{},"Angles are in degrees and go through ",[8,199,200],{},"transformAngle",". Strengths are 0–1.",[203,204,209],"pre",{"className":205,"code":206,"language":207,"meta":208,"style":208},"language-ts shiki shiki-themes github-dark","import {effects} from 'shaders\u002Fstd'\n","ts","",[8,210,211],{"__ignoreMap":208},[212,213,216,220,224,227],"span",{"class":214,"line":215},"line",1,[212,217,219],{"class":218},"snl16","import",[212,221,223],{"class":222},"s95oV"," {effects} ",[212,225,226],{"class":218},"from",[212,228,230],{"class":229},"sU2Wk"," 'shaders\u002Fstd'\n",[232,233,235],"h2",{"id":234},"reach-for-it-when","Reach for it when",[237,238,239,252],"table",{},[240,241,242],"thead",{},[243,244,245,249],"tr",{},[246,247,248],"th",{},"When you need",[246,250,251],{},"Use",[253,254,255,270],"tbody",{},[243,256,257,261],{},[258,259,260],"td",{},"a subtle RGB split along one direction",[258,262,263,267,268],{},[165,264,265],{"href":167},[8,266,170],{}," inside ",[8,269,174],{},[243,271,272,275],{},[258,273,274],{},"the full prism look: many color copies, a bulging lens, swirl and grain",[258,276,277],{},[165,278,279],{"href":186},[8,280,189],{},[232,282,284],{"id":283},"example","Example",[203,286,288],{"className":205,"code":287,"language":207,"meta":208,"style":208},"import {defineShader, p, effects, transformAngle} from 'shaders\u002Fstd'\n\nconst {chromaticFan} = effects.lens\nconst {gatherStack} = effects.blurs\n\n\u002F\u002F Chromatic aberration: red and blue pulled apart along an angle, green held in place.\nexport const Fringe = defineShader({\n  name: 'Fringe',\n  props: {\n    strength: {default: 0.2, ui: {type: 'range', min: 0, max: 1, step: 0.01}},\n    angle: {default: 0, transform: transformAngle, ui: {type: 'range', min: 0, max: 360, step: 1}},\n    redOffset: {default: -1, ui: {type: 'range', min: -2, max: 2, step: 0.1}},\n    greenOffset: {default: 0, ui: {type: 'range', min: -2, max: 2, step: 0.1}},\n    blueOffset: {default: 1, ui: {type: 'range', min: -2, max: 2, step: 0.1}},\n  },\n  effect: gatherStack(chromaticFan({\n    strength: p('strength'),\n    angle: p('angle'),\n    red: p('redOffset'),\n    green: p('greenOffset'),\n    blue: p('blueOffset'),\n  }), []),\n  missingChildMessage: 'Fringe needs a child to split.',\n})\n",[8,289,290,301,308,329,345,350,357,379,391,397,433,461,494,522,550,556,571,587,602,617,632,647,653,664],{"__ignoreMap":208},[212,291,292,294,297,299],{"class":214,"line":215},[212,293,219],{"class":218},[212,295,296],{"class":222}," {defineShader, p, effects, transformAngle} ",[212,298,226],{"class":218},[212,300,230],{"class":229},[212,302,304],{"class":214,"line":303},2,[212,305,307],{"emptyLinePlaceholder":306},true,"\n",[212,309,311,314,317,320,323,326],{"class":214,"line":310},3,[212,312,313],{"class":218},"const",[212,315,316],{"class":222}," {",[212,318,170],{"class":319},"sDLfK",[212,321,322],{"class":222},"} ",[212,324,325],{"class":218},"=",[212,327,328],{"class":222}," effects.lens\n",[212,330,332,334,336,338,340,342],{"class":214,"line":331},4,[212,333,313],{"class":218},[212,335,316],{"class":222},[212,337,174],{"class":319},[212,339,322],{"class":222},[212,341,325],{"class":218},[212,343,344],{"class":222}," effects.blurs\n",[212,346,348],{"class":214,"line":347},5,[212,349,307],{"emptyLinePlaceholder":306},[212,351,353],{"class":214,"line":352},6,[212,354,356],{"class":355},"sAwPA","\u002F\u002F Chromatic aberration: red and blue pulled apart along an angle, green held in place.\n",[212,358,360,363,366,369,372,376],{"class":214,"line":359},7,[212,361,362],{"class":218},"export",[212,364,365],{"class":218}," const",[212,367,368],{"class":319}," Fringe",[212,370,371],{"class":218}," =",[212,373,375],{"class":374},"svObZ"," defineShader",[212,377,378],{"class":222},"({\n",[212,380,382,385,388],{"class":214,"line":381},8,[212,383,384],{"class":222},"  name: ",[212,386,387],{"class":229},"'Fringe'",[212,389,390],{"class":222},",\n",[212,392,394],{"class":214,"line":393},9,[212,395,396],{"class":222},"  props: {\n",[212,398,400,403,406,409,412,415,418,421,424,427,430],{"class":214,"line":399},10,[212,401,402],{"class":222},"    strength: {default: ",[212,404,405],{"class":319},"0.2",[212,407,408],{"class":222},", ui: {type: ",[212,410,411],{"class":229},"'range'",[212,413,414],{"class":222},", min: ",[212,416,417],{"class":319},"0",[212,419,420],{"class":222},", max: ",[212,422,423],{"class":319},"1",[212,425,426],{"class":222},", step: ",[212,428,429],{"class":319},"0.01",[212,431,432],{"class":222},"}},\n",[212,434,436,439,441,444,446,448,450,452,455,457,459],{"class":214,"line":435},11,[212,437,438],{"class":222},"    angle: {default: ",[212,440,417],{"class":319},[212,442,443],{"class":222},", transform: transformAngle, ui: {type: ",[212,445,411],{"class":229},[212,447,414],{"class":222},[212,449,417],{"class":319},[212,451,420],{"class":222},[212,453,454],{"class":319},"360",[212,456,426],{"class":222},[212,458,423],{"class":319},[212,460,432],{"class":222},[212,462,464,467,470,472,474,476,478,480,483,485,487,489,492],{"class":214,"line":463},12,[212,465,466],{"class":222},"    redOffset: {default: ",[212,468,469],{"class":218},"-",[212,471,423],{"class":319},[212,473,408],{"class":222},[212,475,411],{"class":229},[212,477,414],{"class":222},[212,479,469],{"class":218},[212,481,482],{"class":319},"2",[212,484,420],{"class":222},[212,486,482],{"class":319},[212,488,426],{"class":222},[212,490,491],{"class":319},"0.1",[212,493,432],{"class":222},[212,495,497,500,502,504,506,508,510,512,514,516,518,520],{"class":214,"line":496},13,[212,498,499],{"class":222},"    greenOffset: {default: ",[212,501,417],{"class":319},[212,503,408],{"class":222},[212,505,411],{"class":229},[212,507,414],{"class":222},[212,509,469],{"class":218},[212,511,482],{"class":319},[212,513,420],{"class":222},[212,515,482],{"class":319},[212,517,426],{"class":222},[212,519,491],{"class":319},[212,521,432],{"class":222},[212,523,525,528,530,532,534,536,538,540,542,544,546,548],{"class":214,"line":524},14,[212,526,527],{"class":222},"    blueOffset: {default: ",[212,529,423],{"class":319},[212,531,408],{"class":222},[212,533,411],{"class":229},[212,535,414],{"class":222},[212,537,469],{"class":218},[212,539,482],{"class":319},[212,541,420],{"class":222},[212,543,482],{"class":319},[212,545,426],{"class":222},[212,547,491],{"class":319},[212,549,432],{"class":222},[212,551,553],{"class":214,"line":552},15,[212,554,555],{"class":222},"  },\n",[212,557,559,562,564,567,569],{"class":214,"line":558},16,[212,560,561],{"class":222},"  effect: ",[212,563,174],{"class":374},[212,565,566],{"class":222},"(",[212,568,170],{"class":374},[212,570,378],{"class":222},[212,572,574,577,579,581,584],{"class":214,"line":573},17,[212,575,576],{"class":222},"    strength: ",[212,578,156],{"class":374},[212,580,566],{"class":222},[212,582,583],{"class":229},"'strength'",[212,585,586],{"class":222},"),\n",[212,588,590,593,595,597,600],{"class":214,"line":589},18,[212,591,592],{"class":222},"    angle: ",[212,594,156],{"class":374},[212,596,566],{"class":222},[212,598,599],{"class":229},"'angle'",[212,601,586],{"class":222},[212,603,605,608,610,612,615],{"class":214,"line":604},19,[212,606,607],{"class":222},"    red: ",[212,609,156],{"class":374},[212,611,566],{"class":222},[212,613,614],{"class":229},"'redOffset'",[212,616,586],{"class":222},[212,618,620,623,625,627,630],{"class":214,"line":619},20,[212,621,622],{"class":222},"    green: ",[212,624,156],{"class":374},[212,626,566],{"class":222},[212,628,629],{"class":229},"'greenOffset'",[212,631,586],{"class":222},[212,633,635,638,640,642,645],{"class":214,"line":634},21,[212,636,637],{"class":222},"    blue: ",[212,639,156],{"class":374},[212,641,566],{"class":222},[212,643,644],{"class":229},"'blueOffset'",[212,646,586],{"class":222},[212,648,650],{"class":214,"line":649},22,[212,651,652],{"class":222},"  }), []),\n",[212,654,656,659,662],{"class":214,"line":655},23,[212,657,658],{"class":222},"  missingChildMessage: ",[212,660,661],{"class":229},"'Fringe needs a child to split.'",[212,663,390],{"class":222},[212,665,667],{"class":214,"line":666},24,[212,668,669],{"class":222},"})\n",[232,671,673],{"id":672},"types","Types",[237,675,676,686],{},[240,677,678],{},[243,679,680,683],{},[246,681,682],{},"Type",[246,684,685],{},"What it is",[253,687,688],{},[243,689,690,695],{},[258,691,692],{},[8,693,694],{},"SpectralLensSlots",[258,696,697,698,700],{},"The props ",[8,699,189],{}," reads.",[232,702,704],{"id":703},"words","Words",[706,707,709],"primitive-words",{":words":708},"[{\"name\":\"chromaticFan\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-lens\u002Fchromaticfan\",\"summary\":\"Split the child into red, green and blue copies pushed apart along one direction.\"},{\"name\":\"spectralLens\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-lens\u002Fspectrallens\",\"summary\":\"Fan the child out into many color-shifted copies through a warped lens, the spectral-lens look.\"}]",[710,711,712,720],"ul",{},[713,714,715,719],"li",{},[165,716,717],{"href":167},[8,718,170],{}," — Split the child into red, green and blue copies pushed apart along one direction.",[713,721,722,726],{},[165,723,724],{"href":186},[8,725,189],{}," — Fan the child out into many color-shifted copies through a warped lens, the spectral-lens look.",[728,729,730],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}",{"title":208,"searchDepth":303,"depth":303,"links":732},[733,734,735,736],{"id":234,"depth":303,"text":235},{"id":283,"depth":303,"text":284},{"id":672,"depth":303,"text":673},{"id":703,"depth":303,"text":704},"effects.lens","effects-lens","Words for the color fringing a real lens leaves behind: the red, green and blue copies of the layer inside pushed apart, or fanned out into a whole spectrum.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Feffects.lens.md","md","effects","Filters & effects",{},"\u002Fdocs\u002Fprimitives\u002Feffects-lens",{"title":147,"description":739},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Feffects\u002Flens.ts","docs\u002Fprimitives\u002F29.effects-lens\u002Findex","K0aOTSzk6Je0-jR5bpQM2H-0EiE5qZuK7gMyiMYXuBs"]