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