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