[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Feffects-stylize":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":891,"categorySlug":892,"categoryTitle":9,"curated":395,"description":893,"editUrl":894,"extension":895,"group":896,"groupTitle":897,"kind":9,"meta":898,"navigation":395,"path":899,"seo":900,"sourceUrl":901,"stem":902,"wordCount":515,"__hash__":903},"primitives\u002Fdocs\u002Fprimitives\u002F28.effects-stylize\u002Findex.md","Stylize",{"type":149,"value":150,"toc":885},"minimark",[151,155,201,208,237,242,370,374,728,732,792,796,881],[152,153,147],"h1",{"id":154},"stylize",[156,157,158,159,163,164,171,172,178,179,185,186,189,190,196,197,200],"p",{},"Hand-made looks for the layer inside: a watercolor wash, a chalk drawing on a board, ASCII\ncharacters, and copper-plate line engraving. Each look is a recipe of two or three words. A\n",[160,161,162],"strong",{},"stage"," is one piece of the look that reads the layer once it is rendered to a texture (a\nwobbled sample position, a brush, a ring of edge samples, a character grid). Build a stage once\nand hand the same one to every word that needs it, so they agree. The closing word (",[165,166,168],"a",{"href":167},"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Fwash",[8,169,170],{},"wash",",\n",[165,173,175],{"href":174},"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Fchalksketch",[8,176,177],{},"chalkSketch",", ",[165,180,182],{"href":181},"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Flinework",[8,183,184],{},"linework",") returns the effect for ",[8,187,188],{},"effect:",". The ASCII look closes with\n",[165,191,193],{"href":192},"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Fglyphtint",[8,194,195],{},"glyphTint",", which returns a fragment for ",[8,198,199],{},"gpu.fragment"," because it also needs a character\natlas drawn on the CPU.",[156,202,203,204,207],{},"The output is straight alpha. Watercolor, chalk and ASCII keep the alpha of the layer inside;\nengraving replaces the layer, so its definition sets ",[8,205,206],{},"blendWithChildren: false",".",[209,210,215],"pre",{"className":211,"code":212,"language":213,"meta":214,"style":214},"language-ts shiki shiki-themes github-dark","import {effects} from 'shaders\u002Fstd'\n","ts","",[8,216,217],{"__ignoreMap":214},[218,219,222,226,230,233],"span",{"class":220,"line":221},"line",1,[218,223,225],{"class":224},"snl16","import",[218,227,229],{"class":228},"s95oV"," {effects} ",[218,231,232],{"class":224},"from",[218,234,236],{"class":235},"sU2Wk"," 'shaders\u002Fstd'\n",[238,239,241],"h2",{"id":240},"reach-for-it-when","Reach for it when",[243,244,245,258],"table",{},[246,247,248],"thead",{},[249,250,251,255],"tr",{},[252,253,254],"th",{},"When you need",[252,256,257],{},"Use",[259,260,261,292,313,330,359],"tbody",{},[249,262,263,267],{},[264,265,266],"td",{},"a painted, softened watercolor version of the layer",[264,268,269,273,274,178,280,178,286],{},[165,270,271],{"href":167},[8,272,170],{}," with ",[165,275,277],{"href":276},"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Fkuwahara",[8,278,279],{},"kuwahara",[165,281,283],{"href":282},"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Fbleedwarp",[8,284,285],{},"bleedWarp",[165,287,289],{"href":288},"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Fpapergrain",[8,290,291],{},"paperGrain",[249,293,294,297],{},[264,295,296],{},"paint that bleeds past hard edges",[264,298,299,303,304,308,309],{},[165,300,301],{"href":282},[8,302,285],{},", shared as the sample position by ",[165,305,306],{"href":276},[8,307,279],{}," and ",[165,310,311],{"href":167},[8,312,170],{},[249,314,315,318],{},[264,316,317],{},"a chalk drawing with outlines and cross-hatching",[264,319,320,273,324],{},[165,321,322],{"href":174},[8,323,177],{},[165,325,327],{"href":326},"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Fsobeltaps",[8,328,329],{},"sobelTaps",[249,331,332,335],{},[264,333,334],{},"the layer redrawn as text characters",[264,336,337,178,343,178,349,178,355],{},[165,338,340],{"href":339},"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Fchargrid",[8,341,342],{},"charGrid",[165,344,346],{"href":345},"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Fcellsample",[8,347,348],{},"cellSample",[165,350,352],{"href":351},"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Fglyphfor",[8,353,354],{},"glyphFor",[165,356,357],{"href":192},[8,358,195],{},[249,360,361,364],{},[264,362,363],{},"an engraved, banknote-style line drawing",[264,365,366],{},[165,367,368],{"href":181},[8,369,184],{},[238,371,373],{"id":372},"example","Example",[209,375,377],{"className":211,"code":376,"language":213,"meta":214,"style":214},"import {defineShader, p, effects, crosses, transformColor} from 'shaders\u002Fstd'\n\nconst {bleedWarp, kuwahara, paperGrain, wash} = effects.stylize\n\n\u002F\u002F One bleed stage, shared by the brush and the wash so the taps and the original sample agree.\nconst wet = bleedWarp({amount: p('bleed')})\n\n\u002F\u002F Watercolor: soft colour patches over paper grain, mixed back toward the original by strength.\nexport const Watercolor = defineShader({\n  name: 'Watercolor',\n  props: {\n    radius: {default: 3, compileTime: true},\n    bleed: {default: 1, recompile: crosses(0)},\n    strength: {default: 1, recompile: crosses(0)},\n    paper: {default: 0.35, recompile: crosses(0)},\n    paperColor: {default: '#fbf7ec', transform: transformColor},\n  },\n  effect: wash({\n    at: wet,\n    brush: kuwahara({at: wet, radius: p('radius')}),\n    grain: paperGrain({amount: p('paper')}),\n    paper: p('paper'),\n    paperColor: p('paperColor'),\n    strength: p('strength'),\n  }),\n})\n",[8,378,379,390,397,430,435,442,471,476,482,502,513,519,537,560,578,597,609,615,625,631,652,671,686,701,716,722],{"__ignoreMap":214},[218,380,381,383,386,388],{"class":220,"line":221},[218,382,225],{"class":224},[218,384,385],{"class":228}," {defineShader, p, effects, crosses, transformColor} ",[218,387,232],{"class":224},[218,389,236],{"class":235},[218,391,393],{"class":220,"line":392},2,[218,394,396],{"emptyLinePlaceholder":395},true,"\n",[218,398,400,403,406,409,411,413,415,417,419,421,424,427],{"class":220,"line":399},3,[218,401,402],{"class":224},"const",[218,404,405],{"class":228}," {",[218,407,285],{"class":408},"sDLfK",[218,410,178],{"class":228},[218,412,279],{"class":408},[218,414,178],{"class":228},[218,416,291],{"class":408},[218,418,178],{"class":228},[218,420,170],{"class":408},[218,422,423],{"class":228},"} ",[218,425,426],{"class":224},"=",[218,428,429],{"class":228}," effects.stylize\n",[218,431,433],{"class":220,"line":432},4,[218,434,396],{"emptyLinePlaceholder":395},[218,436,438],{"class":220,"line":437},5,[218,439,441],{"class":440},"sAwPA","\u002F\u002F One bleed stage, shared by the brush and the wash so the taps and the original sample agree.\n",[218,443,445,447,450,453,457,460,462,465,468],{"class":220,"line":444},6,[218,446,402],{"class":224},[218,448,449],{"class":408}," wet",[218,451,452],{"class":224}," =",[218,454,456],{"class":455},"svObZ"," bleedWarp",[218,458,459],{"class":228},"({amount: ",[218,461,156],{"class":455},[218,463,464],{"class":228},"(",[218,466,467],{"class":235},"'bleed'",[218,469,470],{"class":228},")})\n",[218,472,474],{"class":220,"line":473},7,[218,475,396],{"emptyLinePlaceholder":395},[218,477,479],{"class":220,"line":478},8,[218,480,481],{"class":440},"\u002F\u002F Watercolor: soft colour patches over paper grain, mixed back toward the original by strength.\n",[218,483,485,488,491,494,496,499],{"class":220,"line":484},9,[218,486,487],{"class":224},"export",[218,489,490],{"class":224}," const",[218,492,493],{"class":408}," Watercolor",[218,495,452],{"class":224},[218,497,498],{"class":455}," defineShader",[218,500,501],{"class":228},"({\n",[218,503,505,508,511],{"class":220,"line":504},10,[218,506,507],{"class":228},"  name: ",[218,509,510],{"class":235},"'Watercolor'",[218,512,171],{"class":228},[218,514,516],{"class":220,"line":515},11,[218,517,518],{"class":228},"  props: {\n",[218,520,522,525,528,531,534],{"class":220,"line":521},12,[218,523,524],{"class":228},"    radius: {default: ",[218,526,527],{"class":408},"3",[218,529,530],{"class":228},", compileTime: ",[218,532,533],{"class":408},"true",[218,535,536],{"class":228},"},\n",[218,538,540,543,546,549,552,554,557],{"class":220,"line":539},13,[218,541,542],{"class":228},"    bleed: {default: ",[218,544,545],{"class":408},"1",[218,547,548],{"class":228},", recompile: ",[218,550,551],{"class":455},"crosses",[218,553,464],{"class":228},[218,555,556],{"class":408},"0",[218,558,559],{"class":228},")},\n",[218,561,563,566,568,570,572,574,576],{"class":220,"line":562},14,[218,564,565],{"class":228},"    strength: {default: ",[218,567,545],{"class":408},[218,569,548],{"class":228},[218,571,551],{"class":455},[218,573,464],{"class":228},[218,575,556],{"class":408},[218,577,559],{"class":228},[218,579,581,584,587,589,591,593,595],{"class":220,"line":580},15,[218,582,583],{"class":228},"    paper: {default: ",[218,585,586],{"class":408},"0.35",[218,588,548],{"class":228},[218,590,551],{"class":455},[218,592,464],{"class":228},[218,594,556],{"class":408},[218,596,559],{"class":228},[218,598,600,603,606],{"class":220,"line":599},16,[218,601,602],{"class":228},"    paperColor: {default: ",[218,604,605],{"class":235},"'#fbf7ec'",[218,607,608],{"class":228},", transform: transformColor},\n",[218,610,612],{"class":220,"line":611},17,[218,613,614],{"class":228},"  },\n",[218,616,618,621,623],{"class":220,"line":617},18,[218,619,620],{"class":228},"  effect: ",[218,622,170],{"class":455},[218,624,501],{"class":228},[218,626,628],{"class":220,"line":627},19,[218,629,630],{"class":228},"    at: wet,\n",[218,632,634,637,639,642,644,646,649],{"class":220,"line":633},20,[218,635,636],{"class":228},"    brush: ",[218,638,279],{"class":455},[218,640,641],{"class":228},"({at: wet, radius: ",[218,643,156],{"class":455},[218,645,464],{"class":228},[218,647,648],{"class":235},"'radius'",[218,650,651],{"class":228},")}),\n",[218,653,655,658,660,662,664,666,669],{"class":220,"line":654},21,[218,656,657],{"class":228},"    grain: ",[218,659,291],{"class":455},[218,661,459],{"class":228},[218,663,156],{"class":455},[218,665,464],{"class":228},[218,667,668],{"class":235},"'paper'",[218,670,651],{"class":228},[218,672,674,677,679,681,683],{"class":220,"line":673},22,[218,675,676],{"class":228},"    paper: ",[218,678,156],{"class":455},[218,680,464],{"class":228},[218,682,668],{"class":235},[218,684,685],{"class":228},"),\n",[218,687,689,692,694,696,699],{"class":220,"line":688},23,[218,690,691],{"class":228},"    paperColor: ",[218,693,156],{"class":455},[218,695,464],{"class":228},[218,697,698],{"class":235},"'paperColor'",[218,700,685],{"class":228},[218,702,704,707,709,711,714],{"class":220,"line":703},24,[218,705,706],{"class":228},"    strength: ",[218,708,156],{"class":455},[218,710,464],{"class":228},[218,712,713],{"class":235},"'strength'",[218,715,685],{"class":228},[218,717,719],{"class":220,"line":718},25,[218,720,721],{"class":228},"  }),\n",[218,723,725],{"class":220,"line":724},26,[218,726,727],{"class":228},"})\n",[238,729,731],{"id":730},"types","Types",[243,733,734,744],{},[246,735,736],{},[249,737,738,741],{},[252,739,740],{},"Type",[252,742,743],{},"What it is",[259,745,746,756,766,779],{},[249,747,748,753],{},[264,749,750],{},[8,751,752],{},"FragmentStage",[264,754,755],{},"A stage of the ASCII look: one value per pixel, computed in the fragment.",[249,757,758,763],{},[264,759,760],{},[8,761,762],{},"GatherStage",[264,764,765],{},"A stage that reads the layer inside (rendered to a texture) and gives one value per pixel.",[249,767,768,773],{},[264,769,770],{},[8,771,772],{},"KuwaharaBrush",[264,774,775,776,778],{},"The brush ",[8,777,279],{}," builds: four overlapping patches of samples around each pixel.",[249,780,781,786],{},[264,782,783],{},[8,784,785],{},"SobelRing",[264,787,788,789,791],{},"The ring of edge samples ",[8,790,329],{}," builds around each pixel.",[238,793,795],{"id":794},"words","Words",[797,798,800],"primitive-words",{":words":799},"[{\"name\":\"wash\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Fwash\",\"summary\":\"The watercolor look: the layer inside flattened into soft patches of color over paper grain.\"},{\"name\":\"kuwahara\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Fkuwahara\",\"summary\":\"A painter's brush: the flattening that turns fine detail into soft patches of one color.\"},{\"name\":\"bleedWarp\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Fbleedwarp\",\"summary\":\"A sample position that drifts slowly past hard edges, so paint bleeds instead of stopping.\"},{\"name\":\"paperGrain\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Fpapergrain\",\"summary\":\"Fine paper grain for the pigment to settle into, one brightness value per screen pixel.\"},{\"name\":\"chalkSketch\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Fchalksketch\",\"summary\":\"The chalk-drawing look: edges become chalk strokes and dark areas fill with cross-hatching.\"},{\"name\":\"sobelTaps\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Fsobeltaps\",\"summary\":\"Eight brightness samples in a ring around each pixel, for finding edges.\"},{\"name\":\"linework\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Flinework\",\"summary\":\"The engraving look: the layer inside redrawn as ink lines that swell where it is dark.\"},{\"name\":\"glyphTint\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Fglyphtint\",\"summary\":\"The finished ASCII look: each character tinted with its cell's color, everything else transparent.\"},{\"name\":\"glyphFor\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Fglyphfor\",\"summary\":\"The character drawn in each cell, picked by how bright the cell is.\"},{\"name\":\"charGrid\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Fchargrid\",\"summary\":\"The character grid: which cell each pixel falls in, and where it sits inside that cell.\"},{\"name\":\"cellSample\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-stylize\u002Fcellsample\",\"summary\":\"The color of the layer inside at the centre of each character cell.\"}]",[801,802,803,811,818,825,832,839,846,853,860,867,874],"ul",{},[804,805,806,810],"li",{},[165,807,808],{"href":167},[8,809,170],{}," — The watercolor look: the layer inside flattened into soft patches of color over paper grain.",[804,812,813,817],{},[165,814,815],{"href":276},[8,816,279],{}," — A painter's brush: the flattening that turns fine detail into soft patches of one color.",[804,819,820,824],{},[165,821,822],{"href":282},[8,823,285],{}," — A sample position that drifts slowly past hard edges, so paint bleeds instead of stopping.",[804,826,827,831],{},[165,828,829],{"href":288},[8,830,291],{}," — Fine paper grain for the pigment to settle into, one brightness value per screen pixel.",[804,833,834,838],{},[165,835,836],{"href":174},[8,837,177],{}," — The chalk-drawing look: edges become chalk strokes and dark areas fill with cross-hatching.",[804,840,841,845],{},[165,842,843],{"href":326},[8,844,329],{}," — Eight brightness samples in a ring around each pixel, for finding edges.",[804,847,848,852],{},[165,849,850],{"href":181},[8,851,184],{}," — The engraving look: the layer inside redrawn as ink lines that swell where it is dark.",[804,854,855,859],{},[165,856,857],{"href":192},[8,858,195],{}," — The finished ASCII look: each character tinted with its cell's color, everything else transparent.",[804,861,862,866],{},[165,863,864],{"href":351},[8,865,354],{}," — The character drawn in each cell, picked by how bright the cell is.",[804,868,869,873],{},[165,870,871],{"href":339},[8,872,342],{}," — The character grid: which cell each pixel falls in, and where it sits inside that cell.",[804,875,876,880],{},[165,877,878],{"href":345},[8,879,348],{}," — The color of the layer inside at the centre of each character cell.",[882,883,884],"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":214,"searchDepth":392,"depth":392,"links":886},[887,888,889,890],{"id":240,"depth":392,"text":241},{"id":372,"depth":392,"text":373},{"id":730,"depth":392,"text":731},{"id":794,"depth":392,"text":795},"effects.stylize","effects-stylize","Hand-made looks for the layer inside: a watercolor wash, a chalk drawing on a board, ASCII characters, and copper-plate line engraving.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Feffects.stylize.md","md","effects","Filters & effects",{},"\u002Fdocs\u002Fprimitives\u002Feffects-stylize",{"title":147,"description":893},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Feffects\u002Fstylize.ts","docs\u002Fprimitives\u002F28.effects-stylize\u002Findex","HgsiHQO9GjNhF-eM3f3m0DiMXJssoeHSf3wGnebcPwk"]