[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"github-stars":3,"guide-nav":5,"doc-\u002Fdocs\u002Fprimitives\u002Fvalues":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":693,"categorySlug":693,"categoryTitle":694,"curated":323,"description":695,"editUrl":696,"extension":697,"group":698,"groupTitle":699,"kind":694,"meta":700,"navigation":323,"path":701,"seo":702,"sourceUrl":703,"stem":704,"wordCount":320,"__hash__":705},"primitives\u002Fdocs\u002Fprimitives\u002F2.values\u002Findex.md","Props & values",{"type":133,"value":134,"toc":687},"minimark",[135,139,176,187,216,221,298,302,571,575,646,650,683],[136,137,131],"h1",{"id":138},"props-values",[140,141,142,143,146,147,151,152,155,156,159,160,163,164,167,168,171,172,175],"p",{},"How a definition points at its own props. ",[10,144,145],{},"p('radius')"," is a ",[148,149,150],"strong",{},"prop ref",": hand it to any word\nthat takes a color, a position or a number and the word reads that prop live on the GPU, with\ndrivers and animation applied, and no rebuild when the value changes. A ",[148,153,154],{},"Scalar"," is a number\nbuilt from props and masks. ",[10,157,158],{},"radialMask(…)"," returns one, so does ",[10,161,162],{},"oscillating(…)"," from\n",[10,165,166],{},"motion",", and ",[10,169,170],{},".times(p('intensity'))"," scales one by a prop. Words that take a ",[10,173,174],{},"ScalarInput","\naccept either a prop ref or a Scalar.",[140,177,178,179,182,183,186],{},"Prop refs and Scalars are data, not GPU values. A word turns them into GPU values when the\nshader is built. In a hand-written builder you do that yourself with ",[10,180,181],{},"uniformOf"," and\n",[10,184,185],{},"resolveScalar"," from the invocation words.",[188,189,194],"pre",{"className":190,"code":191,"language":192,"meta":193,"style":193},"language-ts shiki shiki-themes github-dark","import {p, Scalar} from 'shaders\u002Fstd'\n","ts","",[10,195,196],{"__ignoreMap":193},[197,198,201,205,209,212],"span",{"class":199,"line":200},"line",1,[197,202,204],{"class":203},"snl16","import",[197,206,208],{"class":207},"s95oV"," {p, Scalar} ",[197,210,211],{"class":203},"from",[197,213,215],{"class":214},"sU2Wk"," 'shaders\u002Fstd'\n",[217,218,220],"h2",{"id":219},"reach-for-it-when","Reach for it when",[222,223,224,237],"table",{},[225,226,227],"thead",{},[228,229,230,234],"tr",{},[231,232,233],"th",{},"When you need",[231,235,236],{},"Use",[238,239,240,254,270,289],"tbody",{},[228,241,242,246],{},[243,244,245],"td",{},"a word should read one of your props",[243,247,248],{},[249,250,252],"a",{"href":251},"\u002Fdocs\u002Fprimitives\u002Fvalues\u002Fp",[10,253,140],{},[228,255,256,259],{},[243,257,258],{},"a strength that fades with distance from a point, scaled by a prop",[243,260,261,264,265],{},[10,262,263],{},"radialMask"," chained with .times(p('intensity')) on the ",[249,266,268],{"href":267},"\u002Fdocs\u002Fprimitives\u002Fvalues\u002Fscalar",[10,269,154],{},[228,271,272,275],{},[243,273,274],{},"a value that breathes or pulses on its own",[243,276,277,280,281,284,285],{},[10,278,279],{},"oscillating"," or ",[10,282,283],{},"pulsing"," from motion, as a ",[249,286,287],{"href":267},[10,288,154],{},[228,290,291,294],{},[243,292,293],{},"a prop's value inside a hand-written builder",[243,295,296],{},[10,297,181],{},[217,299,301],{"id":300},"example","Example",[188,303,305],{"className":190,"code":304,"language":192,"meta":193,"style":193},"import {defineShader, p, tintToward, radialMask, crosses, isZero, transformColor, transformPosition} from 'shaders\u002Fstd'\n\n\u002F\u002F A vignette: tint the layer inside toward a color, strongest past a radius from a point.\nexport const Vignette = defineShader({\n  name: 'Vignette',\n  props: {\n    color: {default: '#000000', transform: transformColor},\n    center: {default: {x: 0.5, y: 0.5}, transform: transformPosition},\n    radius: {default: 0.4},\n    falloff: {default: 0.6},\n    intensity: {default: 1, recompile: crosses(0)},\n  },\n  effect: tintToward(p('color'), {\n    amount: radialMask({center: p('center'), radius: p('radius'), falloff: p('falloff')}).times(p('intensity')),\n  }),\n  identityWhen: isZero('intensity'),\n  missingChildMessage: 'Nest a layer inside Vignette to darken its edges.',\n})\n",[10,306,307,318,325,332,355,367,373,385,402,414,425,449,455,476,532,538,554,565],{"__ignoreMap":193},[197,308,309,311,314,316],{"class":199,"line":200},[197,310,204],{"class":203},[197,312,313],{"class":207}," {defineShader, p, tintToward, radialMask, crosses, isZero, transformColor, transformPosition} ",[197,315,211],{"class":203},[197,317,215],{"class":214},[197,319,321],{"class":199,"line":320},2,[197,322,324],{"emptyLinePlaceholder":323},true,"\n",[197,326,328],{"class":199,"line":327},3,[197,329,331],{"class":330},"sAwPA","\u002F\u002F A vignette: tint the layer inside toward a color, strongest past a radius from a point.\n",[197,333,335,338,341,345,348,352],{"class":199,"line":334},4,[197,336,337],{"class":203},"export",[197,339,340],{"class":203}," const",[197,342,344],{"class":343},"sDLfK"," Vignette",[197,346,347],{"class":203}," =",[197,349,351],{"class":350},"svObZ"," defineShader",[197,353,354],{"class":207},"({\n",[197,356,358,361,364],{"class":199,"line":357},5,[197,359,360],{"class":207},"  name: ",[197,362,363],{"class":214},"'Vignette'",[197,365,366],{"class":207},",\n",[197,368,370],{"class":199,"line":369},6,[197,371,372],{"class":207},"  props: {\n",[197,374,376,379,382],{"class":199,"line":375},7,[197,377,378],{"class":207},"    color: {default: ",[197,380,381],{"class":214},"'#000000'",[197,383,384],{"class":207},", transform: transformColor},\n",[197,386,388,391,394,397,399],{"class":199,"line":387},8,[197,389,390],{"class":207},"    center: {default: {x: ",[197,392,393],{"class":343},"0.5",[197,395,396],{"class":207},", y: ",[197,398,393],{"class":343},[197,400,401],{"class":207},"}, transform: transformPosition},\n",[197,403,405,408,411],{"class":199,"line":404},9,[197,406,407],{"class":207},"    radius: {default: ",[197,409,410],{"class":343},"0.4",[197,412,413],{"class":207},"},\n",[197,415,417,420,423],{"class":199,"line":416},10,[197,418,419],{"class":207},"    falloff: {default: ",[197,421,422],{"class":343},"0.6",[197,424,413],{"class":207},[197,426,428,431,434,437,440,443,446],{"class":199,"line":427},11,[197,429,430],{"class":207},"    intensity: {default: ",[197,432,433],{"class":343},"1",[197,435,436],{"class":207},", recompile: ",[197,438,439],{"class":350},"crosses",[197,441,442],{"class":207},"(",[197,444,445],{"class":343},"0",[197,447,448],{"class":207},")},\n",[197,450,452],{"class":199,"line":451},12,[197,453,454],{"class":207},"  },\n",[197,456,458,461,464,466,468,470,473],{"class":199,"line":457},13,[197,459,460],{"class":207},"  effect: ",[197,462,463],{"class":350},"tintToward",[197,465,442],{"class":207},[197,467,140],{"class":350},[197,469,442],{"class":207},[197,471,472],{"class":214},"'color'",[197,474,475],{"class":207},"), {\n",[197,477,479,482,484,487,489,491,494,497,499,501,504,507,509,511,514,517,520,522,524,526,529],{"class":199,"line":478},14,[197,480,481],{"class":207},"    amount: ",[197,483,263],{"class":350},[197,485,486],{"class":207},"({center: ",[197,488,140],{"class":350},[197,490,442],{"class":207},[197,492,493],{"class":214},"'center'",[197,495,496],{"class":207},"), radius: ",[197,498,140],{"class":350},[197,500,442],{"class":207},[197,502,503],{"class":214},"'radius'",[197,505,506],{"class":207},"), falloff: ",[197,508,140],{"class":350},[197,510,442],{"class":207},[197,512,513],{"class":214},"'falloff'",[197,515,516],{"class":207},")}).",[197,518,519],{"class":350},"times",[197,521,442],{"class":207},[197,523,140],{"class":350},[197,525,442],{"class":207},[197,527,528],{"class":214},"'intensity'",[197,530,531],{"class":207},")),\n",[197,533,535],{"class":199,"line":534},15,[197,536,537],{"class":207},"  }),\n",[197,539,541,544,547,549,551],{"class":199,"line":540},16,[197,542,543],{"class":207},"  identityWhen: ",[197,545,546],{"class":350},"isZero",[197,548,442],{"class":207},[197,550,528],{"class":214},[197,552,553],{"class":207},"),\n",[197,555,557,560,563],{"class":199,"line":556},17,[197,558,559],{"class":207},"  missingChildMessage: ",[197,561,562],{"class":214},"'Nest a layer inside Vignette to darken its edges.'",[197,564,366],{"class":207},[197,566,568],{"class":199,"line":567},18,[197,569,570],{"class":207},"})\n",[217,572,574],{"id":573},"types","Types",[222,576,577,587],{},[225,578,579],{},[228,580,581,584],{},[231,582,583],{},"Type",[231,585,586],{},"What it is",[238,588,589,599,615,628],{},[228,590,591,596],{},[243,592,593],{},[10,594,595],{},"PropRef",[243,597,598],{},"A reference to one of the definition's props by name.",[228,600,601,605],{},[243,602,603],{},[10,604,174],{},[243,606,607,608,611,612,614],{},"What a number-valued input accepts: a prop ref ",[10,609,610],{},"p('x')"," or a ",[10,613,154],{},".",[228,616,617,622],{},[243,618,619],{},[10,620,621],{},"ScalarSource",[243,623,624,625,627],{},"The shapes a ",[10,626,154],{}," can hold: a prop, a product of two values, a radial mask, or a live signal.",[228,629,630,635],{},[243,631,632],{},[10,633,634],{},"SignalSlotParams",[243,636,637,638,641,642,645],{},"What a signal is given when it builds: the props, and the context values where the host has them (a warp's ",[10,639,640],{},"map:"," has no ",[10,643,644],{},"ctx",").",[217,647,649],{"id":648},"words","Words",[651,652,654],"primitive-words",{":words":653},"[{\"name\":\"p\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fvalues\u002Fp\",\"summary\":\"Reference one of the definition's props by name, wherever a word asks for a value.\"},{\"name\":\"Scalar\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fvalues\u002Fscalar\",\"summary\":\"A number built from props: what `radialMask(…)`, `motion.oscillating(…)` and `.times()` return.\"}]",[655,656,657,665],"ul",{},[658,659,660,664],"li",{},[249,661,662],{"href":251},[10,663,140],{}," — Reference one of the definition's props by name, wherever a word asks for a value.",[658,666,667,671,672,674,675,678,679,682],{},[249,668,669],{"href":267},[10,670,154],{}," — A number built from props: what ",[10,673,158],{},", ",[10,676,677],{},"motion.oscillating(…)"," and ",[10,680,681],{},".times()"," return.",[684,685,686],"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 .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}",{"title":193,"searchDepth":320,"depth":320,"links":688},[689,690,691,692],{"id":219,"depth":320,"text":220},{"id":300,"depth":320,"text":301},{"id":573,"depth":320,"text":574},{"id":648,"depth":320,"text":649},"values",null,"How a definition points at its own props. p('radius') is a prop ref: hand it to any word that takes a color, a position or a number and the word reads that prop live on the GPU, with drivers and animation applied, and no rebuild when the value changes.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fvalues.md","md","define","Defining a shader",{},"\u002Fdocs\u002Fprimitives\u002Fvalues",{"title":131,"description":695},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fvalues.ts","docs\u002Fprimitives\u002F2.values\u002Findex","wQmqUuQ-mBq5kA_f5n6BaaoK02qTsIPWCBh46q7asmc"]