[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Feffects-edgeglow":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":1295,"categorySlug":1296,"categoryTitle":9,"curated":393,"description":1297,"editUrl":1298,"extension":1299,"group":1300,"groupTitle":1301,"kind":9,"meta":1302,"navigation":393,"path":1303,"seo":1304,"sourceUrl":1305,"stem":1306,"wordCount":451,"__hash__":1307},"primitives\u002Fdocs\u002Fprimitives\u002F33.effects-edgeglow\u002Findex.md","Edge glow",{"type":149,"value":150,"toc":1290},"minimark",[151,155,215,222,251,256,353,357,1222,1226,1286],[152,153,147],"h1",{"id":154},"edge-glow",[156,157,158,159,162,163,166,167,171,172,179,180,186,187,193,194,200,201,207,208,214],"p",{},"A band of light hugging the edge of any shape, with coloured spots racing around it. The words\nlive inside a ",[8,160,161],{},"shapedSurface"," surface function (from ",[8,164,165],{},"materials","), which hands them the\nshape's ",[168,169,170],"strong",{},"distance field",": for every pixel, how far it is from the shape's edge, negative\ninside. ",[173,174,176],"a",{"href":175},"\u002Fdocs\u002Fprimitives\u002Feffects-edgeglow\u002Fedgeglowband",[8,177,178],{},"edgeGlowBand"," turns that distance into the glowing band (with drifting smoke) and\nalso gives the angle around the shape. ",[173,181,183],{"href":182},"\u002Fdocs\u002Fprimitives\u002Feffects-edgeglow\u002Forbitspotsaccum",[8,184,185],{},"orbitSpotsAccum"," places one colour's spots along that\nangle. The spots of every colour are folded together, starting from ",[173,188,190],{"href":189},"\u002Fdocs\u002Fprimitives\u002Feffects-edgeglow\u002Fedgeglowaccumzero",[8,191,192],{},"edgeGlowAccumZero"," and\nadding one colour at a time with the step from ",[173,195,197],{"href":196},"\u002Fdocs\u002Fprimitives\u002Feffects-edgeglow\u002Fedgeglowaccumcolorfor",[8,198,199],{},"edgeGlowAccumColorFor",", and ",[173,202,204],{"href":203},"\u002Fdocs\u002Fprimitives\u002Feffects-edgeglow\u002Fedgeglowcompose",[8,205,206],{},"edgeGlowCompose","\nturns the fold into the final colour with bloom. ",[173,209,211],{"href":210},"\u002Fdocs\u002Fprimitives\u002Feffects-edgeglow\u002Fheartbeatpulse",[8,212,213],{},"heartbeatPulse"," is the beat the band and the\nspots share.",[156,216,217,218,221],{},"These are GPU functions: invoke one with ",[8,219,220],{},"call(fn, 'name', [args])",". The result is straight\nalpha over a transparent background, so it composites over whatever sits behind the shape.",[223,224,229],"pre",{"className":225,"code":226,"language":227,"meta":228,"style":228},"language-ts shiki shiki-themes github-dark","import {effects} from 'shaders\u002Fstd'\n","ts","",[8,230,231],{"__ignoreMap":228},[232,233,236,240,244,247],"span",{"class":234,"line":235},"line",1,[232,237,239],{"class":238},"snl16","import",[232,241,243],{"class":242},"s95oV"," {effects} ",[232,245,246],{"class":238},"from",[232,248,250],{"class":249},"sU2Wk"," 'shaders\u002Fstd'\n",[252,253,255],"h2",{"id":254},"reach-for-it-when","Reach for it when",[257,258,259,272],"table",{},[260,261,262],"thead",{},[263,264,265,269],"tr",{},[266,267,268],"th",{},"When you need",[266,270,271],{},"Use",[273,274,275,287,298,314,331,342],"tbody",{},[263,276,277,281],{},[278,279,280],"td",{},"a glowing outline around a 2D, SVG or 3D shape",[278,282,283],{},[173,284,285],{"href":175},[8,286,178],{},[263,288,289,292],{},[278,290,291],{},"coloured lights chasing each other around that outline",[278,293,294],{},[173,295,296],{"href":182},[8,297,185],{},[263,299,300,303],{},[278,301,302],{},"several colours of light that overlap without going muddy",[278,304,305,309,310],{},[173,306,307],{"href":196},[8,308,199],{}," with ",[173,311,312],{"href":189},[8,313,192],{},[263,315,316,323],{},[278,317,318,319,322],{},"the colours from a ",[8,320,321],{},"stops"," prop, one spot orbit each",[278,324,325],{},[173,326,328],{"href":327},"\u002Fdocs\u002Fprimitives\u002Feffects-edgeglow\u002Fcoloratindex",[8,329,330],{},"colorAtIndex",[263,332,333,336],{},[278,334,335],{},"a pulse the band and the spots beat to",[278,337,338],{},[173,339,340],{"href":210},[8,341,213],{},[263,343,344,347],{},[278,345,346],{},"the final colour, with bloom",[278,348,349],{},[173,350,351],{"href":203},[8,352,206],{},[252,354,356],{"id":355},"example","Example",[223,358,360],{"className":225,"code":359,"language":227,"meta":228,"style":228},"import {defineShader, effects, materials, math, call, animatedTime, transformPosition, transformColor, transformColorSpace} from 'shaders\u002Fstd'\nimport type {Expr} from 'shaders\u002Fstd'\n\nconst {heartbeatPulse, edgeGlowBand, orbitSpotsAccum, edgeGlowAccumZero, edgeGlowAccumColorFor, edgeGlowCompose} = effects.edgeGlow\n\n\u002F\u002F Halo: two colours of light chasing each other around the edge of a shape, with smoke and bloom.\nexport const Halo = defineShader({\n  name: 'Halo',\n  animatedTime: {speed: 'speed'},\n  props: {\n    center: {default: {x: 0.5, y: 0.5}, transform: transformPosition},\n    scale: {default: 1},\n    rotation: {default: 0},\n    shape: {default: JSON.stringify({type: 'circleSDF', radius: 0.35}), ui: {type: 'shape', label: 'Shape', group: 'Shape'}},\n    shapeSdfUrl: {default: '', compileTime: true},\n    shapeType: {default: '', compileTime: true},\n    colorA: {default: '#7b2ff7', transform: transformColor},\n    colorB: {default: '#00e0ff', transform: transformColor},\n    colorSpace: {default: 'oklch', transform: transformColorSpace, compileTime: true},\n    thickness: {default: 0.25},\n    softness: {default: 0.5},\n    intensity: {default: 0.6},\n    bloom: {default: 0.3},\n    spots: {default: 3},\n    spotSize: {default: 0.5},\n    pulse: {default: 0},\n    smoke: {default: 0.3},\n    smokeSize: {default: 0.5},\n    speed: {default: 1},\n    seed: {default: 0},\n  },\n  ...materials.shapedSurface({\n    chord: 'firstLobe',\n    stencil: 'centre',\n    surface: (frame, params) => {\n      const {uniforms} = params\n      const t = animatedTime(params)\n      \u002F\u002F One beat per pixel, shared by the band's smoke and every spot orbit.\n      const beat = math.local(call(heartbeatPulse, 'heartbeatPulse', [t]), 'beat')\n      const band = math.local(call(edgeGlowBand, 'edgeGlowBand', [\n        frame.surf0!.member('r'), frame.sdfUV!, params.ctx.viewportSize, uniforms.scale, uniforms.thickness, uniforms.softness,\n        uniforms.smokeSize, uniforms.smoke, t, uniforms.pulse, beat,\n      ]), 'band')\n      const spotsFor = (colorIndex: number): Expr => call(orbitSpotsAccum, 'orbitSpotsAccum', [\n        band.member('y'), band.member('x'), t, beat, uniforms.spots, uniforms.spotSize, uniforms.pulse,\n        uniforms.intensity, uniforms.softness, uniforms.seed, math.float(colorIndex),\n      ])\n      \u002F\u002F Fold the two colours together in the chosen colour space, then compose with bloom.\n      const accumColor = edgeGlowAccumColorFor((params.propValues.colorSpace as number) ?? 0)\n      let state = call(edgeGlowAccumZero, 'edgeGlowAccumZero', [])\n      state = call(accumColor, 'edgeGlowAccumColor', [state, uniforms.colorA, spotsFor(0)])\n      state = call(accumColor, 'edgeGlowAccumColor', [state, uniforms.colorB, spotsFor(1)])\n      return call(edgeGlowCompose, 'edgeGlowCompose', [state, uniforms.bloom])\n    },\n  }),\n})\n",[8,361,362,373,388,395,437,442,449,471,483,495,501,518,529,540,587,604,618,630,641,657,668,678,689,700,711,721,731,741,751,761,771,777,790,801,812,839,857,873,879,916,943,970,976,987,1031,1057,1069,1075,1081,1112,1134,1163,1187,1204,1210,1216],{"__ignoreMap":228},[232,363,364,366,369,371],{"class":234,"line":235},[232,365,239],{"class":238},[232,367,368],{"class":242}," {defineShader, effects, materials, math, call, animatedTime, transformPosition, transformColor, transformColorSpace} ",[232,370,246],{"class":238},[232,372,250],{"class":249},[232,374,376,378,381,384,386],{"class":234,"line":375},2,[232,377,239],{"class":238},[232,379,380],{"class":238}," type",[232,382,383],{"class":242}," {Expr} ",[232,385,246],{"class":238},[232,387,250],{"class":249},[232,389,391],{"class":234,"line":390},3,[232,392,394],{"emptyLinePlaceholder":393},true,"\n",[232,396,398,401,404,407,410,412,414,416,418,420,422,424,426,428,431,434],{"class":234,"line":397},4,[232,399,400],{"class":238},"const",[232,402,403],{"class":242}," {",[232,405,213],{"class":406},"sDLfK",[232,408,409],{"class":242},", ",[232,411,178],{"class":406},[232,413,409],{"class":242},[232,415,185],{"class":406},[232,417,409],{"class":242},[232,419,192],{"class":406},[232,421,409],{"class":242},[232,423,199],{"class":406},[232,425,409],{"class":242},[232,427,206],{"class":406},[232,429,430],{"class":242},"} ",[232,432,433],{"class":238},"=",[232,435,436],{"class":242}," effects.edgeGlow\n",[232,438,440],{"class":234,"line":439},5,[232,441,394],{"emptyLinePlaceholder":393},[232,443,445],{"class":234,"line":444},6,[232,446,448],{"class":447},"sAwPA","\u002F\u002F Halo: two colours of light chasing each other around the edge of a shape, with smoke and bloom.\n",[232,450,452,455,458,461,464,468],{"class":234,"line":451},7,[232,453,454],{"class":238},"export",[232,456,457],{"class":238}," const",[232,459,460],{"class":406}," Halo",[232,462,463],{"class":238}," =",[232,465,467],{"class":466},"svObZ"," defineShader",[232,469,470],{"class":242},"({\n",[232,472,474,477,480],{"class":234,"line":473},8,[232,475,476],{"class":242},"  name: ",[232,478,479],{"class":249},"'Halo'",[232,481,482],{"class":242},",\n",[232,484,486,489,492],{"class":234,"line":485},9,[232,487,488],{"class":242},"  animatedTime: {speed: ",[232,490,491],{"class":249},"'speed'",[232,493,494],{"class":242},"},\n",[232,496,498],{"class":234,"line":497},10,[232,499,500],{"class":242},"  props: {\n",[232,502,504,507,510,513,515],{"class":234,"line":503},11,[232,505,506],{"class":242},"    center: {default: {x: ",[232,508,509],{"class":406},"0.5",[232,511,512],{"class":242},", y: ",[232,514,509],{"class":406},[232,516,517],{"class":242},"}, transform: transformPosition},\n",[232,519,521,524,527],{"class":234,"line":520},12,[232,522,523],{"class":242},"    scale: {default: ",[232,525,526],{"class":406},"1",[232,528,494],{"class":242},[232,530,532,535,538],{"class":234,"line":531},13,[232,533,534],{"class":242},"    rotation: {default: ",[232,536,537],{"class":406},"0",[232,539,494],{"class":242},[232,541,543,546,549,552,555,558,561,564,567,570,573,576,579,582,584],{"class":234,"line":542},14,[232,544,545],{"class":242},"    shape: {default: ",[232,547,548],{"class":406},"JSON",[232,550,551],{"class":242},".",[232,553,554],{"class":466},"stringify",[232,556,557],{"class":242},"({type: ",[232,559,560],{"class":249},"'circleSDF'",[232,562,563],{"class":242},", radius: ",[232,565,566],{"class":406},"0.35",[232,568,569],{"class":242},"}), ui: {type: ",[232,571,572],{"class":249},"'shape'",[232,574,575],{"class":242},", label: ",[232,577,578],{"class":249},"'Shape'",[232,580,581],{"class":242},", group: ",[232,583,578],{"class":249},[232,585,586],{"class":242},"}},\n",[232,588,590,593,596,599,602],{"class":234,"line":589},15,[232,591,592],{"class":242},"    shapeSdfUrl: {default: ",[232,594,595],{"class":249},"''",[232,597,598],{"class":242},", compileTime: ",[232,600,601],{"class":406},"true",[232,603,494],{"class":242},[232,605,607,610,612,614,616],{"class":234,"line":606},16,[232,608,609],{"class":242},"    shapeType: {default: ",[232,611,595],{"class":249},[232,613,598],{"class":242},[232,615,601],{"class":406},[232,617,494],{"class":242},[232,619,621,624,627],{"class":234,"line":620},17,[232,622,623],{"class":242},"    colorA: {default: ",[232,625,626],{"class":249},"'#7b2ff7'",[232,628,629],{"class":242},", transform: transformColor},\n",[232,631,633,636,639],{"class":234,"line":632},18,[232,634,635],{"class":242},"    colorB: {default: ",[232,637,638],{"class":249},"'#00e0ff'",[232,640,629],{"class":242},[232,642,644,647,650,653,655],{"class":234,"line":643},19,[232,645,646],{"class":242},"    colorSpace: {default: ",[232,648,649],{"class":249},"'oklch'",[232,651,652],{"class":242},", transform: transformColorSpace, compileTime: ",[232,654,601],{"class":406},[232,656,494],{"class":242},[232,658,660,663,666],{"class":234,"line":659},20,[232,661,662],{"class":242},"    thickness: {default: ",[232,664,665],{"class":406},"0.25",[232,667,494],{"class":242},[232,669,671,674,676],{"class":234,"line":670},21,[232,672,673],{"class":242},"    softness: {default: ",[232,675,509],{"class":406},[232,677,494],{"class":242},[232,679,681,684,687],{"class":234,"line":680},22,[232,682,683],{"class":242},"    intensity: {default: ",[232,685,686],{"class":406},"0.6",[232,688,494],{"class":242},[232,690,692,695,698],{"class":234,"line":691},23,[232,693,694],{"class":242},"    bloom: {default: ",[232,696,697],{"class":406},"0.3",[232,699,494],{"class":242},[232,701,703,706,709],{"class":234,"line":702},24,[232,704,705],{"class":242},"    spots: {default: ",[232,707,708],{"class":406},"3",[232,710,494],{"class":242},[232,712,714,717,719],{"class":234,"line":713},25,[232,715,716],{"class":242},"    spotSize: {default: ",[232,718,509],{"class":406},[232,720,494],{"class":242},[232,722,724,727,729],{"class":234,"line":723},26,[232,725,726],{"class":242},"    pulse: {default: ",[232,728,537],{"class":406},[232,730,494],{"class":242},[232,732,734,737,739],{"class":234,"line":733},27,[232,735,736],{"class":242},"    smoke: {default: ",[232,738,697],{"class":406},[232,740,494],{"class":242},[232,742,744,747,749],{"class":234,"line":743},28,[232,745,746],{"class":242},"    smokeSize: {default: ",[232,748,509],{"class":406},[232,750,494],{"class":242},[232,752,754,757,759],{"class":234,"line":753},29,[232,755,756],{"class":242},"    speed: {default: ",[232,758,526],{"class":406},[232,760,494],{"class":242},[232,762,764,767,769],{"class":234,"line":763},30,[232,765,766],{"class":242},"    seed: {default: ",[232,768,537],{"class":406},[232,770,494],{"class":242},[232,772,774],{"class":234,"line":773},31,[232,775,776],{"class":242},"  },\n",[232,778,780,783,786,788],{"class":234,"line":779},32,[232,781,782],{"class":238},"  ...",[232,784,785],{"class":242},"materials.",[232,787,161],{"class":466},[232,789,470],{"class":242},[232,791,793,796,799],{"class":234,"line":792},33,[232,794,795],{"class":242},"    chord: ",[232,797,798],{"class":249},"'firstLobe'",[232,800,482],{"class":242},[232,802,804,807,810],{"class":234,"line":803},34,[232,805,806],{"class":242},"    stencil: ",[232,808,809],{"class":249},"'centre'",[232,811,482],{"class":242},[232,813,815,818,821,825,827,830,833,836],{"class":234,"line":814},35,[232,816,817],{"class":466},"    surface",[232,819,820],{"class":242},": (",[232,822,824],{"class":823},"s9osk","frame",[232,826,409],{"class":242},[232,828,829],{"class":823},"params",[232,831,832],{"class":242},") ",[232,834,835],{"class":238},"=>",[232,837,838],{"class":242}," {\n",[232,840,842,845,847,850,852,854],{"class":234,"line":841},36,[232,843,844],{"class":238},"      const",[232,846,403],{"class":242},[232,848,849],{"class":406},"uniforms",[232,851,430],{"class":242},[232,853,433],{"class":238},[232,855,856],{"class":242}," params\n",[232,858,860,862,865,867,870],{"class":234,"line":859},37,[232,861,844],{"class":238},[232,863,864],{"class":406}," t",[232,866,463],{"class":238},[232,868,869],{"class":466}," animatedTime",[232,871,872],{"class":242},"(params)\n",[232,874,876],{"class":234,"line":875},38,[232,877,878],{"class":447},"      \u002F\u002F One beat per pixel, shared by the band's smoke and every spot orbit.\n",[232,880,882,884,887,889,892,895,898,901,904,907,910,913],{"class":234,"line":881},39,[232,883,844],{"class":238},[232,885,886],{"class":406}," beat",[232,888,463],{"class":238},[232,890,891],{"class":242}," math.",[232,893,894],{"class":466},"local",[232,896,897],{"class":242},"(",[232,899,900],{"class":466},"call",[232,902,903],{"class":242},"(heartbeatPulse, ",[232,905,906],{"class":249},"'heartbeatPulse'",[232,908,909],{"class":242},", [t]), ",[232,911,912],{"class":249},"'beat'",[232,914,915],{"class":242},")\n",[232,917,919,921,924,926,928,930,932,934,937,940],{"class":234,"line":918},40,[232,920,844],{"class":238},[232,922,923],{"class":406}," band",[232,925,463],{"class":238},[232,927,891],{"class":242},[232,929,894],{"class":466},[232,931,897],{"class":242},[232,933,900],{"class":466},[232,935,936],{"class":242},"(edgeGlowBand, ",[232,938,939],{"class":249},"'edgeGlowBand'",[232,941,942],{"class":242},", [\n",[232,944,946,949,952,954,957,959,962,965,967],{"class":234,"line":945},41,[232,947,948],{"class":242},"        frame.surf0",[232,950,951],{"class":238},"!",[232,953,551],{"class":242},[232,955,956],{"class":466},"member",[232,958,897],{"class":242},[232,960,961],{"class":249},"'r'",[232,963,964],{"class":242},"), frame.sdfUV",[232,966,951],{"class":238},[232,968,969],{"class":242},", params.ctx.viewportSize, uniforms.scale, uniforms.thickness, uniforms.softness,\n",[232,971,973],{"class":234,"line":972},42,[232,974,975],{"class":242},"        uniforms.smokeSize, uniforms.smoke, t, uniforms.pulse, beat,\n",[232,977,979,982,985],{"class":234,"line":978},43,[232,980,981],{"class":242},"      ]), ",[232,983,984],{"class":249},"'band'",[232,986,915],{"class":242},[232,988,990,992,995,997,1000,1003,1006,1009,1012,1014,1017,1020,1023,1026,1029],{"class":234,"line":989},44,[232,991,844],{"class":238},[232,993,994],{"class":466}," spotsFor",[232,996,463],{"class":238},[232,998,999],{"class":242}," (",[232,1001,1002],{"class":823},"colorIndex",[232,1004,1005],{"class":238},":",[232,1007,1008],{"class":406}," number",[232,1010,1011],{"class":242},")",[232,1013,1005],{"class":238},[232,1015,1016],{"class":466}," Expr",[232,1018,1019],{"class":238}," =>",[232,1021,1022],{"class":466}," call",[232,1024,1025],{"class":242},"(orbitSpotsAccum, ",[232,1027,1028],{"class":249},"'orbitSpotsAccum'",[232,1030,942],{"class":242},[232,1032,1034,1037,1039,1041,1044,1047,1049,1051,1054],{"class":234,"line":1033},45,[232,1035,1036],{"class":242},"        band.",[232,1038,956],{"class":466},[232,1040,897],{"class":242},[232,1042,1043],{"class":249},"'y'",[232,1045,1046],{"class":242},"), band.",[232,1048,956],{"class":466},[232,1050,897],{"class":242},[232,1052,1053],{"class":249},"'x'",[232,1055,1056],{"class":242},"), t, beat, uniforms.spots, uniforms.spotSize, uniforms.pulse,\n",[232,1058,1060,1063,1066],{"class":234,"line":1059},46,[232,1061,1062],{"class":242},"        uniforms.intensity, uniforms.softness, uniforms.seed, math.",[232,1064,1065],{"class":466},"float",[232,1067,1068],{"class":242},"(colorIndex),\n",[232,1070,1072],{"class":234,"line":1071},47,[232,1073,1074],{"class":242},"      ])\n",[232,1076,1078],{"class":234,"line":1077},48,[232,1079,1080],{"class":447},"      \u002F\u002F Fold the two colours together in the chosen colour space, then compose with bloom.\n",[232,1082,1084,1086,1089,1091,1094,1097,1100,1102,1104,1107,1110],{"class":234,"line":1083},49,[232,1085,844],{"class":238},[232,1087,1088],{"class":406}," accumColor",[232,1090,463],{"class":238},[232,1092,1093],{"class":466}," edgeGlowAccumColorFor",[232,1095,1096],{"class":242},"((params.propValues.colorSpace ",[232,1098,1099],{"class":238},"as",[232,1101,1008],{"class":406},[232,1103,832],{"class":242},[232,1105,1106],{"class":238},"??",[232,1108,1109],{"class":406}," 0",[232,1111,915],{"class":242},[232,1113,1115,1118,1121,1123,1125,1128,1131],{"class":234,"line":1114},50,[232,1116,1117],{"class":238},"      let",[232,1119,1120],{"class":242}," state ",[232,1122,433],{"class":238},[232,1124,1022],{"class":466},[232,1126,1127],{"class":242},"(edgeGlowAccumZero, ",[232,1129,1130],{"class":249},"'edgeGlowAccumZero'",[232,1132,1133],{"class":242},", [])\n",[232,1135,1137,1140,1142,1144,1147,1150,1153,1156,1158,1160],{"class":234,"line":1136},51,[232,1138,1139],{"class":242},"      state ",[232,1141,433],{"class":238},[232,1143,1022],{"class":466},[232,1145,1146],{"class":242},"(accumColor, ",[232,1148,1149],{"class":249},"'edgeGlowAccumColor'",[232,1151,1152],{"class":242},", [state, uniforms.colorA, ",[232,1154,1155],{"class":466},"spotsFor",[232,1157,897],{"class":242},[232,1159,537],{"class":406},[232,1161,1162],{"class":242},")])\n",[232,1164,1166,1168,1170,1172,1174,1176,1179,1181,1183,1185],{"class":234,"line":1165},52,[232,1167,1139],{"class":242},[232,1169,433],{"class":238},[232,1171,1022],{"class":466},[232,1173,1146],{"class":242},[232,1175,1149],{"class":249},[232,1177,1178],{"class":242},", [state, uniforms.colorB, ",[232,1180,1155],{"class":466},[232,1182,897],{"class":242},[232,1184,526],{"class":406},[232,1186,1162],{"class":242},[232,1188,1190,1193,1195,1198,1201],{"class":234,"line":1189},53,[232,1191,1192],{"class":238},"      return",[232,1194,1022],{"class":466},[232,1196,1197],{"class":242},"(edgeGlowCompose, ",[232,1199,1200],{"class":249},"'edgeGlowCompose'",[232,1202,1203],{"class":242},", [state, uniforms.bloom])\n",[232,1205,1207],{"class":234,"line":1206},54,[232,1208,1209],{"class":242},"    },\n",[232,1211,1213],{"class":234,"line":1212},55,[232,1214,1215],{"class":242},"  }),\n",[232,1217,1219],{"class":234,"line":1218},56,[232,1220,1221],{"class":242},"})\n",[252,1223,1225],{"id":1224},"words","Words",[1227,1228,1230],"primitive-words",{":words":1229},"[{\"name\":\"edgeGlowBand\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-edgeglow\u002Fedgeglowband\",\"summary\":\"The glowing band around the shape's edge, with drifting smoke, plus the angle around the shape.\"},{\"name\":\"orbitSpotsAccum\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-edgeglow\u002Forbitspotsaccum\",\"summary\":\"The spots of one color orbiting the band, as coverage at this pixel.\"},{\"name\":\"heartbeatPulse\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-edgeglow\u002Fheartbeatpulse\",\"summary\":\"A double heartbeat, 0 to 1, driven by the layer's clock.\"},{\"name\":\"edgeGlowAccumZero\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-edgeglow\u002Fedgeglowaccumzero\",\"summary\":\"The empty state to start folding colors into.\"},{\"name\":\"edgeGlowAccumColorFor\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-edgeglow\u002Fedgeglowaccumcolorfor\",\"summary\":\"The fold step for one color space: adds one color's spots to the running state.\"},{\"name\":\"edgeGlowCompose\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-edgeglow\u002Fedgeglowcompose\",\"summary\":\"The final color from the folded state, over a transparent background.\"},{\"name\":\"colorAtIndex\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Feffects-edgeglow\u002Fcoloratindex\",\"summary\":\"One color from a `stops` prop, by index.\"}]",[1231,1232,1233,1241,1248,1255,1262,1269,1276],"ul",{},[1234,1235,1236,1240],"li",{},[173,1237,1238],{"href":175},[8,1239,178],{}," — The glowing band around the shape's edge, with drifting smoke, plus the angle around the shape.",[1234,1242,1243,1247],{},[173,1244,1245],{"href":182},[8,1246,185],{}," — The spots of one color orbiting the band, as coverage at this pixel.",[1234,1249,1250,1254],{},[173,1251,1252],{"href":210},[8,1253,213],{}," — A double heartbeat, 0 to 1, driven by the layer's clock.",[1234,1256,1257,1261],{},[173,1258,1259],{"href":189},[8,1260,192],{}," — The empty state to start folding colors into.",[1234,1263,1264,1268],{},[173,1265,1266],{"href":196},[8,1267,199],{}," — The fold step for one color space: adds one color's spots to the running state.",[1234,1270,1271,1275],{},[173,1272,1273],{"href":203},[8,1274,206],{}," — The final color from the folded state, over a transparent background.",[1234,1277,1278,1282,1283,1285],{},[173,1279,1280],{"href":327},[8,1281,330],{}," — One color from a ",[8,1284,321],{}," prop, by index.",[1287,1288,1289],"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}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":228,"searchDepth":375,"depth":375,"links":1291},[1292,1293,1294],{"id":254,"depth":375,"text":255},{"id":355,"depth":375,"text":356},{"id":1224,"depth":375,"text":1225},"effects.edgeGlow","effects-edgeglow","A band of light hugging the edge of any shape, with coloured spots racing around it.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Feffects.edgeGlow.md","md","effects","Filters & effects",{},"\u002Fdocs\u002Fprimitives\u002Feffects-edgeglow",{"title":147,"description":1297},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Feffects\u002FedgeGlow.ts","docs\u002Fprimitives\u002F33.effects-edgeglow\u002Findex","BmZKddesrtZ4PpO5TbykMdPhUzltkrPPhb_POtEyyLE"]