[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Flight":127,"github-stars":1364},[4,9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,70,74,78,82,86,91,95,99,103,107,111,115,119,123],{"path":5,"title":6,"description":7,"category":8},"\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":10,"title":11,"description":12,"category":8},"\u002Fdocs\u002Fguide\u002Fquickstart","Quickstart","Install Shaders, render your first effect, and drive a prop from state.",{"path":14,"title":15,"description":16,"category":8},"\u002Fdocs\u002Fguide\u002Fcomposing-effects","Composing effects","Stack components as layers and nest them to control which layers an effect touches.",{"path":18,"title":19,"description":20,"category":8},"\u002Fdocs\u002Fguide\u002Fblending-masking","Blending and masking","Control how a layer mixes with the layers below it, and reveal one layer through another.",{"path":22,"title":23,"description":24,"category":8},"\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":26,"title":27,"description":28,"category":8},"\u002Fdocs\u002Fguide\u002Fdynamic-props","Dynamic props","Drive any numeric or position prop from time, the cursor, or another layer, without writing animation code.",{"path":30,"title":31,"description":32,"category":8},"\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":34,"title":35,"description":36,"category":8},"\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":38,"title":39,"description":40,"category":8},"\u002Fdocs\u002Fguide\u002Ftransforms","Transforms","Position, size, and rotate any layer inside the canvas with a bounding box, in any CSS unit.",{"path":42,"title":43,"description":44,"category":8},"\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":46,"title":47,"description":48,"category":8},"\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":50,"title":51,"description":52,"category":8},"\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":54,"title":55,"description":56,"category":8},"\u002Fdocs\u002Fguide\u002Fperformance","Performance","Learn what makes an effect expensive on the GPU and how to keep it inside the frame budget.",{"path":58,"title":59,"description":60,"category":8},"\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":62,"title":63,"description":64,"category":8},"\u002Fdocs\u002Fguide\u002Ftelemetry","Telemetry","The `\u003CShader>` component occasionally sends an anonymous performance report to help us improve the engine over time.",{"path":66,"title":67,"description":68,"category":69},"\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":71,"title":72,"description":73,"category":69},"\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":75,"title":76,"description":77,"category":69},"\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":79,"title":80,"description":81,"category":8},"\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":83,"title":84,"description":85,"category":8},"\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":87,"title":88,"description":89,"category":90},"\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":92,"title":93,"description":94,"category":90},"\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":96,"title":97,"description":98,"category":90},"\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":100,"title":101,"description":102,"category":90},"\u002Fdocs\u002Fguide\u002Fmasking-and-blending","Masking and blending","How blend modes and masks combine components in the design editor.",{"path":104,"title":105,"description":106,"category":90},"\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":108,"title":109,"description":110,"category":90},"\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":112,"title":113,"description":114,"category":90},"\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":116,"title":117,"description":118,"category":90},"\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":120,"title":121,"description":122,"category":90},"\u002Fdocs\u002Fguide\u002Fglass-component-spotlight","Component spotlight: Glass","A short look at the Glass component and the liquid-glass look it creates.",{"path":124,"title":125,"description":126,"category":90},"\u002Fdocs\u002Fguide\u002Fdigital-looks-component-spotlight","Component spotlight: Digital looks","A look at the digital stylization components for glitchy, futuristic, or technical effects.",{"id":128,"title":129,"body":130,"categoryId":136,"categorySlug":136,"categoryTitle":1352,"curated":555,"description":1353,"editUrl":1354,"extension":1355,"group":136,"groupTitle":1356,"kind":1352,"meta":1357,"navigation":555,"path":1358,"seo":1359,"sourceUrl":1360,"stem":1361,"wordCount":1362,"__hash__":1363},"primitives\u002Fdocs\u002Fprimitives\u002F13.light\u002Findex.md","Light",{"type":131,"value":132,"toc":1346},"minimark",[133,137,212,258,287,292,530,534,938,942,993,997,1342],[134,135,129],"h1",{"id":136},"light",[138,139,140,141,145,146,153,154,160,161,164,165,171,172,178,179,185,186,190,191,197,198,204,205,211],"p",{},"Words for drawing light: glows, rays, beams, flares and halos, plus the frames they are drawn\nin. A ",[142,143,144],"strong",{},"frame"," is the coordinate system a light evaluates in. ",[147,148,150],"a",{"href":149},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fradialframe",[8,151,152],{},"radialFrame"," gives each pixel\nits distance and angle from a center; ",[147,155,157],{"href":156},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fbeamframe",[8,158,159],{},"beamFrame"," gives its distance along and across a beam.\n",[142,162,163],{},"Parts"," such as ",[147,166,168],{"href":167},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fglowpoint",[8,169,170],{},"glowPoint",", ",[147,173,175],{"href":174},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fraylobes",[8,176,177],{},"rayLobes"," and ",[147,180,182],{"href":181},"\u002Fdocs\u002Fprimitives\u002Flight\u002Ffeathermask",[8,183,184],{},"featherMask"," shape a light over a frame and\nreturn a ",[187,188,189],"em",{},"field",", a 0–1 number per pixel. ",[147,192,194],{"href":193},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fwithframe",[8,195,196],{},"withFrame"," evaluates a part in a frame,\n",[147,199,201],{"href":200},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fmodulate",[8,202,203],{},"modulate"," multiplies parts (a mask over a pattern), and ",[147,206,208],{"href":207},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fadditive",[8,209,210],{},"additive"," sums finished lights.",[138,213,214,215,178,221,227,228,231,232,238,239,245,246,249,250,253,254,257],{},"A light field becomes color at the end of the recipe. ",[147,216,218],{"href":217},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fcoveragemix",[8,219,220],{},"coverageMix",[147,222,224],{"href":223},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fcoverageover",[8,225,226],{},"coverageOver"," color\na field over a background as a finished ",[8,229,230],{},"paint:",". ",[147,233,235],{"href":234},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fheatramp",[8,236,237],{},"heatRamp"," turns a heat field into\noverexposed color, and ",[147,240,242],{"href":241},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fscreenglow",[8,243,244],{},"screenGlow"," shines it onto the layer inside as an ",[8,247,248],{},"effect:",". Emitted\nlight drawn over transparency closes with ",[8,251,252],{},"emissiveAlpha"," from ",[8,255,256],{},"compose",".",[259,260,265],"pre",{"className":261,"code":262,"language":263,"meta":264,"style":264},"language-ts shiki shiki-themes github-dark","import {light} from 'shaders\u002Fstd'\n","ts","",[8,266,267],{"__ignoreMap":264},[268,269,272,276,280,283],"span",{"class":270,"line":271},"line",1,[268,273,275],{"class":274},"snl16","import",[268,277,279],{"class":278},"s95oV"," {light} ",[268,281,282],{"class":274},"from",[268,284,286],{"class":285},"sU2Wk"," 'shaders\u002Fstd'\n",[288,289,291],"h2",{"id":290},"reach-for-it-when","Reach for it when",[293,294,295,308],"table",{},[296,297,298],"thead",{},[299,300,301,305],"tr",{},[302,303,304],"th",{},"When you need",[302,306,307],{},"Use",[309,310,311,325,356,367,380,400,416,439,458,482,495,506,519],"tbody",{},[299,312,313,317],{},[314,315,316],"td",{},"a soft round glow at a position",[314,318,319],{},[147,320,322],{"href":321},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fglowat",[8,323,324],{},"glowAt",[299,326,327,330],{},[314,328,329],{},"a glow, rays or a halo around a center prop",[314,331,332,336,337,341,342,171,346,171,350],{},[147,333,334],{"href":149},[8,335,152],{}," + ",[147,338,339],{"href":193},[8,340,196],{}," with ",[147,343,344],{"href":167},[8,345,170],{},[147,347,348],{"href":174},[8,349,177],{},[147,351,353],{"href":352},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fringband",[8,354,355],{},"ringBand",[299,357,358,361],{},[314,359,360],{},"a light that fades at a radius",[314,362,363],{},[147,364,365],{"href":181},[8,366,184],{},[299,368,369,372],{},[314,370,371],{},"light spilling from an emitter with a real falloff",[314,373,374],{},[147,375,377],{"href":376},"\u002Fdocs\u002Fprimitives\u002Flight\u002Femitterfalloff",[8,378,379],{},"emitterFalloff",[299,381,382,385],{},[314,383,384],{},"volumetric rays or god rays",[314,386,387,393,394],{},[147,388,390],{"href":389},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fnoiserays",[8,391,392],{},"noiseRays"," in a ",[147,395,397],{"href":396},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fseamlessradialframe",[8,398,399],{},"seamlessRadialFrame",[299,401,402,405],{},[314,403,404],{},"coloring a light field over a background",[314,406,407,411,412],{},[147,408,409],{"href":217},[8,410,220],{}," or ",[147,413,414],{"href":223},[8,415,226],{},[299,417,418,421],{},[314,419,420],{},"a beam anchored at a point aimed at the canvas",[314,422,423,341,427,171,433],{},[147,424,425],{"href":156},[8,426,159],{},[147,428,430],{"href":429},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fbeambloom",[8,431,432],{},"beamBloom",[147,434,436],{"href":435},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fbeamstreaks",[8,437,438],{},"beamStreaks",[299,440,441,444],{},[314,442,443],{},"a beam between two points, tapered end to end",[314,445,446,336,452],{},[147,447,449],{"href":448},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fsegmentproject",[8,450,451],{},"segmentProject",[147,453,455],{"href":454},"\u002Fdocs\u002Fprimitives\u002Flight\u002Flightbeam",[8,456,457],{},"lightBeam",[299,459,460,463],{},[314,461,462],{},"a camera lens flare",[314,464,465,471,472,475,476],{},[147,466,468],{"href":467},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fflareframe",[8,469,470],{},"flareFrame"," + the ",[8,473,474],{},"flare*"," parts, closed with ",[147,477,479],{"href":478},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fflarecomposite",[8,480,481],{},"flareComposite",[299,483,484,487],{},[314,485,486],{},"a shiny surface from a normal field",[314,488,489],{},[147,490,492],{"href":491},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fshine",[8,493,494],{},"shine",[299,496,497,500],{},[314,498,499],{},"turning a heat field into overexposed color",[314,501,502],{},[147,503,504],{"href":234},[8,505,237],{},[299,507,508,511],{},[314,509,510],{},"darkening the corners",[314,512,513],{},[147,514,516],{"href":515},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fvignettemask",[8,517,518],{},"vignetteMask",[299,520,521,524],{},[314,522,523],{},"a glow that behaves like exposure over a child",[314,525,526],{},[147,527,528],{"href":241},[8,529,244],{},[288,531,533],{"id":532},"example","Example",[259,535,537],{"className":261,"code":536,"language":263,"meta":264,"style":264},"import {defineShader, p, light, compose, math, transformColor, transformPosition} from 'shaders\u002Fstd'\n\nconst {radialFrame, withFrame, modulate, glowPoint, softRayLobes, featherMask} = light\n\n\u002F\u002F A sun: soft rays spinning around a draggable center, feathered at a radius, drawn as emitted light.\nexport const Sun = defineShader({\n  name: 'Sun',\n  animatedTime: {speed: 'speed'},\n  props: {\n    center: {default: {x: 0.5, y: 0.5}, transform: transformPosition},\n    color: {default: '#ffd27a', transform: transformColor},\n    radius: {default: 0.5},\n    rays: {default: 12},\n    softness: {default: 0.6},\n    speed: {default: 1},\n  },\n  paint: (params) => {\n    const coverage = withFrame(\n      radialFrame(p('center')),\n      modulate(softRayLobes({count: p('rays'), softness: p('softness'), spin: 0.2}), glowPoint({sharpness: 6}), featherMask({radius: p('radius'), feather: 0.4})),\n      'sun',\n    )(params)\n    const rgb = math.mul(params.uniforms.color.member('rgb'), coverage)\n    return compose.emissiveAlpha(rgb)\n  },\n})\n",[8,538,539,550,557,599,604,611,633,645,657,663,680,692,702,713,724,735,741,763,780,799,869,877,883,913,927,932],{"__ignoreMap":264},[268,540,541,543,546,548],{"class":270,"line":271},[268,542,275],{"class":274},[268,544,545],{"class":278}," {defineShader, p, light, compose, math, transformColor, transformPosition} ",[268,547,282],{"class":274},[268,549,286],{"class":285},[268,551,553],{"class":270,"line":552},2,[268,554,556],{"emptyLinePlaceholder":555},true,"\n",[268,558,560,563,566,569,571,573,575,577,579,581,583,586,588,590,593,596],{"class":270,"line":559},3,[268,561,562],{"class":274},"const",[268,564,565],{"class":278}," {",[268,567,152],{"class":568},"sDLfK",[268,570,171],{"class":278},[268,572,196],{"class":568},[268,574,171],{"class":278},[268,576,203],{"class":568},[268,578,171],{"class":278},[268,580,170],{"class":568},[268,582,171],{"class":278},[268,584,585],{"class":568},"softRayLobes",[268,587,171],{"class":278},[268,589,184],{"class":568},[268,591,592],{"class":278},"} ",[268,594,595],{"class":274},"=",[268,597,598],{"class":278}," light\n",[268,600,602],{"class":270,"line":601},4,[268,603,556],{"emptyLinePlaceholder":555},[268,605,607],{"class":270,"line":606},5,[268,608,610],{"class":609},"sAwPA","\u002F\u002F A sun: soft rays spinning around a draggable center, feathered at a radius, drawn as emitted light.\n",[268,612,614,617,620,623,626,630],{"class":270,"line":613},6,[268,615,616],{"class":274},"export",[268,618,619],{"class":274}," const",[268,621,622],{"class":568}," Sun",[268,624,625],{"class":274}," =",[268,627,629],{"class":628},"svObZ"," defineShader",[268,631,632],{"class":278},"({\n",[268,634,636,639,642],{"class":270,"line":635},7,[268,637,638],{"class":278},"  name: ",[268,640,641],{"class":285},"'Sun'",[268,643,644],{"class":278},",\n",[268,646,648,651,654],{"class":270,"line":647},8,[268,649,650],{"class":278},"  animatedTime: {speed: ",[268,652,653],{"class":285},"'speed'",[268,655,656],{"class":278},"},\n",[268,658,660],{"class":270,"line":659},9,[268,661,662],{"class":278},"  props: {\n",[268,664,666,669,672,675,677],{"class":270,"line":665},10,[268,667,668],{"class":278},"    center: {default: {x: ",[268,670,671],{"class":568},"0.5",[268,673,674],{"class":278},", y: ",[268,676,671],{"class":568},[268,678,679],{"class":278},"}, transform: transformPosition},\n",[268,681,683,686,689],{"class":270,"line":682},11,[268,684,685],{"class":278},"    color: {default: ",[268,687,688],{"class":285},"'#ffd27a'",[268,690,691],{"class":278},", transform: transformColor},\n",[268,693,695,698,700],{"class":270,"line":694},12,[268,696,697],{"class":278},"    radius: {default: ",[268,699,671],{"class":568},[268,701,656],{"class":278},[268,703,705,708,711],{"class":270,"line":704},13,[268,706,707],{"class":278},"    rays: {default: ",[268,709,710],{"class":568},"12",[268,712,656],{"class":278},[268,714,716,719,722],{"class":270,"line":715},14,[268,717,718],{"class":278},"    softness: {default: ",[268,720,721],{"class":568},"0.6",[268,723,656],{"class":278},[268,725,727,730,733],{"class":270,"line":726},15,[268,728,729],{"class":278},"    speed: {default: ",[268,731,732],{"class":568},"1",[268,734,656],{"class":278},[268,736,738],{"class":270,"line":737},16,[268,739,740],{"class":278},"  },\n",[268,742,744,747,750,754,757,760],{"class":270,"line":743},17,[268,745,746],{"class":628},"  paint",[268,748,749],{"class":278},": (",[268,751,753],{"class":752},"s9osk","params",[268,755,756],{"class":278},") ",[268,758,759],{"class":274},"=>",[268,761,762],{"class":278}," {\n",[268,764,766,769,772,774,777],{"class":270,"line":765},18,[268,767,768],{"class":274},"    const",[268,770,771],{"class":568}," coverage",[268,773,625],{"class":274},[268,775,776],{"class":628}," withFrame",[268,778,779],{"class":278},"(\n",[268,781,783,786,789,791,793,796],{"class":270,"line":782},19,[268,784,785],{"class":628},"      radialFrame",[268,787,788],{"class":278},"(",[268,790,138],{"class":628},[268,792,788],{"class":278},[268,794,795],{"class":285},"'center'",[268,797,798],{"class":278},")),\n",[268,800,802,805,807,809,812,814,816,819,822,824,826,829,832,835,838,840,843,846,848,850,853,855,857,860,863,866],{"class":270,"line":801},20,[268,803,804],{"class":628},"      modulate",[268,806,788],{"class":278},[268,808,585],{"class":628},[268,810,811],{"class":278},"({count: ",[268,813,138],{"class":628},[268,815,788],{"class":278},[268,817,818],{"class":285},"'rays'",[268,820,821],{"class":278},"), softness: ",[268,823,138],{"class":628},[268,825,788],{"class":278},[268,827,828],{"class":285},"'softness'",[268,830,831],{"class":278},"), spin: ",[268,833,834],{"class":568},"0.2",[268,836,837],{"class":278},"}), ",[268,839,170],{"class":628},[268,841,842],{"class":278},"({sharpness: ",[268,844,845],{"class":568},"6",[268,847,837],{"class":278},[268,849,184],{"class":628},[268,851,852],{"class":278},"({radius: ",[268,854,138],{"class":628},[268,856,788],{"class":278},[268,858,859],{"class":285},"'radius'",[268,861,862],{"class":278},"), feather: ",[268,864,865],{"class":568},"0.4",[268,867,868],{"class":278},"})),\n",[268,870,872,875],{"class":270,"line":871},21,[268,873,874],{"class":285},"      'sun'",[268,876,644],{"class":278},[268,878,880],{"class":270,"line":879},22,[268,881,882],{"class":278},"    )(params)\n",[268,884,886,888,891,893,896,899,902,905,907,910],{"class":270,"line":885},23,[268,887,768],{"class":274},[268,889,890],{"class":568}," rgb",[268,892,625],{"class":274},[268,894,895],{"class":278}," math.",[268,897,898],{"class":628},"mul",[268,900,901],{"class":278},"(params.uniforms.color.",[268,903,904],{"class":628},"member",[268,906,788],{"class":278},[268,908,909],{"class":285},"'rgb'",[268,911,912],{"class":278},"), coverage)\n",[268,914,916,919,922,924],{"class":270,"line":915},24,[268,917,918],{"class":274},"    return",[268,920,921],{"class":278}," compose.",[268,923,252],{"class":628},[268,925,926],{"class":278},"(rgb)\n",[268,928,930],{"class":270,"line":929},25,[268,931,740],{"class":278},[268,933,935],{"class":270,"line":934},26,[268,936,937],{"class":278},"})\n",[288,939,941],{"id":940},"types","Types",[293,943,944,954],{},[296,945,946],{},[299,947,948,951],{},[302,949,950],{},"Type",[302,952,953],{},"What it is",[309,955,956,973,983],{},[299,957,958,963],{},[314,959,960],{},[8,961,962],{},"HeatRamp",[314,964,965,966,968,969,972],{},"What ",[8,967,237],{}," returns: call its ",[8,970,971],{},"taps(heat, params)"," to color a heat field.",[299,974,975,980],{},[314,976,977],{},[8,978,979],{},"LightPart",[314,981,982],{},"A light shaped over a frame's coordinates.",[299,984,985,990],{},[314,986,987],{},[8,988,989],{},"LightValue",[314,991,992],{},"A light or a frame waiting for the shader's params.",[288,994,996],{"id":995},"words","Words",[998,999,1001],"primitive-words",{":words":1000},"[{\"name\":\"glowAt\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fglowat\",\"summary\":\"A soft round glow at a position on the canvas.\"},{\"name\":\"glowSpot\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fglowspot\",\"summary\":\"A soft oval glow over an offset you have already scaled, the core of a bloom or a glare.\"},{\"name\":\"emitterFalloff\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Femitterfalloff\",\"summary\":\"How light spilling from an emitter dims with distance, with a long realistic tail.\"},{\"name\":\"radialFrame\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fradialframe\",\"summary\":\"The frame for a burst, halo or sweep around a center prop.\"},{\"name\":\"seamlessRadialFrame\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fseamlessradialframe\",\"summary\":\"The frame `noiseRays` needs: a radial frame around a center prop with no visible seam.\"},{\"name\":\"beamFrame\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fbeamframe\",\"summary\":\"The frame of a beam that starts at an anchor prop and points at the canvas center.\"},{\"name\":\"withFrame\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fwithframe\",\"summary\":\"Evaluate a light part in a frame.\"},{\"name\":\"modulate\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fmodulate\",\"summary\":\"Multiply light parts drawn in the same frame, such as a mask over a pattern.\"},{\"name\":\"glowPoint\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fglowpoint\",\"summary\":\"A soft glow at the center of a radial frame with no hard edge.\"},{\"name\":\"featherMask\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Ffeathermask\",\"summary\":\"A round mask that is solid inside a radius and fades out at its edge.\"},{\"name\":\"rayLobes\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fraylobes\",\"summary\":\"Soft rays fanning out from the center of a radial frame, turning with the layer's clock.\"},{\"name\":\"softRayLobes\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fsoftraylobes\",\"summary\":\"`rayLobes` with a softness slider instead of a sharpness.\"},{\"name\":\"raySpikes\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Frayspikes\",\"summary\":\"Thin star spikes with dark gaps between them, like light through a camera aperture.\"},{\"name\":\"ringBand\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fringband\",\"summary\":\"Three thin colored rings around the center, the rainbow edge of a lens or a halo.\"},{\"name\":\"noiseRays\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fnoiserays\",\"summary\":\"Volumetric god rays: shafts of light drifting outward from the center, moving on the layer's clock.\"},{\"name\":\"rayBands\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fraybands\",\"summary\":\"Bright bands that travel along a coordinate, for aurora curtains or shimmering rays.\"},{\"name\":\"shine\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fshine\",\"summary\":\"A specular highlight on any surface that gives you a normal.\"},{\"name\":\"domeNormal\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fdomenormal\",\"summary\":\"The surface normals of a flat disc treated as a puffy dome, ready to light with `shine`.\"},{\"name\":\"additive\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fadditive\",\"summary\":\"Adds lights together, since light from several sources simply sums.\"},{\"name\":\"heatRamp\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fheatramp\",\"summary\":\"The colors of overexposed light, from a dim fringe through a mid tone to a hot core.\"},{\"name\":\"vignetteMask\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fvignettemask\",\"summary\":\"Darkens the corners of the canvas.\"},{\"name\":\"screenGlow\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fscreenglow\",\"summary\":\"An `effect` that shines emitted light onto the layer inside it, the way light hits film.\"},{\"name\":\"coverageMix\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fcoveragemix\",\"summary\":\"Blends from a background color to a light color by a coverage field, as a finished paint.\"},{\"name\":\"coverageOver\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fcoverageover\",\"summary\":\"Lays a light color over a background color by a coverage field, like a layer with an opacity mask, as a finished paint.\"},{\"name\":\"slowDrift\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fslowdrift\",\"summary\":\"The slow breathing and drifting signals that keep a light leak alive.\"},{\"name\":\"beamBloom\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fbeambloom\",\"summary\":\"The soft pool of light at the start of a beam, with a wider faint shoulder around it.\"},{\"name\":\"beamStreaks\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fbeamstreaks\",\"summary\":\"Two bright bands crossing a beam further along it, slowly drifting, like light bouncing inside a film camera.\"},{\"name\":\"streakBand\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fstreakband\",\"summary\":\"One soft band across a single coordinate, peaking at `center`.\"},{\"name\":\"lightBeam\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Flightbeam\",\"summary\":\"The glow of a beam that can be thicker or softer at one end than the other.\"},{\"name\":\"segmentProject\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fsegmentproject\",\"summary\":\"Where a pixel falls along a line from `a` to `b`, and how far it is from that line.\"},{\"name\":\"flareFrame\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fflareframe\",\"summary\":\"The shared frame of a camera lens flare, which every `flare*` part reads.\"},{\"name\":\"lensGhost\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Flensghost\",\"summary\":\"One ghost disc of a lens flare, the faint circles that line up across from the light.\"},{\"name\":\"flareHalo\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fflarehalo\",\"summary\":\"The rainbow halo ring of a lens flare, drawn across the canvas from the light.\"},{\"name\":\"flareStarburst\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fflarestarburst\",\"summary\":\"The star of thin spikes around the light in a lens flare.\"},{\"name\":\"flareStreak\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fflarestreak\",\"summary\":\"The horizontal widescreen streak through the light in a lens flare.\"},{\"name\":\"flareGlare\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fflareglare\",\"summary\":\"The broad warm-white wash around the light that lifts contrast near it.\"},{\"name\":\"flareCore\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fflarecore\",\"summary\":\"The bright point at the light itself: a hard pinpoint inside a small soft glow.\"},{\"name\":\"flareComposite\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fflarecomposite\",\"summary\":\"Closes a lens flare: turns the summed flare parts into the color to return from `paint`.\"},{\"name\":\"dithered\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fdithered\",\"summary\":\"Adds a trace of noise to a heat field so long soft ramps do not show bands.\"},{\"name\":\"starGlint\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Flight\u002Fstarglint\",\"summary\":\"A four-point star of light: a round core with a thin ray along each axis, like a glint off glitter or a star in a photograph.\"}]",[1002,1003,1004,1012,1021,1028,1035,1045,1052,1059,1066,1073,1080,1087,1098,1107,1114,1121,1130,1137,1148,1155,1162,1169,1180,1187,1194,1203,1210,1217,1229,1236,1250,1260,1269,1278,1287,1296,1305,1314,1324,1333],"ul",{},[1005,1006,1007,1011],"li",{},[147,1008,1009],{"href":321},[8,1010,324],{}," — A soft round glow at a position on the canvas.",[1005,1013,1014,1020],{},[147,1015,1017],{"href":1016},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fglowspot",[8,1018,1019],{},"glowSpot"," — A soft oval glow over an offset you have already scaled, the core of a bloom or a glare.",[1005,1022,1023,1027],{},[147,1024,1025],{"href":376},[8,1026,379],{}," — How light spilling from an emitter dims with distance, with a long realistic tail.",[1005,1029,1030,1034],{},[147,1031,1032],{"href":149},[8,1033,152],{}," — The frame for a burst, halo or sweep around a center prop.",[1005,1036,1037,1041,1042,1044],{},[147,1038,1039],{"href":396},[8,1040,399],{}," — The frame ",[8,1043,392],{}," needs: a radial frame around a center prop with no visible seam.",[1005,1046,1047,1051],{},[147,1048,1049],{"href":156},[8,1050,159],{}," — The frame of a beam that starts at an anchor prop and points at the canvas center.",[1005,1053,1054,1058],{},[147,1055,1056],{"href":193},[8,1057,196],{}," — Evaluate a light part in a frame.",[1005,1060,1061,1065],{},[147,1062,1063],{"href":200},[8,1064,203],{}," — Multiply light parts drawn in the same frame, such as a mask over a pattern.",[1005,1067,1068,1072],{},[147,1069,1070],{"href":167},[8,1071,170],{}," — A soft glow at the center of a radial frame with no hard edge.",[1005,1074,1075,1079],{},[147,1076,1077],{"href":181},[8,1078,184],{}," — A round mask that is solid inside a radius and fades out at its edge.",[1005,1081,1082,1086],{},[147,1083,1084],{"href":174},[8,1085,177],{}," — Soft rays fanning out from the center of a radial frame, turning with the layer's clock.",[1005,1088,1089,1094,1095,1097],{},[147,1090,1092],{"href":1091},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fsoftraylobes",[8,1093,585],{}," — ",[8,1096,177],{}," with a softness slider instead of a sharpness.",[1005,1099,1100,1106],{},[147,1101,1103],{"href":1102},"\u002Fdocs\u002Fprimitives\u002Flight\u002Frayspikes",[8,1104,1105],{},"raySpikes"," — Thin star spikes with dark gaps between them, like light through a camera aperture.",[1005,1108,1109,1113],{},[147,1110,1111],{"href":352},[8,1112,355],{}," — Three thin colored rings around the center, the rainbow edge of a lens or a halo.",[1005,1115,1116,1120],{},[147,1117,1118],{"href":389},[8,1119,392],{}," — Volumetric god rays: shafts of light drifting outward from the center, moving on the layer's clock.",[1005,1122,1123,1129],{},[147,1124,1126],{"href":1125},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fraybands",[8,1127,1128],{},"rayBands"," — Bright bands that travel along a coordinate, for aurora curtains or shimmering rays.",[1005,1131,1132,1136],{},[147,1133,1134],{"href":491},[8,1135,494],{}," — A specular highlight on any surface that gives you a normal.",[1005,1138,1139,1145,1146,257],{},[147,1140,1142],{"href":1141},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fdomenormal",[8,1143,1144],{},"domeNormal"," — The surface normals of a flat disc treated as a puffy dome, ready to light with ",[8,1147,494],{},[1005,1149,1150,1154],{},[147,1151,1152],{"href":207},[8,1153,210],{}," — Adds lights together, since light from several sources simply sums.",[1005,1156,1157,1161],{},[147,1158,1159],{"href":234},[8,1160,237],{}," — The colors of overexposed light, from a dim fringe through a mid tone to a hot core.",[1005,1163,1164,1168],{},[147,1165,1166],{"href":515},[8,1167,518],{}," — Darkens the corners of the canvas.",[1005,1170,1171,1175,1176,1179],{},[147,1172,1173],{"href":241},[8,1174,244],{}," — An ",[8,1177,1178],{},"effect"," that shines emitted light onto the layer inside it, the way light hits film.",[1005,1181,1182,1186],{},[147,1183,1184],{"href":217},[8,1185,220],{}," — Blends from a background color to a light color by a coverage field, as a finished paint.",[1005,1188,1189,1193],{},[147,1190,1191],{"href":223},[8,1192,226],{}," — Lays a light color over a background color by a coverage field, like a layer with an opacity mask, as a finished paint.",[1005,1195,1196,1202],{},[147,1197,1199],{"href":1198},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fslowdrift",[8,1200,1201],{},"slowDrift"," — The slow breathing and drifting signals that keep a light leak alive.",[1005,1204,1205,1209],{},[147,1206,1207],{"href":429},[8,1208,432],{}," — The soft pool of light at the start of a beam, with a wider faint shoulder around it.",[1005,1211,1212,1216],{},[147,1213,1214],{"href":435},[8,1215,438],{}," — Two bright bands crossing a beam further along it, slowly drifting, like light bouncing inside a film camera.",[1005,1218,1219,1225,1226,257],{},[147,1220,1222],{"href":1221},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fstreakband",[8,1223,1224],{},"streakBand"," — One soft band across a single coordinate, peaking at ",[8,1227,1228],{},"center",[1005,1230,1231,1235],{},[147,1232,1233],{"href":454},[8,1234,457],{}," — The glow of a beam that can be thicker or softer at one end than the other.",[1005,1237,1238,1242,1243,1245,1246,1249],{},[147,1239,1240],{"href":448},[8,1241,451],{}," — Where a pixel falls along a line from ",[8,1244,147],{}," to ",[8,1247,1248],{},"b",", and how far it is from that line.",[1005,1251,1252,1256,1257,1259],{},[147,1253,1254],{"href":467},[8,1255,470],{}," — The shared frame of a camera lens flare, which every ",[8,1258,474],{}," part reads.",[1005,1261,1262,1268],{},[147,1263,1265],{"href":1264},"\u002Fdocs\u002Fprimitives\u002Flight\u002Flensghost",[8,1266,1267],{},"lensGhost"," — One ghost disc of a lens flare, the faint circles that line up across from the light.",[1005,1270,1271,1277],{},[147,1272,1274],{"href":1273},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fflarehalo",[8,1275,1276],{},"flareHalo"," — The rainbow halo ring of a lens flare, drawn across the canvas from the light.",[1005,1279,1280,1286],{},[147,1281,1283],{"href":1282},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fflarestarburst",[8,1284,1285],{},"flareStarburst"," — The star of thin spikes around the light in a lens flare.",[1005,1288,1289,1295],{},[147,1290,1292],{"href":1291},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fflarestreak",[8,1293,1294],{},"flareStreak"," — The horizontal widescreen streak through the light in a lens flare.",[1005,1297,1298,1304],{},[147,1299,1301],{"href":1300},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fflareglare",[8,1302,1303],{},"flareGlare"," — The broad warm-white wash around the light that lifts contrast near it.",[1005,1306,1307,1313],{},[147,1308,1310],{"href":1309},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fflarecore",[8,1311,1312],{},"flareCore"," — The bright point at the light itself: a hard pinpoint inside a small soft glow.",[1005,1315,1316,1320,1321,257],{},[147,1317,1318],{"href":478},[8,1319,481],{}," — Closes a lens flare: turns the summed flare parts into the color to return from ",[8,1322,1323],{},"paint",[1005,1325,1326,1332],{},[147,1327,1329],{"href":1328},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fdithered",[8,1330,1331],{},"dithered"," — Adds a trace of noise to a heat field so long soft ramps do not show bands.",[1005,1334,1335,1341],{},[147,1336,1338],{"href":1337},"\u002Fdocs\u002Fprimitives\u002Flight\u002Fstarglint",[8,1339,1340],{},"starGlint"," — A four-point star of light: a round core with a thin ray along each axis, like a glint off glitter or a star in a photograph.",[1343,1344,1345],"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":264,"searchDepth":552,"depth":552,"links":1347},[1348,1349,1350,1351],{"id":290,"depth":552,"text":291},{"id":532,"depth":552,"text":533},{"id":940,"depth":552,"text":941},{"id":995,"depth":552,"text":996},null,"Words for drawing light: glows, rays, beams, flares and halos, plus the frames they are drawn in.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Flight.md","md","Noise, light & materials",{},"\u002Fdocs\u002Fprimitives\u002Flight",{"title":129,"description":1353},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fpaint\u002Flight.ts","docs\u002Fprimitives\u002F13.light\u002Findex",40,"LVPjEiJHt7HFyTq8oWGWWOja1O2BXABZjKEsLq2qEJQ",{"stars":1365},5505]