[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fribbons":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":256,"categorySlug":256,"categoryTitle":632,"curated":633,"description":157,"editUrl":9,"extension":634,"group":635,"groupTitle":636,"kind":637,"meta":638,"navigation":639,"path":640,"seo":641,"sourceUrl":642,"stem":643,"wordCount":9,"__hash__":644},"primitives\u002Fdocs\u002Fprimitives\u002F12.noise\u002F27.ribbons.md","ribbons",{"type":149,"value":150,"toc":626},"minimark",[151,154,158,251,266,326,331,366,374,377,381,550,571,575,612,616,622],[152,153,147],"h1",{"id":147},[155,156,157],"p",{},"Flowing gradient-colored ribbons between two points: the Strands look.",[159,160,165],"pre",{"className":161,"code":162,"language":163,"meta":164,"style":164},"language-ts shiki shiki-themes github-dark","ribbons(slots: {\n    from: PropRef\n    to: PropRef\n    count: PropRef\n    width: PropRef\n    amplitude: PropRef\n    frequency: PropRef\n    softness: PropRef\n    spread: PropRef\n    pinEdges: PropRef\n    colorScale: PropRef\n    colorVariance: PropRef\n}): Paint\n","ts","",[8,166,167,179,185,191,197,203,209,215,221,227,233,239,245],{"__ignoreMap":164},[168,169,172,175],"span",{"class":170,"line":171},"line",1,[168,173,147],{"class":174},"svObZ",[168,176,178],{"class":177},"s95oV","(slots: {\n",[168,180,182],{"class":170,"line":181},2,[168,183,184],{"class":177},"    from: PropRef\n",[168,186,188],{"class":170,"line":187},3,[168,189,190],{"class":177},"    to: PropRef\n",[168,192,194],{"class":170,"line":193},4,[168,195,196],{"class":177},"    count: PropRef\n",[168,198,200],{"class":170,"line":199},5,[168,201,202],{"class":177},"    width: PropRef\n",[168,204,206],{"class":170,"line":205},6,[168,207,208],{"class":177},"    amplitude: PropRef\n",[168,210,212],{"class":170,"line":211},7,[168,213,214],{"class":177},"    frequency: PropRef\n",[168,216,218],{"class":170,"line":217},8,[168,219,220],{"class":177},"    softness: PropRef\n",[168,222,224],{"class":170,"line":223},9,[168,225,226],{"class":177},"    spread: PropRef\n",[168,228,230],{"class":170,"line":229},10,[168,231,232],{"class":177},"    pinEdges: PropRef\n",[168,234,236],{"class":170,"line":235},11,[168,237,238],{"class":177},"    colorScale: PropRef\n",[168,240,242],{"class":170,"line":241},12,[168,243,244],{"class":177},"    colorVariance: PropRef\n",[168,246,248],{"class":170,"line":247},13,[168,249,250],{"class":177},"}): Paint\n",[155,252,253,254,257,258,261,262,265],{},"Import ",[8,255,256],{},"noise"," from ",[8,259,260],{},"shaders\u002Fstd"," and use ",[8,263,264],{},"noise.ribbons",".",[155,267,268,271,272,275,276,279,280,271,283,286,287,290,291,271,294,297,298,301,302,305,306,309,310,313,314,317,318,321,322,325],{},[8,269,270],{},"from"," and ",[8,273,274],{},"to"," are position props. ",[8,277,278],{},"count"," is how many ribbons, ",[8,281,282],{},"width",[8,284,285],{},"softness"," their thickness and edge (0 to 1), ",[8,288,289],{},"spread"," how far apart they sit (0 to 1), ",[8,292,293],{},"amplitude",[8,295,296],{},"frequency"," the size and tightness of the wave (0 to 5). ",[8,299,300],{},"pinEdges"," is a boolean prop that gathers the ribbons at both ends. ",[8,303,304],{},"colorScale"," (1 to 6) is how many times the gradient repeats along a ribbon and ",[8,307,308],{},"colorVariance"," (0 to 1) how far each ribbon is offset in it. The gradient comes from the definition's ",[8,311,312],{},"stops"," prop. The color comes out in the working color space, so close it with ",[8,315,316],{},"overRgb(ribbons(…), backToP3({space}), tonePow())",". The wave runs on ",[8,319,320],{},"animatedTime: {speed: 'speed'}"," and the colors scroll on a second clock, ",[8,323,324],{},"extraAnimatedTimes: {color: 'colorSpeed'}",". Declare both on the definition.",[327,328,330],"h2",{"id":329},"parameters","Parameters",[332,333,334,350],"table",{},[335,336,337],"thead",{},[338,339,340,344,347],"tr",{},[341,342,343],"th",{},"Name",[341,345,346],{},"Type",[341,348,349],{},"Notes",[351,352,353],"tbody",{},[338,354,355,361,364],{},[356,357,358],"td",{},[8,359,360],{},"slots",[356,362,363],{},"`{",[356,365],{},[159,367,372],{"className":368,"code":370,"language":371},[369],"language-text","from: PropRef\nto: PropRef\ncount: PropRef\nwidth: PropRef\namplitude: PropRef\nfrequency: PropRef\nsoftness: PropRef\nspread: PropRef\npinEdges: PropRef\ncolorScale: PropRef\ncolorVariance: PropRef\n","text",[8,373,370],{"__ignoreMap":164},[155,375,376],{},"}` |  |",[327,378,380],{"id":379},"example","Example",[159,382,384],{"className":161,"code":383,"language":163,"meta":164,"style":164},"paint: overRgb(\n  ribbons({from: p('start'), to: p('end'), count: p('lineCount'), width: p('lineWidth'), amplitude: p('amplitude'), frequency: p('frequency'), softness: p('softness'), spread: p('spread'), pinEdges: p('pinEdges'), colorScale: p('colorScale'), colorVariance: p('colorVariance')}),\n  backToP3({space: p('colorSpace')}),\n  tonePow(),\n)\n",[8,385,386,400,520,537,545],{"__ignoreMap":164},[168,387,388,391,394,397],{"class":170,"line":171},[168,389,390],{"class":174},"paint",[168,392,393],{"class":177},": ",[168,395,396],{"class":174},"overRgb",[168,398,399],{"class":177},"(\n",[168,401,402,405,408,410,413,417,420,422,424,427,430,432,434,437,440,442,444,447,450,452,454,457,460,462,464,467,470,472,474,477,480,482,484,487,490,492,494,497,500,502,504,507,510,512,514,517],{"class":170,"line":181},[168,403,404],{"class":174},"  ribbons",[168,406,407],{"class":177},"({from: ",[168,409,155],{"class":174},[168,411,412],{"class":177},"(",[168,414,416],{"class":415},"sU2Wk","'start'",[168,418,419],{"class":177},"), to: ",[168,421,155],{"class":174},[168,423,412],{"class":177},[168,425,426],{"class":415},"'end'",[168,428,429],{"class":177},"), count: ",[168,431,155],{"class":174},[168,433,412],{"class":177},[168,435,436],{"class":415},"'lineCount'",[168,438,439],{"class":177},"), width: ",[168,441,155],{"class":174},[168,443,412],{"class":177},[168,445,446],{"class":415},"'lineWidth'",[168,448,449],{"class":177},"), amplitude: ",[168,451,155],{"class":174},[168,453,412],{"class":177},[168,455,456],{"class":415},"'amplitude'",[168,458,459],{"class":177},"), frequency: ",[168,461,155],{"class":174},[168,463,412],{"class":177},[168,465,466],{"class":415},"'frequency'",[168,468,469],{"class":177},"), softness: ",[168,471,155],{"class":174},[168,473,412],{"class":177},[168,475,476],{"class":415},"'softness'",[168,478,479],{"class":177},"), spread: ",[168,481,155],{"class":174},[168,483,412],{"class":177},[168,485,486],{"class":415},"'spread'",[168,488,489],{"class":177},"), pinEdges: ",[168,491,155],{"class":174},[168,493,412],{"class":177},[168,495,496],{"class":415},"'pinEdges'",[168,498,499],{"class":177},"), colorScale: ",[168,501,155],{"class":174},[168,503,412],{"class":177},[168,505,506],{"class":415},"'colorScale'",[168,508,509],{"class":177},"), colorVariance: ",[168,511,155],{"class":174},[168,513,412],{"class":177},[168,515,516],{"class":415},"'colorVariance'",[168,518,519],{"class":177},")}),\n",[168,521,522,525,528,530,532,535],{"class":170,"line":187},[168,523,524],{"class":174},"  backToP3",[168,526,527],{"class":177},"({space: ",[168,529,155],{"class":174},[168,531,412],{"class":177},[168,533,534],{"class":415},"'colorSpace'",[168,536,519],{"class":177},[168,538,539,542],{"class":170,"line":193},[168,540,541],{"class":174},"  tonePow",[168,543,544],{"class":177},"(),\n",[168,546,547],{"class":170,"line":199},[168,548,549],{"class":177},")\n",[551,552,553],"blockquote",{},[155,554,555,559,560,563,564,567,568,265],{},[556,557,558],"strong",{},"Tip."," Add ",[8,561,562],{},"stops: colorStopsPropConfig()"," to the props. The ribbons read the stop list, not ",[8,565,566],{},"colorA"," \u002F ",[8,569,570],{},"colorB",[327,572,574],{"id":573},"see-also","See also",[576,577,578,588,600],"ul",{},[579,580,581,587],"li",{},[582,583,585],"a",{"href":584},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Foverrgb",[8,586,396],{}," — Runs color-only steps over a paint, in order, leaving its alpha alone.",[579,589,590,596,597,599],{},[582,591,593],{"href":592},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fbacktop3",[8,594,595],{},"backToP3"," — Brings ",[8,598,147],{}," color from its working color space back to display color.",[579,601,602,608,609,611],{},[582,603,605],{"href":604},"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Ftonepow",[8,606,607],{},"tonePow"," — A gentle lift of the mid-tones (rgb to the power 0.85), as an ",[8,610,396],{}," step.",[327,613,615],{"id":614},"used-by","Used by",[155,617,618],{},[582,619,621],{"href":620},"\u002Fdocs\u002Fcomponents\u002Fstrands","Strands",[623,624,625],"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 .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 .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}",{"title":164,"searchDepth":181,"depth":181,"links":627},[628,629,630,631],{"id":329,"depth":181,"text":330},{"id":379,"depth":181,"text":380},{"id":573,"depth":181,"text":574},{"id":614,"depth":181,"text":615},"Noise",false,"md","light","Noise, light & materials","function",{},true,"\u002Fdocs\u002Fprimitives\u002Fnoise\u002Fribbons",{"title":147,"description":157},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fpaint\u002Fnoise.ts#L813","docs\u002Fprimitives\u002F12.noise\u002F27.ribbons","uZDqq2Q8p0m1G6N7126Aqpa4MMAxSkztZIoJvO4Fn3g"]