[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"github-stars":3,"guide-nav":5,"doc-\u002Fdocs\u002Fprimitives\u002Fsignal":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":736,"categorySlug":736,"categoryTitle":737,"curated":297,"description":738,"editUrl":739,"extension":740,"group":741,"groupTitle":742,"kind":737,"meta":743,"navigation":297,"path":744,"seo":745,"sourceUrl":746,"stem":747,"wordCount":301,"__hash__":748},"primitives\u002Fdocs\u002Fprimitives\u002F24.signal\u002Findex.md","Signals",{"type":133,"value":134,"toc":730},"minimark",[135,139,162,171,200,205,272,276,651,655,689,693,726],[136,137,131],"h1",{"id":138},"signals",[140,141,142,143,150,151,157,158,161],"p",{},"Live inputs a simulation reads every frame: where the pointer is and how fast it is moving.\nYou never read the numbers yourself. You hand a signal to a simulation step, such as the\nsplat step of a grid simulation, and the engine tracks the pointer, measures its speed in\nuv per second, and feeds both in. ",[144,145,147],"a",{"href":146},"\u002Fdocs\u002Fprimitives\u002Fsignal\u002Fpointer",[10,148,149],{},"pointer"," carries one choice, the teleport guard, which\nstops a cursor that jumps into the canvas from slamming the field. ",[144,152,154],{"href":153},"\u002Fdocs\u002Fprimitives\u002Fsignal\u002Fpointerspeed",[10,155,156],{},"pointerSpeed"," caps the\nspeed so a fast flick cannot overdrive it. Both are also exported at the top level of\n",[10,159,160],{},"shaders\u002Fstd",".",[140,163,164,170],{},[144,165,167],{"href":166},"\u002Fdocs\u002Fprimitives\u002Fsignal\u002Fcpuhash01",[10,168,169],{},"cpuHash01"," is the odd one out: a stable random number from a seed, worked out once in\nJavaScript, for constants a paint needs per item rather than per pixel.",[172,173,178],"pre",{"className":174,"code":175,"language":176,"meta":177,"style":177},"language-ts shiki shiki-themes github-dark","import {signal} from 'shaders\u002Fstd'\n","ts","",[10,179,180],{"__ignoreMap":177},[181,182,185,189,193,196],"span",{"class":183,"line":184},"line",1,[181,186,188],{"class":187},"snl16","import",[181,190,192],{"class":191},"s95oV"," {signal} ",[181,194,195],{"class":187},"from",[181,197,199],{"class":198},"sU2Wk"," 'shaders\u002Fstd'\n",[201,202,204],"h2",{"id":203},"reach-for-it-when","Reach for it when",[206,207,208,221],"table",{},[209,210,211],"thead",{},[212,213,214,218],"tr",{},[215,216,217],"th",{},"When you need",[215,219,220],{},"Use",[222,223,224,237,249,261],"tbody",{},[212,225,226,230],{},[227,228,229],"td",{},"a simulation should be stirred where the cursor is",[227,231,232,236],{},[144,233,234],{"href":146},[10,235,149],{}," as the splat step's position",[212,238,239,242],{},[227,240,241],{},"stirring harder the faster the cursor moves",[227,243,244,248],{},[144,245,246],{"href":153},[10,247,156],{}," as the splat step's amount",[212,250,251,254],{},[227,252,253],{},"a cursor entering the canvas must not cause a splash",[227,255,256,260],{},[144,257,258],{"href":146},[10,259,149],{}," with the teleport guard on (the default)",[212,262,263,266],{},[227,264,265],{},"a stable random size, speed or offset per item, computed once",[227,267,268],{},[144,269,270],{"href":166},[10,271,169],{},[201,273,275],{"id":274},"example","Example",[172,277,279],{"className":174,"code":278,"language":176,"meta":177,"style":177},"import {defineShader, p, simulate, op, signal, displaceBy, transformEdges} from 'shaders\u002Fstd'\n\n\u002F\u002F A height field stirred at the pointer, harder the faster it moves, that settles when left alone.\nconst waves = simulate.grid({\n  resolution: 128,\n  history: 2,\n  step: [\n    op.wave({damping: p('decay')}),\n    op.splat({at: signal.pointer({teleportGuard: 'on'}), amount: signal.pointerSpeed({max: 2}), radius: p('radius')}),\n  ],\n  derive: {displacement: op.gradient()},\n  rest: {settlesWhen: 'derived-from-damping'},\n})\n\n\u002F\u002F Ripples: the field's slope pushes the layer inside around, with a little color fringing.\nexport const Ripples = defineShader({\n  name: 'Ripples',\n  props: {\n    intensity: {default: 10},\n    decay: {default: 10},\n    radius: {default: 0.5},\n    chromaticSplit: {default: 1},\n    edges: {default: 'stretch', transform: transformEdges, compileTime: true},\n  },\n  effect: displaceBy(waves.output('displacement'), {\n    strength: p('intensity'),\n    chromatic: p('chromaticSplit'),\n    edges: p('edges'),\n  }),\n})\n",[10,280,281,292,299,306,329,341,352,358,381,422,428,440,452,458,463,469,488,499,505,516,526,537,548,565,571,594,610,625,640,646],{"__ignoreMap":177},[181,282,283,285,288,290],{"class":183,"line":184},[181,284,188],{"class":187},[181,286,287],{"class":191}," {defineShader, p, simulate, op, signal, displaceBy, transformEdges} ",[181,289,195],{"class":187},[181,291,199],{"class":198},[181,293,295],{"class":183,"line":294},2,[181,296,298],{"emptyLinePlaceholder":297},true,"\n",[181,300,302],{"class":183,"line":301},3,[181,303,305],{"class":304},"sAwPA","\u002F\u002F A height field stirred at the pointer, harder the faster it moves, that settles when left alone.\n",[181,307,309,312,316,319,322,326],{"class":183,"line":308},4,[181,310,311],{"class":187},"const",[181,313,315],{"class":314},"sDLfK"," waves",[181,317,318],{"class":187}," =",[181,320,321],{"class":191}," simulate.",[181,323,325],{"class":324},"svObZ","grid",[181,327,328],{"class":191},"({\n",[181,330,332,335,338],{"class":183,"line":331},5,[181,333,334],{"class":191},"  resolution: ",[181,336,337],{"class":314},"128",[181,339,340],{"class":191},",\n",[181,342,344,347,350],{"class":183,"line":343},6,[181,345,346],{"class":191},"  history: ",[181,348,349],{"class":314},"2",[181,351,340],{"class":191},[181,353,355],{"class":183,"line":354},7,[181,356,357],{"class":191},"  step: [\n",[181,359,361,364,367,370,372,375,378],{"class":183,"line":360},8,[181,362,363],{"class":191},"    op.",[181,365,366],{"class":324},"wave",[181,368,369],{"class":191},"({damping: ",[181,371,140],{"class":324},[181,373,374],{"class":191},"(",[181,376,377],{"class":198},"'decay'",[181,379,380],{"class":191},")}),\n",[181,382,384,386,389,392,394,397,400,403,405,408,410,413,415,417,420],{"class":183,"line":383},9,[181,385,363],{"class":191},[181,387,388],{"class":324},"splat",[181,390,391],{"class":191},"({at: signal.",[181,393,149],{"class":324},[181,395,396],{"class":191},"({teleportGuard: ",[181,398,399],{"class":198},"'on'",[181,401,402],{"class":191},"}), amount: signal.",[181,404,156],{"class":324},[181,406,407],{"class":191},"({max: ",[181,409,349],{"class":314},[181,411,412],{"class":191},"}), radius: ",[181,414,140],{"class":324},[181,416,374],{"class":191},[181,418,419],{"class":198},"'radius'",[181,421,380],{"class":191},[181,423,425],{"class":183,"line":424},10,[181,426,427],{"class":191},"  ],\n",[181,429,431,434,437],{"class":183,"line":430},11,[181,432,433],{"class":191},"  derive: {displacement: op.",[181,435,436],{"class":324},"gradient",[181,438,439],{"class":191},"()},\n",[181,441,443,446,449],{"class":183,"line":442},12,[181,444,445],{"class":191},"  rest: {settlesWhen: ",[181,447,448],{"class":198},"'derived-from-damping'",[181,450,451],{"class":191},"},\n",[181,453,455],{"class":183,"line":454},13,[181,456,457],{"class":191},"})\n",[181,459,461],{"class":183,"line":460},14,[181,462,298],{"emptyLinePlaceholder":297},[181,464,466],{"class":183,"line":465},15,[181,467,468],{"class":304},"\u002F\u002F Ripples: the field's slope pushes the layer inside around, with a little color fringing.\n",[181,470,472,475,478,481,483,486],{"class":183,"line":471},16,[181,473,474],{"class":187},"export",[181,476,477],{"class":187}," const",[181,479,480],{"class":314}," Ripples",[181,482,318],{"class":187},[181,484,485],{"class":324}," defineShader",[181,487,328],{"class":191},[181,489,491,494,497],{"class":183,"line":490},17,[181,492,493],{"class":191},"  name: ",[181,495,496],{"class":198},"'Ripples'",[181,498,340],{"class":191},[181,500,502],{"class":183,"line":501},18,[181,503,504],{"class":191},"  props: {\n",[181,506,508,511,514],{"class":183,"line":507},19,[181,509,510],{"class":191},"    intensity: {default: ",[181,512,513],{"class":314},"10",[181,515,451],{"class":191},[181,517,519,522,524],{"class":183,"line":518},20,[181,520,521],{"class":191},"    decay: {default: ",[181,523,513],{"class":314},[181,525,451],{"class":191},[181,527,529,532,535],{"class":183,"line":528},21,[181,530,531],{"class":191},"    radius: {default: ",[181,533,534],{"class":314},"0.5",[181,536,451],{"class":191},[181,538,540,543,546],{"class":183,"line":539},22,[181,541,542],{"class":191},"    chromaticSplit: {default: ",[181,544,545],{"class":314},"1",[181,547,451],{"class":191},[181,549,551,554,557,560,563],{"class":183,"line":550},23,[181,552,553],{"class":191},"    edges: {default: ",[181,555,556],{"class":198},"'stretch'",[181,558,559],{"class":191},", transform: transformEdges, compileTime: ",[181,561,562],{"class":314},"true",[181,564,451],{"class":191},[181,566,568],{"class":183,"line":567},24,[181,569,570],{"class":191},"  },\n",[181,572,574,577,580,583,586,588,591],{"class":183,"line":573},25,[181,575,576],{"class":191},"  effect: ",[181,578,579],{"class":324},"displaceBy",[181,581,582],{"class":191},"(waves.",[181,584,585],{"class":324},"output",[181,587,374],{"class":191},[181,589,590],{"class":198},"'displacement'",[181,592,593],{"class":191},"), {\n",[181,595,597,600,602,604,607],{"class":183,"line":596},26,[181,598,599],{"class":191},"    strength: ",[181,601,140],{"class":324},[181,603,374],{"class":191},[181,605,606],{"class":198},"'intensity'",[181,608,609],{"class":191},"),\n",[181,611,613,616,618,620,623],{"class":183,"line":612},27,[181,614,615],{"class":191},"    chromatic: ",[181,617,140],{"class":324},[181,619,374],{"class":191},[181,621,622],{"class":198},"'chromaticSplit'",[181,624,609],{"class":191},[181,626,628,631,633,635,638],{"class":183,"line":627},28,[181,629,630],{"class":191},"    edges: ",[181,632,140],{"class":324},[181,634,374],{"class":191},[181,636,637],{"class":198},"'edges'",[181,639,609],{"class":191},[181,641,643],{"class":183,"line":642},29,[181,644,645],{"class":191},"  }),\n",[181,647,649],{"class":183,"line":648},30,[181,650,457],{"class":191},[201,652,654],{"id":653},"types","Types",[206,656,657,667],{},[209,658,659],{},[212,660,661,664],{},[215,662,663],{},"Type",[215,665,666],{},"What it is",[222,668,669,679],{},[212,670,671,676],{},[227,672,673],{},[10,674,675],{},"PointerSignal",[227,677,678],{},"Where the pointer is this frame, for a simulation step.",[212,680,681,686],{},[227,682,683],{},[10,684,685],{},"PointerSpeedSignal",[227,687,688],{},"How fast the pointer is moving, for a simulation step.",[201,690,692],{"id":691},"words","Words",[694,695,697],"primitive-words",{":words":696},"[{\"name\":\"pointer\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsignal\u002Fpointer\",\"summary\":\"The pointer's position, for a simulation step that reacts to the cursor.\"},{\"name\":\"pointerSpeed\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsignal\u002Fpointerspeed\",\"summary\":\"The pointer's speed, capped at `max`, as the strength of a simulation step.\"},{\"name\":\"cpuHash01\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsignal\u002Fcpuhash01\",\"summary\":\"A random but stable number, 0..1, from a seed, computed in JavaScript.\"}]",[698,699,700,708,719],"ul",{},[701,702,703,707],"li",{},[144,704,705],{"href":146},[10,706,149],{}," — The pointer's position, for a simulation step that reacts to the cursor.",[701,709,710,714,715,718],{},[144,711,712],{"href":153},[10,713,156],{}," — The pointer's speed, capped at ",[10,716,717],{},"max",", as the strength of a simulation step.",[701,720,721,725],{},[144,722,723],{"href":166},[10,724,169],{}," — A random but stable number, 0..1, from a seed, computed in JavaScript.",[727,728,729],"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":177,"searchDepth":294,"depth":294,"links":731},[732,733,734,735],{"id":203,"depth":294,"text":204},{"id":274,"depth":294,"text":275},{"id":653,"depth":294,"text":654},{"id":691,"depth":294,"text":692},"signal",null,"Live inputs a simulation reads every frame: where the pointer is and how fast it is moving.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fsignal.md","md","space","Shapes, frames & warps",{},"\u002Fdocs\u002Fprimitives\u002Fsignal",{"title":131,"description":738},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fsignal.ts","docs\u002Fprimitives\u002F24.signal\u002Findex","q-NKAlK0Cn-z5_yvqN8YKWMh4ttRudJP0LHnSA103QA"]