[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fguide%252525252525252525252525252525252525252525252525252525252525252525252525252525252525252526sa=D%252525252525252525252525252525252525252525252525252525252525252525252525252525252525252526source=editors%252525252525252525252525252525252525252525252525252525252525252525252525252525252525252526ust=1773941474839237%252525252525252525252525252525252525252525252525252525252525252525252525252525252525252526usg=AOvVaw1sH0SQJmlyySFi5OuqP-ia":9},[4,10,16,21,25,29,33,37,41,46,50,54,58,62,66,70,73,76,80,83,87,90,94,97],{"path":5,"title":6,"description":7,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide","What is Shaders?","A design platform for creating production-ready WebGPU effects","concepts",null,{"path":11,"title":12,"description":13,"category":8,"exclude":14,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fquickstart","Quickstart","Install Shaders and build your first GPU-accelerated effect",[15],"js",{"path":17,"title":18,"description":19,"category":20,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcolor-space","Color Space","Configure output color space for accurate color matching with design tools","advanced",{"path":22,"title":23,"description":24,"category":20,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Ftelemetry","Telemetry","Anonymous usage data collection and how to disable it",{"path":26,"title":27,"description":28,"category":20,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fhooks-events","Hooks & Events","Respond to shader lifecycle events like GPU compilation and readiness",{"path":30,"title":31,"description":32,"category":20,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fmcp","Shaders MCP","Connect your AI coding agent to Shaders and build stunning effects without leaving your workflow",{"path":34,"title":35,"description":36,"category":20,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fregistry","shadcn Registry","Install any Shaders preset or section straight into your project with the shadcn CLI",{"path":38,"title":39,"description":40,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcomposing-effects","Composing Effects","How to stack and nest components to create complex effects",{"path":42,"title":43,"description":44,"category":45,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fblending-masking","Blending & Masking","Control how components composite together and selectively reveal content","features",{"path":47,"title":48,"description":49,"category":45,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fprops-reactivity","Props & Reactivity","Control shader properties dynamically with reactive state and animations",{"path":51,"title":52,"description":53,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Flayout-positioning","Layout & Positioning","How to size, position, and integrate shaders into your application layout",{"path":55,"title":56,"description":57,"category":45,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Ftransforms","Transforms","Position, size, and rotate any layer with a bounding box — using % or px units and a layout-aware origin",{"path":59,"title":60,"description":61,"category":45,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fdynamic-props","Dynamic Props","Animate and respond to mouse input declaratively without writing animation code",{"path":63,"title":64,"description":65,"category":45,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fshape-effects","Shape \u002F SDF Effects","How to use and configure the built-in shape system",{"path":67,"title":68,"description":69,"category":20,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fperformance","Performance","Design high-performance shaders — what's expensive, what's free, and how to stay fast",{"path":71,"title":12,"description":72,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fjs\u002Fquickstart","Install Shaders and build your first GPU-accelerated effect with JavaScript",{"path":74,"title":12,"description":75,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Freact\u002Fquickstart","Install Shaders and build your first GPU-accelerated effect with React",{"path":77,"title":78,"description":79,"category":20,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Freact\u002Fssr","Next.js \u002F SSR","Using Shaders in Next.js and React SSR applications",{"path":81,"title":12,"description":82,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fquickstart","Install Shaders and build your first GPU-accelerated effect with Solid",{"path":84,"title":85,"description":86,"category":20,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fssr","SolidStart \u002F SSR","Using Shaders in SolidStart and Solid SSR applications",{"path":88,"title":12,"description":89,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fquickstart","Install Shaders and build your first GPU-accelerated effect with Svelte",{"path":91,"title":92,"description":93,"category":20,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fssr","SvelteKit \u002F SSR","Using Shaders in SvelteKit and Svelte SSR applications",{"path":95,"title":12,"description":96,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fvue\u002Fquickstart","Install Shaders and build your first GPU-accelerated effect with Vue",{"path":98,"title":99,"description":100,"category":20,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fvue\u002Fssr","Nuxt \u002F SSR","Using Shaders in Nuxt and Vue SSR applications"]