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