[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"github-stars":3,"guide-nav":5,"doc-\u002Fdocs\u002Fprimitives\u002Fnoise\u002Ffoldset":155},{"stars":4},3555,[6,12,18,22,26,30,34,38,42,46,50,54,58,62,66,71,75,79,83,88,92,96,100,104,108,112,116,120,124,127,130,134,137,141,144,148,151],{"path":7,"title":8,"description":9,"category":10,"exclude":11,"forceFramework":11},"\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":13,"title":14,"description":15,"category":10,"exclude":16,"forceFramework":11},"\u002Fdocs\u002Fguide\u002Fquickstart","Quickstart","Install Shaders, render your first effect, and drive a prop from state.",[17],"js",{"path":19,"title":20,"description":21,"category":10,"exclude":11,"forceFramework":11},"\u002Fdocs\u002Fguide\u002Fcomposing-effects","Composing effects","Stack components as layers and nest them to control which layers an effect touches.",{"path":23,"title":24,"description":25,"category":10,"exclude":11,"forceFramework":11},"\u002Fdocs\u002Fguide\u002Fblending-masking","Blending and masking","Control how a layer mixes with the layers below it, and reveal one layer through another.",{"path":27,"title":28,"description":29,"category":10,"exclude":11,"forceFramework":11},"\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":31,"title":32,"description":33,"category":10,"exclude":11,"forceFramework":11},"\u002Fdocs\u002Fguide\u002Fdynamic-props","Dynamic props","Drive any numeric or position prop from time, the cursor, or another layer, without writing animation code.",{"path":35,"title":36,"description":37,"category":10,"exclude":11,"forceFramework":11},"\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":39,"title":40,"description":41,"category":10,"exclude":11,"forceFramework":11},"\u002Fdocs\u002Fguide\u002Ftransforms","Transforms","Position, size, and rotate any layer inside the canvas with a bounding box, in % or px units.",{"path":43,"title":44,"description":45,"category":10,"exclude":11,"forceFramework":11},"\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":47,"title":48,"description":49,"category":10,"exclude":11,"forceFramework":11},"\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":51,"title":52,"description":53,"category":10,"exclude":11,"forceFramework":11},"\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":55,"title":56,"description":57,"category":10,"exclude":11,"forceFramework":11},"\u002Fdocs\u002Fguide\u002Fperformance","Performance","Learn what makes an effect expensive on the GPU and how to keep it inside the frame budget.",{"path":59,"title":60,"description":61,"category":10,"exclude":11,"forceFramework":11},"\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":63,"title":64,"description":65,"category":10,"exclude":11,"forceFramework":11},"\u002Fdocs\u002Fguide\u002Ftelemetry","Telemetry","The `\u003CShader>` component occasionally sends an anonymous performance report to help us improve the engine over time.",{"path":67,"title":68,"description":69,"category":70,"exclude":11,"forceFramework":11},"\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":72,"title":73,"description":74,"category":70,"exclude":11,"forceFramework":11},"\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":76,"title":77,"description":78,"category":70,"exclude":11,"forceFramework":11},"\u002Fdocs\u002Fguide\u002Fagent-skill","Agent skill","Give your coding agent a skill that teaches it to build with Shaders components, the CLI and presets.",{"path":80,"title":81,"description":82,"category":10,"exclude":11,"forceFramework":11},"\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":84,"title":85,"description":86,"category":87,"exclude":11,"forceFramework":11},"\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":89,"title":90,"description":91,"category":87,"exclude":11,"forceFramework":11},"\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":93,"title":94,"description":95,"category":87,"exclude":11,"forceFramework":11},"\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":97,"title":98,"description":99,"category":87,"exclude":11,"forceFramework":11},"\u002Fdocs\u002Fguide\u002Fmasking-and-blending","Masking and blending","How blend modes and masks combine components in the design editor.",{"path":101,"title":102,"description":103,"category":87,"exclude":11,"forceFramework":11},"\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":105,"title":106,"description":107,"category":87,"exclude":11,"forceFramework":11},"\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":109,"title":110,"description":111,"category":87,"exclude":11,"forceFramework":11},"\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":113,"title":114,"description":115,"category":87,"exclude":11,"forceFramework":11},"\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":117,"title":118,"description":119,"category":87,"exclude":11,"forceFramework":11},"\u002Fdocs\u002Fguide\u002Fglass-component-spotlight","Component spotlight: Glass","A short look at the Glass component and the liquid-glass look it creates.",{"path":121,"title":122,"description":123,"category":87,"exclude":11,"forceFramework":11},"\u002Fdocs\u002Fguide\u002Fdigital-looks-component-spotlight","Component spotlight: Digital looks","A look at the digital stylization components for glitchy, futuristic, or technical effects.",{"path":125,"title":14,"description":126,"category":10,"exclude":11,"forceFramework":11},"\u002Fdocs\u002Fguide\u002Fjs\u002Fquickstart","Install Shaders without a framework, render your first effect on a canvas, and update props at runtime.",{"path":128,"title":14,"description":129,"category":10,"exclude":11,"forceFramework":11},"\u002Fdocs\u002Fguide\u002Freact\u002Fquickstart","Install Shaders in a React app, render your first effect, and drive a prop from state.",{"path":131,"title":132,"description":133,"category":10,"exclude":11,"forceFramework":11},"\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":135,"title":14,"description":136,"category":10,"exclude":11,"forceFramework":11},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fquickstart","Install Shaders in a Solid app, render your first effect, and drive a prop from a signal.",{"path":138,"title":139,"description":140,"category":10,"exclude":11,"forceFramework":11},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fssr","SolidStart and SSR","Render Shaders in SolidStart and other Solid SSR apps by keeping each shader on the client.",{"path":142,"title":14,"description":143,"category":10,"exclude":11,"forceFramework":11},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fquickstart","Install Shaders in a Svelte app, render your first effect, and drive a prop from state.",{"path":145,"title":146,"description":147,"category":10,"exclude":11,"forceFramework":11},"\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":149,"title":14,"description":150,"category":10,"exclude":11,"forceFramework":11},"\u002Fdocs\u002Fguide\u002Fvue\u002Fquickstart","Install Shaders in a Vue app, render your first effect, and drive a prop from a ref.",{"path":152,"title":153,"description":154,"category":10,"exclude":11,"forceFramework":11},"\u002Fdocs\u002Fguide\u002Fvue\u002Fssr","Nuxt and SSR","Render Shaders in Nuxt and other Vue SSR apps by keeping each shader on the client.",{"id":156,"title":157,"body":158,"categoryId":269,"categorySlug":269,"categoryTitle":442,"curated":443,"description":444,"editUrl":11,"extension":445,"group":446,"groupTitle":447,"kind":448,"meta":449,"navigation":450,"path":451,"seo":452,"sourceUrl":453,"stem":454,"wordCount":11,"__hash__":455},"primitives\u002Fdocs\u002Fprimitives\u002F12.noise\u002F35.foldset.md","foldSet",{"type":159,"value":160,"toc":436},"minimark",[161,165,177,264,279,311,316,351,359,362,366,395,405,409,422,426,432],[162,163,157],"h1",{"id":164},"foldset",[166,167,168,169,172,173,176],"p",{},"Lays out the ridges of a draped cloth: ",[10,170,171],{},"count"," folds spread evenly across ",[10,174,175],{},"spread",", each nudged sideways, widened and raised by a seeded amount so no two are alike.",[178,179,184],"pre",{"className":180,"code":181,"language":182,"meta":183,"style":183},"language-ts shiki shiki-themes github-dark","foldSet(opts: {\n    count: number\n    seed: Expr | number\n    spread: Expr | number\n    width: Expr | number\n    height: Expr | number\n    jitter?: number\n}): Fold[]\n","ts","",[10,185,186,198,204,217,227,237,247,258],{"__ignoreMap":183},[187,188,191,194],"span",{"class":189,"line":190},"line",1,[187,192,157],{"class":193},"svObZ",[187,195,197],{"class":196},"s95oV","(opts: {\n",[187,199,201],{"class":189,"line":200},2,[187,202,203],{"class":196},"    count: number\n",[187,205,207,210,214],{"class":189,"line":206},3,[187,208,209],{"class":196},"    seed: Expr ",[187,211,213],{"class":212},"snl16","|",[187,215,216],{"class":196}," number\n",[187,218,220,223,225],{"class":189,"line":219},4,[187,221,222],{"class":196},"    spread: Expr ",[187,224,213],{"class":212},[187,226,216],{"class":196},[187,228,230,233,235],{"class":189,"line":229},5,[187,231,232],{"class":196},"    width: Expr ",[187,234,213],{"class":212},[187,236,216],{"class":196},[187,238,240,243,245],{"class":189,"line":239},6,[187,241,242],{"class":196},"    height: Expr ",[187,244,213],{"class":212},[187,246,216],{"class":196},[187,248,250,253,256],{"class":189,"line":249},7,[187,251,252],{"class":196},"    jitter",[187,254,255],{"class":212},"?:",[187,257,216],{"class":196},[187,259,261],{"class":189,"line":260},8,[187,262,263],{"class":196},"}): Fold[]\n",[166,265,266,267,270,271,274,275,278],{},"Import ",[10,268,269],{},"noise"," from ",[10,272,273],{},"shaders\u002Fstd"," and use ",[10,276,277],{},"noise.foldSet",".",[166,280,281,283,284,287,288,291,292,295,296,299,300,303,304,307,308,310],{},[10,282,175],{}," is the distance the folds cover across the drape, in the units you will pass as ",[10,285,286],{},"across"," to ",[10,289,290],{},"drapedFolds"," (the canvas aspect for a full-width curtain). ",[10,293,294],{},"width"," and ",[10,297,298],{},"height"," are the typical ridge size. ",[10,301,302],{},"jitter"," (0–1, default 0.6) is how far a fold may wander from its even slot. The same ",[10,305,306],{},"seed"," always gives the same layout. ",[10,309,171],{}," is a plain number, so drive it from a compile-time prop.",[312,313,315],"h2",{"id":314},"parameters","Parameters",[317,318,319,335],"table",{},[320,321,322],"thead",{},[323,324,325,329,332],"tr",{},[326,327,328],"th",{},"Name",[326,330,331],{},"Type",[326,333,334],{},"Notes",[336,337,338],"tbody",{},[323,339,340,346,349],{},[341,342,343],"td",{},[10,344,345],{},"opts",[341,347,348],{},"`{",[341,350],{},[178,352,357],{"className":353,"code":355,"language":356},[354],"language-text","count: number\nseed: Expr \\| number\nspread: Expr \\| number\nwidth: Expr \\| number\nheight: Expr \\| number\njitter?: number\n","text",[10,358,355],{"__ignoreMap":183},[166,360,361],{},"}` |  |",[312,363,365],{"id":364},"example","Example",[178,367,369],{"className":180,"code":368,"language":182,"meta":183,"style":183},"const folds = foldSet({count: 7, seed: u.seed, spread: aspect, width: u.foldWidth, height: u.foldDepth})\n",[10,370,371],{"__ignoreMap":183},[187,372,373,376,380,383,386,389,392],{"class":189,"line":190},[187,374,375],{"class":212},"const",[187,377,379],{"class":378},"sDLfK"," folds",[187,381,382],{"class":212}," =",[187,384,385],{"class":193}," foldSet",[187,387,388],{"class":196},"({count: ",[187,390,391],{"class":378},"7",[187,393,394],{"class":196},", seed: u.seed, spread: aspect, width: u.foldWidth, height: u.foldDepth})\n",[396,397,398],"blockquote",{},[166,399,400,404],{},[401,402,403],"strong",{},"Tip."," Call it once, outside any height function: the layout is the same at every tap.",[312,406,408],{"id":407},"see-also","See also",[410,411,412],"ul",{},[413,414,415,421],"li",{},[416,417,419],"a",{"href":418},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fdrapedfolds",[10,420,290],{}," — The height of a draped cloth at a point: rounded ridges running along one direction, each rippling and swaying along its length, gathered where the cloth is pinned.",[312,423,425],{"id":424},"used-by","Used by",[166,427,428],{},[416,429,431],{"href":430},"\u002Fdocs\u002Fcomponents\u002Fsatin","Satin",[433,434,435],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}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}",{"title":183,"searchDepth":200,"depth":200,"links":437},[438,439,440,441],{"id":314,"depth":200,"text":315},{"id":364,"depth":200,"text":365},{"id":407,"depth":200,"text":408},{"id":424,"depth":200,"text":425},"Noise",false,"Lays out the ridges of a draped cloth: `count` folds spread evenly across `spread`, each nudged sideways, widened and raised by a seeded amount so no two are alike.","md","light","Noise, light & materials","function",{},true,"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Ffoldset",{"title":157,"description":444},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fpaint\u002Fnoise.ts#L223","docs\u002Fprimitives\u002F12.noise\u002F35.foldset","1uFDK3Hj4A79sjA-orc4nxHhIfLYTv7d9RvImOH1Wsw"]