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