[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"github-stars":3,"guide-nav":5,"doc-\u002Fdocs\u002Fguide\u002Fquickstart":129},{"stars":4},5504,[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":13,"body":131,"category":10,"description":14,"extension":3012,"icon":3013,"meta":3014,"navigation":262,"path":12,"seo":3015,"stem":3016,"__hash__":3017},"guide\u002Fdocs\u002Fguide\u002F01.quickstart.md",{"type":132,"value":133,"toc":3002},"minimark",[134,138,142,147,150,175,197,201,204,751,755,758,780,784,802,1450,1463,1467,1477,1908,1920,1924,1935,2863,2869,2873,2883,2899,2903,2906,2972,2976,2999],[135,136,13],"h1",{"id":137},"quickstart",[139,140,141],"p",{},"By the end of this page you'll have a gradient with a cursor trail running in your app, sized with CSS and driven by state. Pick your framework in any code block and every block follows; plain JavaScript works too.",[143,144,146],"h2",{"id":145},"installing-the-package","Installing the package",[139,148,149],{},"Shaders is one package for every framework:",[151,152,157],"pre",{"className":153,"code":154,"language":155,"meta":156,"style":156},"language-bash shiki shiki-themes github-dark","npm install shaders\n","bash","",[10,158,159],{"__ignoreMap":156},[160,161,164,168,172],"span",{"class":162,"line":163},"line",1,[160,165,167],{"class":166},"svObZ","npm",[160,169,171],{"class":170},"sU2Wk"," install",[160,173,174],{"class":170}," shaders\n",[139,176,177,178,181,182,181,185,188,189,192,193,196],{},"Import the components from the entry point for your framework: ",[10,179,180],{},"shaders\u002Fvue",", ",[10,183,184],{},"shaders\u002Freact",[10,186,187],{},"shaders\u002Fsvelte"," or ",[10,190,191],{},"shaders\u002Fsolid",". Without a framework, the JavaScript API comes from ",[10,194,195],{},"shaders\u002Fjs",".",[143,198,200],{"id":199},"rendering-your-first-effect","Rendering your first effect",[139,202,203],{},"Let's start with a gradient and put a cursor trail on top of it. Add this component anywhere in your app:",[205,206,208,351,464,546,642],"code-group",{":tabs":207},"[\"Vue\", \"React\", \"Svelte\", \"Solid\", \"JS\"]",[151,209,213],{"className":210,"code":211,"language":212,"meta":156,"style":156},"language-vue-html shiki shiki-themes github-dark","\u003Cscript setup>\nimport { Shader, LinearGradient, CursorTrail } from 'shaders\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CShader class=\"w-full h-64\">\n    \u003CLinearGradient color-a=\"#0f172a\" color-b=\"#7c3aed\" \u002F>\n    \u003CCursorTrail \u002F>\n  \u003C\u002FShader>\n\u003C\u002Ftemplate>\n","vue-html",[10,214,215,231,247,257,264,274,294,322,332,342],{"__ignoreMap":156},[160,216,217,221,225,228],{"class":162,"line":163},[160,218,220],{"class":219},"s95oV","\u003C",[160,222,224],{"class":223},"s4JwU","script",[160,226,227],{"class":166}," setup",[160,229,230],{"class":219},">\n",[160,232,234,238,241,244],{"class":162,"line":233},2,[160,235,237],{"class":236},"snl16","import",[160,239,240],{"class":219}," { Shader, LinearGradient, CursorTrail } ",[160,242,243],{"class":236},"from",[160,245,246],{"class":170}," 'shaders\u002Fvue'\n",[160,248,250,253,255],{"class":162,"line":249},3,[160,251,252],{"class":219},"\u003C\u002F",[160,254,224],{"class":223},[160,256,230],{"class":219},[160,258,260],{"class":162,"line":259},4,[160,261,263],{"emptyLinePlaceholder":262},true,"\n",[160,265,267,269,272],{"class":162,"line":266},5,[160,268,220],{"class":219},[160,270,271],{"class":223},"template",[160,273,230],{"class":219},[160,275,277,280,283,286,289,292],{"class":162,"line":276},6,[160,278,279],{"class":219},"  \u003C",[160,281,282],{"class":223},"Shader",[160,284,285],{"class":166}," class",[160,287,288],{"class":219},"=",[160,290,291],{"class":170},"\"w-full h-64\"",[160,293,230],{"class":219},[160,295,297,300,303,306,308,311,314,316,319],{"class":162,"line":296},7,[160,298,299],{"class":219},"    \u003C",[160,301,302],{"class":223},"LinearGradient",[160,304,305],{"class":166}," color-a",[160,307,288],{"class":219},[160,309,310],{"class":170},"\"#0f172a\"",[160,312,313],{"class":166}," color-b",[160,315,288],{"class":219},[160,317,318],{"class":170},"\"#7c3aed\"",[160,320,321],{"class":219}," \u002F>\n",[160,323,325,327,330],{"class":162,"line":324},8,[160,326,299],{"class":219},[160,328,329],{"class":223},"CursorTrail",[160,331,321],{"class":219},[160,333,335,338,340],{"class":162,"line":334},9,[160,336,337],{"class":219},"  \u003C\u002F",[160,339,282],{"class":223},[160,341,230],{"class":219},[160,343,345,347,349],{"class":162,"line":344},10,[160,346,252],{"class":219},[160,348,271],{"class":223},[160,350,230],{"class":219},[151,352,356],{"className":353,"code":354,"language":355,"meta":156,"style":156},"language-jsx shiki shiki-themes github-dark","import { Shader, LinearGradient, CursorTrail } from 'shaders\u002Freact'\n\nexport default function Hero() {\n  return (\n    \u003CShader className=\"w-full h-64\">\n      \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" \u002F>\n      \u003CCursorTrail \u002F>\n    \u003C\u002FShader>\n  )\n}\n","jsx",[10,357,358,369,373,390,398,414,437,445,454,459],{"__ignoreMap":156},[160,359,360,362,364,366],{"class":162,"line":163},[160,361,237],{"class":236},[160,363,240],{"class":219},[160,365,243],{"class":236},[160,367,368],{"class":170}," 'shaders\u002Freact'\n",[160,370,371],{"class":162,"line":233},[160,372,263],{"emptyLinePlaceholder":262},[160,374,375,378,381,384,387],{"class":162,"line":249},[160,376,377],{"class":236},"export",[160,379,380],{"class":236}," default",[160,382,383],{"class":236}," function",[160,385,386],{"class":166}," Hero",[160,388,389],{"class":219},"() {\n",[160,391,392,395],{"class":162,"line":259},[160,393,394],{"class":236},"  return",[160,396,397],{"class":219}," (\n",[160,399,400,402,405,408,410,412],{"class":162,"line":266},[160,401,299],{"class":219},[160,403,282],{"class":404},"sDLfK",[160,406,407],{"class":166}," className",[160,409,288],{"class":236},[160,411,291],{"class":170},[160,413,230],{"class":219},[160,415,416,419,421,424,426,428,431,433,435],{"class":162,"line":276},[160,417,418],{"class":219},"      \u003C",[160,420,302],{"class":404},[160,422,423],{"class":166}," colorA",[160,425,288],{"class":236},[160,427,310],{"class":170},[160,429,430],{"class":166}," colorB",[160,432,288],{"class":236},[160,434,318],{"class":170},[160,436,321],{"class":219},[160,438,439,441,443],{"class":162,"line":296},[160,440,418],{"class":219},[160,442,329],{"class":404},[160,444,321],{"class":219},[160,446,447,450,452],{"class":162,"line":324},[160,448,449],{"class":219},"    \u003C\u002F",[160,451,282],{"class":404},[160,453,230],{"class":219},[160,455,456],{"class":162,"line":334},[160,457,458],{"class":219},"  )\n",[160,460,461],{"class":162,"line":344},[160,462,463],{"class":219},"}\n",[151,465,469],{"className":466,"code":467,"language":468,"meta":156,"style":156},"language-tsx shiki shiki-themes github-dark","\u003Cscript>\n  import { Shader, LinearGradient, CursorTrail } from 'shaders\u002Fsvelte'\n\u003C\u002Fscript>\n\n\u003CShader class=\"w-full h-64\">\n  \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" \u002F>\n  \u003CCursorTrail \u002F>\n\u003C\u002FShader>\n","tsx",[10,470,471,479,484,492,496,510,530,538],{"__ignoreMap":156},[160,472,473,475,477],{"class":162,"line":163},[160,474,220],{"class":219},[160,476,224],{"class":223},[160,478,230],{"class":219},[160,480,481],{"class":162,"line":233},[160,482,483],{"class":219},"  import { Shader, LinearGradient, CursorTrail } from 'shaders\u002Fsvelte'\n",[160,485,486,488,490],{"class":162,"line":249},[160,487,252],{"class":219},[160,489,224],{"class":223},[160,491,230],{"class":219},[160,493,494],{"class":162,"line":259},[160,495,263],{"emptyLinePlaceholder":262},[160,497,498,500,502,504,506,508],{"class":162,"line":266},[160,499,220],{"class":219},[160,501,282],{"class":404},[160,503,285],{"class":166},[160,505,288],{"class":236},[160,507,291],{"class":170},[160,509,230],{"class":219},[160,511,512,514,516,518,520,522,524,526,528],{"class":162,"line":276},[160,513,279],{"class":219},[160,515,302],{"class":404},[160,517,423],{"class":166},[160,519,288],{"class":236},[160,521,310],{"class":170},[160,523,430],{"class":166},[160,525,288],{"class":236},[160,527,318],{"class":170},[160,529,321],{"class":219},[160,531,532,534,536],{"class":162,"line":296},[160,533,279],{"class":219},[160,535,329],{"class":404},[160,537,321],{"class":219},[160,539,540,542,544],{"class":162,"line":324},[160,541,252],{"class":219},[160,543,282],{"class":404},[160,545,230],{"class":219},[151,547,549],{"className":466,"code":548,"language":468,"meta":156,"style":156},"import { Shader, LinearGradient, CursorTrail } from 'shaders\u002Fsolid'\n\nexport default function Hero() {\n  return (\n    \u003CShader class=\"w-full h-64\">\n      \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" \u002F>\n      \u003CCursorTrail \u002F>\n    \u003C\u002FShader>\n  )\n}\n",[10,550,551,562,566,578,584,598,618,626,634,638],{"__ignoreMap":156},[160,552,553,555,557,559],{"class":162,"line":163},[160,554,237],{"class":236},[160,556,240],{"class":219},[160,558,243],{"class":236},[160,560,561],{"class":170}," 'shaders\u002Fsolid'\n",[160,563,564],{"class":162,"line":233},[160,565,263],{"emptyLinePlaceholder":262},[160,567,568,570,572,574,576],{"class":162,"line":249},[160,569,377],{"class":236},[160,571,380],{"class":236},[160,573,383],{"class":236},[160,575,386],{"class":166},[160,577,389],{"class":219},[160,579,580,582],{"class":162,"line":259},[160,581,394],{"class":236},[160,583,397],{"class":219},[160,585,586,588,590,592,594,596],{"class":162,"line":266},[160,587,299],{"class":219},[160,589,282],{"class":404},[160,591,285],{"class":166},[160,593,288],{"class":236},[160,595,291],{"class":170},[160,597,230],{"class":219},[160,599,600,602,604,606,608,610,612,614,616],{"class":162,"line":276},[160,601,418],{"class":219},[160,603,302],{"class":404},[160,605,423],{"class":166},[160,607,288],{"class":236},[160,609,310],{"class":170},[160,611,430],{"class":166},[160,613,288],{"class":236},[160,615,318],{"class":170},[160,617,321],{"class":219},[160,619,620,622,624],{"class":162,"line":296},[160,621,418],{"class":219},[160,623,329],{"class":404},[160,625,321],{"class":219},[160,627,628,630,632],{"class":162,"line":324},[160,629,449],{"class":219},[160,631,282],{"class":404},[160,633,230],{"class":219},[160,635,636],{"class":162,"line":334},[160,637,458],{"class":219},[160,639,640],{"class":162,"line":344},[160,641,463],{"class":219},[151,643,647],{"className":644,"code":645,"language":646,"meta":156,"style":156},"language-javascript shiki shiki-themes github-dark","\u002F\u002F \u003Ccanvas id=\"hero\" class=\"w-full h-64\">\u003C\u002Fcanvas>\nimport { createShader } from 'shaders\u002Fjs'\n\nconst shader = await createShader(document.getElementById('hero'), {\n  components: [\n    { type: 'LinearGradient', props: { colorA: '#0f172a', colorB: '#7c3aed' } },\n    { type: 'CursorTrail', props: {} },\n  ],\n})\n","javascript",[10,648,649,655,667,671,703,708,731,741,746],{"__ignoreMap":156},[160,650,651],{"class":162,"line":163},[160,652,654],{"class":653},"sAwPA","\u002F\u002F \u003Ccanvas id=\"hero\" class=\"w-full h-64\">\u003C\u002Fcanvas>\n",[160,656,657,659,662,664],{"class":162,"line":233},[160,658,237],{"class":236},[160,660,661],{"class":219}," { createShader } ",[160,663,243],{"class":236},[160,665,666],{"class":170}," 'shaders\u002Fjs'\n",[160,668,669],{"class":162,"line":249},[160,670,263],{"emptyLinePlaceholder":262},[160,672,673,676,679,682,685,688,691,694,697,700],{"class":162,"line":259},[160,674,675],{"class":236},"const",[160,677,678],{"class":404}," shader",[160,680,681],{"class":236}," =",[160,683,684],{"class":236}," await",[160,686,687],{"class":166}," createShader",[160,689,690],{"class":219},"(document.",[160,692,693],{"class":166},"getElementById",[160,695,696],{"class":219},"(",[160,698,699],{"class":170},"'hero'",[160,701,702],{"class":219},"), {\n",[160,704,705],{"class":162,"line":266},[160,706,707],{"class":219},"  components: [\n",[160,709,710,713,716,719,722,725,728],{"class":162,"line":276},[160,711,712],{"class":219},"    { type: ",[160,714,715],{"class":170},"'LinearGradient'",[160,717,718],{"class":219},", props: { colorA: ",[160,720,721],{"class":170},"'#0f172a'",[160,723,724],{"class":219},", colorB: ",[160,726,727],{"class":170},"'#7c3aed'",[160,729,730],{"class":219}," } },\n",[160,732,733,735,738],{"class":162,"line":296},[160,734,712],{"class":219},[160,736,737],{"class":170},"'CursorTrail'",[160,739,740],{"class":219},", props: {} },\n",[160,742,743],{"class":162,"line":324},[160,744,745],{"class":219},"  ],\n",[160,747,748],{"class":162,"line":334},[160,749,750],{"class":219},"})\n",[752,753],"shader-demo",{":preset":754},"{\"components\":[{\"type\":\"LinearGradient\",\"props\":{\"colorA\":\"#0f172a\",\"colorB\":\"#7c3aed\"}},{\"type\":\"CursorTrail\"}]}",[139,756,757],{},"Move your cursor over the canvas to see the trail.",[139,759,760,763,764,767,768,772,773,775,776,779],{},[10,761,762],{},"\u003CShader>"," renders a single ",[10,765,766],{},"\u003Ccanvas>",". The components inside it are ",[769,770,771],"strong",{},"layers",", drawn in order like layers in Figma: the gradient first, then the trail on top. In plain JavaScript you bring the ",[10,774,766],{},", and each entry in ",[10,777,778],{},"components"," is a layer.",[143,781,783],{"id":782},"sizing-the-canvas","Sizing the canvas",[139,785,786,787,789,790,793,794,797,798,801],{},"The canvas has no size of its own. It takes whatever size you give ",[10,788,762],{}," through ",[10,791,792],{},"class"," (",[10,795,796],{},"className"," in React) or ",[10,799,800],{},"style",":",[205,803,804,930,1072,1212,1347],{":tabs":207},[151,805,807],{"className":210,"code":806,"language":212,"meta":156,"style":156},"\u003C!-- Fill the viewport -->\n\u003CShader class=\"w-screen h-screen\">\n  \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Fixed size -->\n\u003CShader style=\"width: 600px; height: 400px\">\n  \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n\u003C!-- Full width, 16:9 -->\n\u003CShader class=\"w-full aspect-video\">\n  \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[10,808,809,814,829,837,845,849,854,870,878,886,890,896,912,921],{"__ignoreMap":156},[160,810,811],{"class":162,"line":163},[160,812,813],{"class":653},"\u003C!-- Fill the viewport -->\n",[160,815,816,818,820,822,824,827],{"class":162,"line":233},[160,817,220],{"class":219},[160,819,282],{"class":223},[160,821,285],{"class":166},[160,823,288],{"class":219},[160,825,826],{"class":170},"\"w-screen h-screen\"",[160,828,230],{"class":219},[160,830,831,833,835],{"class":162,"line":249},[160,832,279],{"class":219},[160,834,302],{"class":223},[160,836,321],{"class":219},[160,838,839,841,843],{"class":162,"line":259},[160,840,252],{"class":219},[160,842,282],{"class":223},[160,844,230],{"class":219},[160,846,847],{"class":162,"line":266},[160,848,263],{"emptyLinePlaceholder":262},[160,850,851],{"class":162,"line":276},[160,852,853],{"class":653},"\u003C!-- Fixed size -->\n",[160,855,856,858,860,863,865,868],{"class":162,"line":296},[160,857,220],{"class":219},[160,859,282],{"class":223},[160,861,862],{"class":166}," style",[160,864,288],{"class":219},[160,866,867],{"class":170},"\"width: 600px; height: 400px\"",[160,869,230],{"class":219},[160,871,872,874,876],{"class":162,"line":324},[160,873,279],{"class":219},[160,875,302],{"class":223},[160,877,321],{"class":219},[160,879,880,882,884],{"class":162,"line":334},[160,881,252],{"class":219},[160,883,282],{"class":223},[160,885,230],{"class":219},[160,887,888],{"class":162,"line":344},[160,889,263],{"emptyLinePlaceholder":262},[160,891,893],{"class":162,"line":892},11,[160,894,895],{"class":653},"\u003C!-- Full width, 16:9 -->\n",[160,897,899,901,903,905,907,910],{"class":162,"line":898},12,[160,900,220],{"class":219},[160,902,282],{"class":223},[160,904,285],{"class":166},[160,906,288],{"class":219},[160,908,909],{"class":170},"\"w-full aspect-video\"",[160,911,230],{"class":219},[160,913,915,917,919],{"class":162,"line":914},13,[160,916,279],{"class":219},[160,918,302],{"class":223},[160,920,321],{"class":219},[160,922,924,926,928],{"class":162,"line":923},14,[160,925,252],{"class":219},[160,927,282],{"class":223},[160,929,230],{"class":219},[151,931,933],{"className":353,"code":932,"language":355,"meta":156,"style":156},"{\u002F* Fill the viewport *\u002F}\n\u003CShader className=\"w-screen h-screen\">\n  \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Fixed size *\u002F}\n\u003CShader style={{ width: 600, height: 400 }}>\n  \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Full width, 16:9 *\u002F}\n\u003CShader className=\"w-full aspect-video\">\n  \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[10,934,935,945,959,967,975,979,988,1013,1021,1029,1033,1042,1056,1064],{"__ignoreMap":156},[160,936,937,940,943],{"class":162,"line":163},[160,938,939],{"class":219},"{",[160,941,942],{"class":653},"\u002F* Fill the viewport *\u002F",[160,944,463],{"class":219},[160,946,947,949,951,953,955,957],{"class":162,"line":233},[160,948,220],{"class":219},[160,950,282],{"class":404},[160,952,407],{"class":166},[160,954,288],{"class":236},[160,956,826],{"class":170},[160,958,230],{"class":219},[160,960,961,963,965],{"class":162,"line":249},[160,962,279],{"class":219},[160,964,302],{"class":404},[160,966,321],{"class":219},[160,968,969,971,973],{"class":162,"line":259},[160,970,252],{"class":219},[160,972,282],{"class":404},[160,974,230],{"class":219},[160,976,977],{"class":162,"line":266},[160,978,263],{"emptyLinePlaceholder":262},[160,980,981,983,986],{"class":162,"line":276},[160,982,939],{"class":219},[160,984,985],{"class":653},"\u002F* Fixed size *\u002F",[160,987,463],{"class":219},[160,989,990,992,994,996,998,1001,1004,1007,1010],{"class":162,"line":296},[160,991,220],{"class":219},[160,993,282],{"class":404},[160,995,862],{"class":166},[160,997,288],{"class":236},[160,999,1000],{"class":219},"{{ width: ",[160,1002,1003],{"class":404},"600",[160,1005,1006],{"class":219},", height: ",[160,1008,1009],{"class":404},"400",[160,1011,1012],{"class":219}," }}>\n",[160,1014,1015,1017,1019],{"class":162,"line":324},[160,1016,279],{"class":219},[160,1018,302],{"class":404},[160,1020,321],{"class":219},[160,1022,1023,1025,1027],{"class":162,"line":334},[160,1024,252],{"class":219},[160,1026,282],{"class":404},[160,1028,230],{"class":219},[160,1030,1031],{"class":162,"line":344},[160,1032,263],{"emptyLinePlaceholder":262},[160,1034,1035,1037,1040],{"class":162,"line":892},[160,1036,939],{"class":219},[160,1038,1039],{"class":653},"\u002F* Full width, 16:9 *\u002F",[160,1041,463],{"class":219},[160,1043,1044,1046,1048,1050,1052,1054],{"class":162,"line":898},[160,1045,220],{"class":219},[160,1047,282],{"class":404},[160,1049,407],{"class":166},[160,1051,288],{"class":236},[160,1053,909],{"class":170},[160,1055,230],{"class":219},[160,1057,1058,1060,1062],{"class":162,"line":914},[160,1059,279],{"class":219},[160,1061,302],{"class":404},[160,1063,321],{"class":219},[160,1065,1066,1068,1070],{"class":162,"line":923},[160,1067,252],{"class":219},[160,1069,282],{"class":404},[160,1071,230],{"class":219},[151,1073,1074],{"className":466,"code":806,"language":468,"meta":156,"style":156},[10,1075,1076,1087,1101,1109,1117,1121,1130,1144,1152,1160,1164,1182,1196,1204],{"__ignoreMap":156},[160,1077,1078,1081,1084],{"class":162,"line":163},[160,1079,1080],{"class":236},"\u003C!--",[160,1082,1083],{"class":219}," Fill the viewport ",[160,1085,1086],{"class":236},"-->\n",[160,1088,1089,1091,1093,1095,1097,1099],{"class":162,"line":233},[160,1090,220],{"class":219},[160,1092,282],{"class":404},[160,1094,285],{"class":166},[160,1096,288],{"class":236},[160,1098,826],{"class":170},[160,1100,230],{"class":219},[160,1102,1103,1105,1107],{"class":162,"line":249},[160,1104,279],{"class":219},[160,1106,302],{"class":404},[160,1108,321],{"class":219},[160,1110,1111,1113,1115],{"class":162,"line":259},[160,1112,252],{"class":219},[160,1114,282],{"class":404},[160,1116,230],{"class":219},[160,1118,1119],{"class":162,"line":266},[160,1120,263],{"emptyLinePlaceholder":262},[160,1122,1123,1125,1128],{"class":162,"line":276},[160,1124,1080],{"class":236},[160,1126,1127],{"class":219}," Fixed size ",[160,1129,1086],{"class":236},[160,1131,1132,1134,1136,1138,1140,1142],{"class":162,"line":296},[160,1133,220],{"class":219},[160,1135,282],{"class":404},[160,1137,862],{"class":166},[160,1139,288],{"class":236},[160,1141,867],{"class":170},[160,1143,230],{"class":219},[160,1145,1146,1148,1150],{"class":162,"line":324},[160,1147,279],{"class":219},[160,1149,302],{"class":404},[160,1151,321],{"class":219},[160,1153,1154,1156,1158],{"class":162,"line":334},[160,1155,252],{"class":219},[160,1157,282],{"class":404},[160,1159,230],{"class":219},[160,1161,1162],{"class":162,"line":344},[160,1163,263],{"emptyLinePlaceholder":262},[160,1165,1166,1168,1171,1174,1176,1179],{"class":162,"line":892},[160,1167,1080],{"class":236},[160,1169,1170],{"class":219}," Full width, ",[160,1172,1173],{"class":404},"16",[160,1175,801],{"class":219},[160,1177,1178],{"class":404},"9",[160,1180,1181],{"class":236}," -->\n",[160,1183,1184,1186,1188,1190,1192,1194],{"class":162,"line":898},[160,1185,220],{"class":219},[160,1187,282],{"class":404},[160,1189,285],{"class":166},[160,1191,288],{"class":236},[160,1193,909],{"class":170},[160,1195,230],{"class":219},[160,1197,1198,1200,1202],{"class":162,"line":914},[160,1199,279],{"class":219},[160,1201,302],{"class":404},[160,1203,321],{"class":219},[160,1205,1206,1208,1210],{"class":162,"line":923},[160,1207,252],{"class":219},[160,1209,282],{"class":404},[160,1211,230],{"class":219},[151,1213,1215],{"className":466,"code":1214,"language":468,"meta":156,"style":156},"{\u002F* Fill the viewport *\u002F}\n\u003CShader class=\"w-screen h-screen\">\n  \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Fixed size *\u002F}\n\u003CShader style={{ width: '600px', height: '400px' }}>\n  \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n\n{\u002F* Full width, 16:9 *\u002F}\n\u003CShader class=\"w-full aspect-video\">\n  \u003CLinearGradient \u002F>\n\u003C\u002FShader>\n",[10,1216,1217,1225,1239,1247,1255,1259,1267,1289,1297,1305,1309,1317,1331,1339],{"__ignoreMap":156},[160,1218,1219,1221,1223],{"class":162,"line":163},[160,1220,939],{"class":219},[160,1222,942],{"class":653},[160,1224,463],{"class":219},[160,1226,1227,1229,1231,1233,1235,1237],{"class":162,"line":233},[160,1228,220],{"class":219},[160,1230,282],{"class":404},[160,1232,285],{"class":166},[160,1234,288],{"class":236},[160,1236,826],{"class":170},[160,1238,230],{"class":219},[160,1240,1241,1243,1245],{"class":162,"line":249},[160,1242,279],{"class":219},[160,1244,302],{"class":404},[160,1246,321],{"class":219},[160,1248,1249,1251,1253],{"class":162,"line":259},[160,1250,252],{"class":219},[160,1252,282],{"class":404},[160,1254,230],{"class":219},[160,1256,1257],{"class":162,"line":266},[160,1258,263],{"emptyLinePlaceholder":262},[160,1260,1261,1263,1265],{"class":162,"line":276},[160,1262,939],{"class":219},[160,1264,985],{"class":653},[160,1266,463],{"class":219},[160,1268,1269,1271,1273,1275,1277,1279,1282,1284,1287],{"class":162,"line":296},[160,1270,220],{"class":219},[160,1272,282],{"class":404},[160,1274,862],{"class":166},[160,1276,288],{"class":236},[160,1278,1000],{"class":219},[160,1280,1281],{"class":170},"'600px'",[160,1283,1006],{"class":219},[160,1285,1286],{"class":170},"'400px'",[160,1288,1012],{"class":219},[160,1290,1291,1293,1295],{"class":162,"line":324},[160,1292,279],{"class":219},[160,1294,302],{"class":404},[160,1296,321],{"class":219},[160,1298,1299,1301,1303],{"class":162,"line":334},[160,1300,252],{"class":219},[160,1302,282],{"class":404},[160,1304,230],{"class":219},[160,1306,1307],{"class":162,"line":344},[160,1308,263],{"emptyLinePlaceholder":262},[160,1310,1311,1313,1315],{"class":162,"line":892},[160,1312,939],{"class":219},[160,1314,1039],{"class":653},[160,1316,463],{"class":219},[160,1318,1319,1321,1323,1325,1327,1329],{"class":162,"line":898},[160,1320,220],{"class":219},[160,1322,282],{"class":404},[160,1324,285],{"class":166},[160,1326,288],{"class":236},[160,1328,909],{"class":170},[160,1330,230],{"class":219},[160,1332,1333,1335,1337],{"class":162,"line":914},[160,1334,279],{"class":219},[160,1336,302],{"class":404},[160,1338,321],{"class":219},[160,1340,1341,1343,1345],{"class":162,"line":923},[160,1342,252],{"class":219},[160,1344,282],{"class":404},[160,1346,230],{"class":219},[151,1348,1352],{"className":1349,"code":1350,"language":1351,"meta":156,"style":156},"language-html shiki shiki-themes github-dark","\u003C!-- Fill the viewport -->\n\u003Ccanvas id=\"hero\" class=\"w-screen h-screen\">\u003C\u002Fcanvas>\n\n\u003C!-- Fixed size -->\n\u003Ccanvas id=\"hero\" style=\"width: 600px; height: 400px\">\u003C\u002Fcanvas>\n\n\u003C!-- Full width, 16:9 -->\n\u003Ccanvas id=\"hero\" class=\"w-full aspect-video\">\u003C\u002Fcanvas>\n","html",[10,1353,1354,1358,1386,1390,1394,1418,1422,1426],{"__ignoreMap":156},[160,1355,1356],{"class":162,"line":163},[160,1357,813],{"class":653},[160,1359,1360,1362,1365,1368,1370,1373,1375,1377,1379,1382,1384],{"class":162,"line":233},[160,1361,220],{"class":219},[160,1363,1364],{"class":223},"canvas",[160,1366,1367],{"class":166}," id",[160,1369,288],{"class":219},[160,1371,1372],{"class":170},"\"hero\"",[160,1374,285],{"class":166},[160,1376,288],{"class":219},[160,1378,826],{"class":170},[160,1380,1381],{"class":219},">\u003C\u002F",[160,1383,1364],{"class":223},[160,1385,230],{"class":219},[160,1387,1388],{"class":162,"line":249},[160,1389,263],{"emptyLinePlaceholder":262},[160,1391,1392],{"class":162,"line":259},[160,1393,853],{"class":653},[160,1395,1396,1398,1400,1402,1404,1406,1408,1410,1412,1414,1416],{"class":162,"line":266},[160,1397,220],{"class":219},[160,1399,1364],{"class":223},[160,1401,1367],{"class":166},[160,1403,288],{"class":219},[160,1405,1372],{"class":170},[160,1407,862],{"class":166},[160,1409,288],{"class":219},[160,1411,867],{"class":170},[160,1413,1381],{"class":219},[160,1415,1364],{"class":223},[160,1417,230],{"class":219},[160,1419,1420],{"class":162,"line":276},[160,1421,263],{"emptyLinePlaceholder":262},[160,1423,1424],{"class":162,"line":296},[160,1425,895],{"class":653},[160,1427,1428,1430,1432,1434,1436,1438,1440,1442,1444,1446,1448],{"class":162,"line":324},[160,1429,220],{"class":219},[160,1431,1364],{"class":223},[160,1433,1367],{"class":166},[160,1435,288],{"class":219},[160,1437,1372],{"class":170},[160,1439,285],{"class":166},[160,1441,288],{"class":219},[160,1443,909],{"class":170},[160,1445,1381],{"class":219},[160,1447,1364],{"class":223},[160,1449,230],{"class":219},[139,1451,1452,1453,1455,1456,1458,1459,1462],{},"The canvas resizes itself when its CSS size changes, so you don't need to call anything on resize. Style ",[10,1454,762],{},", not the ",[10,1457,766],{}," inside it: the internal markup can change between releases. In plain JavaScript, call ",[10,1460,1461],{},"shader.resize()"," if you change the canvas size from script.",[143,1464,1466],{"id":1465},"setting-props","Setting props",[139,1468,1469,1470,1472,1473,1476],{},"Each component takes props the same way any component in your framework does. In Vue, attributes are kebab-case and non-string values need the ",[10,1471,801],{}," binding; in plain JavaScript they go in each component's ",[10,1474,1475],{},"props"," object:",[205,1478,1479,1558,1636,1709,1781],{":tabs":207},[151,1480,1482],{"className":210,"code":1481,"language":212,"meta":156,"style":156},"\u003CShader class=\"w-full h-64\">\n  \u003CLinearGradient\n    color-a=\"#ff6b6b\"\n    color-b=\"#4ecdc4\"\n    :angle=\"45\"\n    color-space=\"oklch\"\n  \u002F>\n\u003C\u002FShader>\n",[10,1483,1484,1498,1505,1515,1525,1535,1545,1550],{"__ignoreMap":156},[160,1485,1486,1488,1490,1492,1494,1496],{"class":162,"line":163},[160,1487,220],{"class":219},[160,1489,282],{"class":223},[160,1491,285],{"class":166},[160,1493,288],{"class":219},[160,1495,291],{"class":170},[160,1497,230],{"class":219},[160,1499,1500,1502],{"class":162,"line":233},[160,1501,279],{"class":219},[160,1503,1504],{"class":223},"LinearGradient\n",[160,1506,1507,1510,1512],{"class":162,"line":249},[160,1508,1509],{"class":166},"    color-a",[160,1511,288],{"class":219},[160,1513,1514],{"class":170},"\"#ff6b6b\"\n",[160,1516,1517,1520,1522],{"class":162,"line":259},[160,1518,1519],{"class":166},"    color-b",[160,1521,288],{"class":219},[160,1523,1524],{"class":170},"\"#4ecdc4\"\n",[160,1526,1527,1530,1532],{"class":162,"line":266},[160,1528,1529],{"class":166},"    :angle",[160,1531,288],{"class":219},[160,1533,1534],{"class":170},"\"45\"\n",[160,1536,1537,1540,1542],{"class":162,"line":276},[160,1538,1539],{"class":166},"    color-space",[160,1541,288],{"class":219},[160,1543,1544],{"class":170},"\"oklch\"\n",[160,1546,1547],{"class":162,"line":296},[160,1548,1549],{"class":219},"  \u002F>\n",[160,1551,1552,1554,1556],{"class":162,"line":324},[160,1553,252],{"class":219},[160,1555,282],{"class":223},[160,1557,230],{"class":219},[151,1559,1561],{"className":353,"code":1560,"language":355,"meta":156,"style":156},"\u003CShader className=\"w-full h-64\">\n  \u003CLinearGradient\n    colorA=\"#ff6b6b\"\n    colorB=\"#4ecdc4\"\n    angle={45}\n    colorSpace=\"oklch\"\n  \u002F>\n\u003C\u002FShader>\n",[10,1562,1563,1577,1583,1592,1601,1615,1624,1628],{"__ignoreMap":156},[160,1564,1565,1567,1569,1571,1573,1575],{"class":162,"line":163},[160,1566,220],{"class":219},[160,1568,282],{"class":404},[160,1570,407],{"class":166},[160,1572,288],{"class":236},[160,1574,291],{"class":170},[160,1576,230],{"class":219},[160,1578,1579,1581],{"class":162,"line":233},[160,1580,279],{"class":219},[160,1582,1504],{"class":404},[160,1584,1585,1588,1590],{"class":162,"line":249},[160,1586,1587],{"class":166},"    colorA",[160,1589,288],{"class":236},[160,1591,1514],{"class":170},[160,1593,1594,1597,1599],{"class":162,"line":259},[160,1595,1596],{"class":166},"    colorB",[160,1598,288],{"class":236},[160,1600,1524],{"class":170},[160,1602,1603,1606,1608,1610,1613],{"class":162,"line":266},[160,1604,1605],{"class":166},"    angle",[160,1607,288],{"class":236},[160,1609,939],{"class":219},[160,1611,1612],{"class":404},"45",[160,1614,463],{"class":219},[160,1616,1617,1620,1622],{"class":162,"line":276},[160,1618,1619],{"class":166},"    colorSpace",[160,1621,288],{"class":236},[160,1623,1544],{"class":170},[160,1625,1626],{"class":162,"line":296},[160,1627,1549],{"class":219},[160,1629,1630,1632,1634],{"class":162,"line":324},[160,1631,252],{"class":219},[160,1633,282],{"class":404},[160,1635,230],{"class":219},[151,1637,1639],{"className":466,"code":1638,"language":468,"meta":156,"style":156},"\u003CShader class=\"w-full h-64\">\n  \u003CLinearGradient\n    colorA=\"#ff6b6b\"\n    colorB=\"#4ecdc4\"\n    angle={45}\n    colorSpace=\"oklch\"\n  \u002F>\n\u003C\u002FShader>\n",[10,1640,1641,1655,1661,1669,1677,1689,1697,1701],{"__ignoreMap":156},[160,1642,1643,1645,1647,1649,1651,1653],{"class":162,"line":163},[160,1644,220],{"class":219},[160,1646,282],{"class":404},[160,1648,285],{"class":166},[160,1650,288],{"class":236},[160,1652,291],{"class":170},[160,1654,230],{"class":219},[160,1656,1657,1659],{"class":162,"line":233},[160,1658,279],{"class":219},[160,1660,1504],{"class":404},[160,1662,1663,1665,1667],{"class":162,"line":249},[160,1664,1587],{"class":166},[160,1666,288],{"class":236},[160,1668,1514],{"class":170},[160,1670,1671,1673,1675],{"class":162,"line":259},[160,1672,1596],{"class":166},[160,1674,288],{"class":236},[160,1676,1524],{"class":170},[160,1678,1679,1681,1683,1685,1687],{"class":162,"line":266},[160,1680,1605],{"class":166},[160,1682,288],{"class":236},[160,1684,939],{"class":219},[160,1686,1612],{"class":404},[160,1688,463],{"class":219},[160,1690,1691,1693,1695],{"class":162,"line":276},[160,1692,1619],{"class":166},[160,1694,288],{"class":236},[160,1696,1544],{"class":170},[160,1698,1699],{"class":162,"line":296},[160,1700,1549],{"class":219},[160,1702,1703,1705,1707],{"class":162,"line":324},[160,1704,252],{"class":219},[160,1706,282],{"class":404},[160,1708,230],{"class":219},[151,1710,1711],{"className":466,"code":1638,"language":468,"meta":156,"style":156},[10,1712,1713,1727,1733,1741,1749,1761,1769,1773],{"__ignoreMap":156},[160,1714,1715,1717,1719,1721,1723,1725],{"class":162,"line":163},[160,1716,220],{"class":219},[160,1718,282],{"class":404},[160,1720,285],{"class":166},[160,1722,288],{"class":236},[160,1724,291],{"class":170},[160,1726,230],{"class":219},[160,1728,1729,1731],{"class":162,"line":233},[160,1730,279],{"class":219},[160,1732,1504],{"class":404},[160,1734,1735,1737,1739],{"class":162,"line":249},[160,1736,1587],{"class":166},[160,1738,288],{"class":236},[160,1740,1514],{"class":170},[160,1742,1743,1745,1747],{"class":162,"line":259},[160,1744,1596],{"class":166},[160,1746,288],{"class":236},[160,1748,1524],{"class":170},[160,1750,1751,1753,1755,1757,1759],{"class":162,"line":266},[160,1752,1605],{"class":166},[160,1754,288],{"class":236},[160,1756,939],{"class":219},[160,1758,1612],{"class":404},[160,1760,463],{"class":219},[160,1762,1763,1765,1767],{"class":162,"line":276},[160,1764,1619],{"class":166},[160,1766,288],{"class":236},[160,1768,1544],{"class":170},[160,1770,1771],{"class":162,"line":296},[160,1772,1549],{"class":219},[160,1774,1775,1777,1779],{"class":162,"line":324},[160,1776,252],{"class":219},[160,1778,282],{"class":404},[160,1780,230],{"class":219},[151,1782,1784],{"className":644,"code":1783,"language":646,"meta":156,"style":156},"const canvas = document.getElementById('hero')\n\nconst shader = await createShader(canvas, {\n  components: [\n    {\n      type: 'LinearGradient',\n      props: {\n        colorA: '#ff6b6b',\n        colorB: '#4ecdc4',\n        angle: 45,\n        colorSpace: 'oklch',\n      },\n    },\n  ],\n})\n",[10,1785,1786,1807,1811,1826,1830,1835,1845,1850,1860,1870,1879,1889,1894,1899,1903],{"__ignoreMap":156},[160,1787,1788,1790,1793,1795,1798,1800,1802,1804],{"class":162,"line":163},[160,1789,675],{"class":236},[160,1791,1792],{"class":404}," canvas",[160,1794,681],{"class":236},[160,1796,1797],{"class":219}," document.",[160,1799,693],{"class":166},[160,1801,696],{"class":219},[160,1803,699],{"class":170},[160,1805,1806],{"class":219},")\n",[160,1808,1809],{"class":162,"line":233},[160,1810,263],{"emptyLinePlaceholder":262},[160,1812,1813,1815,1817,1819,1821,1823],{"class":162,"line":249},[160,1814,675],{"class":236},[160,1816,678],{"class":404},[160,1818,681],{"class":236},[160,1820,684],{"class":236},[160,1822,687],{"class":166},[160,1824,1825],{"class":219},"(canvas, {\n",[160,1827,1828],{"class":162,"line":259},[160,1829,707],{"class":219},[160,1831,1832],{"class":162,"line":266},[160,1833,1834],{"class":219},"    {\n",[160,1836,1837,1840,1842],{"class":162,"line":276},[160,1838,1839],{"class":219},"      type: ",[160,1841,715],{"class":170},[160,1843,1844],{"class":219},",\n",[160,1846,1847],{"class":162,"line":296},[160,1848,1849],{"class":219},"      props: {\n",[160,1851,1852,1855,1858],{"class":162,"line":324},[160,1853,1854],{"class":219},"        colorA: ",[160,1856,1857],{"class":170},"'#ff6b6b'",[160,1859,1844],{"class":219},[160,1861,1862,1865,1868],{"class":162,"line":334},[160,1863,1864],{"class":219},"        colorB: ",[160,1866,1867],{"class":170},"'#4ecdc4'",[160,1869,1844],{"class":219},[160,1871,1872,1875,1877],{"class":162,"line":344},[160,1873,1874],{"class":219},"        angle: ",[160,1876,1612],{"class":404},[160,1878,1844],{"class":219},[160,1880,1881,1884,1887],{"class":162,"line":892},[160,1882,1883],{"class":219},"        colorSpace: ",[160,1885,1886],{"class":170},"'oklch'",[160,1888,1844],{"class":219},[160,1890,1891],{"class":162,"line":898},[160,1892,1893],{"class":219},"      },\n",[160,1895,1896],{"class":162,"line":914},[160,1897,1898],{"class":219},"    },\n",[160,1900,1901],{"class":162,"line":923},[160,1902,745],{"class":219},[160,1904,1906],{"class":162,"line":1905},15,[160,1907,750],{"class":219},[139,1909,1910,1913,1914,1919],{},[10,1911,1912],{},"colorSpace=\"oklch\""," blends the two colors through a perceptual color space, so the middle of the gradient stays bright instead of going gray. Every component's props, with defaults and ranges, are in the ",[1915,1916,1918],"a",{"href":1917},"\u002Fdocs\u002Fcomponents","component docs",", and the design editor exports any effect you build as code.",[143,1921,1923],{"id":1922},"driving-a-prop-from-state","Driving a prop from state",[139,1925,1926,1927,1930,1931,1934],{},"Props accept your framework's state like any other prop. In plain JavaScript, give the component an ",[10,1928,1929],{},"id"," and pass new props to ",[10,1932,1933],{},"shader.update()",". We'll wire the gradient's angle to a range input:",[205,1936,1937,2122,2370,2492,2718],{":tabs":207},[151,1938,1940],{"className":210,"code":1939,"language":212,"meta":156,"style":156},"\u003Cscript setup>\nimport { ref } from 'vue'\nimport { Shader, LinearGradient } from 'shaders\u002Fvue'\n\nconst angle = ref(0)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CShader class=\"w-full h-64\">\n    \u003CLinearGradient color-a=\"#ff6b6b\" color-b=\"#4ecdc4\" :angle=\"angle\" \u002F>\n  \u003C\u002FShader>\n\n  \u003Cinput v-model.number=\"angle\" type=\"range\" min=\"0\" max=\"360\" \u002F>\n\u003C\u002Ftemplate>\n",[10,1941,1942,1952,1964,1975,1979,1998,2006,2010,2018,2032,2062,2070,2074,2114],{"__ignoreMap":156},[160,1943,1944,1946,1948,1950],{"class":162,"line":163},[160,1945,220],{"class":219},[160,1947,224],{"class":223},[160,1949,227],{"class":166},[160,1951,230],{"class":219},[160,1953,1954,1956,1959,1961],{"class":162,"line":233},[160,1955,237],{"class":236},[160,1957,1958],{"class":219}," { ref } ",[160,1960,243],{"class":236},[160,1962,1963],{"class":170}," 'vue'\n",[160,1965,1966,1968,1971,1973],{"class":162,"line":249},[160,1967,237],{"class":236},[160,1969,1970],{"class":219}," { Shader, LinearGradient } ",[160,1972,243],{"class":236},[160,1974,246],{"class":170},[160,1976,1977],{"class":162,"line":259},[160,1978,263],{"emptyLinePlaceholder":262},[160,1980,1981,1983,1986,1988,1991,1993,1996],{"class":162,"line":266},[160,1982,675],{"class":236},[160,1984,1985],{"class":404}," angle",[160,1987,681],{"class":236},[160,1989,1990],{"class":166}," ref",[160,1992,696],{"class":219},[160,1994,1995],{"class":404},"0",[160,1997,1806],{"class":219},[160,1999,2000,2002,2004],{"class":162,"line":276},[160,2001,252],{"class":219},[160,2003,224],{"class":223},[160,2005,230],{"class":219},[160,2007,2008],{"class":162,"line":296},[160,2009,263],{"emptyLinePlaceholder":262},[160,2011,2012,2014,2016],{"class":162,"line":324},[160,2013,220],{"class":219},[160,2015,271],{"class":223},[160,2017,230],{"class":219},[160,2019,2020,2022,2024,2026,2028,2030],{"class":162,"line":334},[160,2021,279],{"class":219},[160,2023,282],{"class":223},[160,2025,285],{"class":166},[160,2027,288],{"class":219},[160,2029,291],{"class":170},[160,2031,230],{"class":219},[160,2033,2034,2036,2038,2040,2042,2045,2047,2049,2052,2055,2057,2060],{"class":162,"line":344},[160,2035,299],{"class":219},[160,2037,302],{"class":223},[160,2039,305],{"class":166},[160,2041,288],{"class":219},[160,2043,2044],{"class":170},"\"#ff6b6b\"",[160,2046,313],{"class":166},[160,2048,288],{"class":219},[160,2050,2051],{"class":170},"\"#4ecdc4\"",[160,2053,2054],{"class":166}," :angle",[160,2056,288],{"class":219},[160,2058,2059],{"class":170},"\"angle\"",[160,2061,321],{"class":219},[160,2063,2064,2066,2068],{"class":162,"line":892},[160,2065,337],{"class":219},[160,2067,282],{"class":223},[160,2069,230],{"class":219},[160,2071,2072],{"class":162,"line":898},[160,2073,263],{"emptyLinePlaceholder":262},[160,2075,2076,2078,2081,2084,2086,2088,2091,2093,2096,2099,2101,2104,2107,2109,2112],{"class":162,"line":914},[160,2077,279],{"class":219},[160,2079,2080],{"class":223},"input",[160,2082,2083],{"class":166}," v-model.number",[160,2085,288],{"class":219},[160,2087,2059],{"class":170},[160,2089,2090],{"class":166}," type",[160,2092,288],{"class":219},[160,2094,2095],{"class":170},"\"range\"",[160,2097,2098],{"class":166}," min",[160,2100,288],{"class":219},[160,2102,2103],{"class":170},"\"0\"",[160,2105,2106],{"class":166}," max",[160,2108,288],{"class":219},[160,2110,2111],{"class":170},"\"360\"",[160,2113,321],{"class":219},[160,2115,2116,2118,2120],{"class":162,"line":923},[160,2117,252],{"class":219},[160,2119,271],{"class":223},[160,2121,230],{"class":219},[151,2123,2125],{"className":353,"code":2124,"language":355,"meta":156,"style":156},"import { useState } from 'react'\nimport { Shader, LinearGradient } from 'shaders\u002Freact'\n\nexport default function GradientDial() {\n  const [angle, setAngle] = useState(0)\n\n  return (\n    \u003C>\n      \u003CShader className=\"w-full h-64\">\n        \u003CLinearGradient colorA=\"#ff6b6b\" colorB=\"#4ecdc4\" angle={angle} \u002F>\n      \u003C\u002FShader>\n\n      \u003Cinput\n        type=\"range\"\n        min={0}\n        max={360}\n        value={angle}\n        onChange={e => setAngle(Number(e.target.value))}\n      \u002F>\n    \u003C\u002F>\n  )\n}\n",[10,2126,2127,2139,2149,2153,2166,2196,2200,2206,2211,2225,2251,2260,2264,2271,2281,2294,2309,2320,2348,2354,2360,2365],{"__ignoreMap":156},[160,2128,2129,2131,2134,2136],{"class":162,"line":163},[160,2130,237],{"class":236},[160,2132,2133],{"class":219}," { useState } ",[160,2135,243],{"class":236},[160,2137,2138],{"class":170}," 'react'\n",[160,2140,2141,2143,2145,2147],{"class":162,"line":233},[160,2142,237],{"class":236},[160,2144,1970],{"class":219},[160,2146,243],{"class":236},[160,2148,368],{"class":170},[160,2150,2151],{"class":162,"line":249},[160,2152,263],{"emptyLinePlaceholder":262},[160,2154,2155,2157,2159,2161,2164],{"class":162,"line":259},[160,2156,377],{"class":236},[160,2158,380],{"class":236},[160,2160,383],{"class":236},[160,2162,2163],{"class":166}," GradientDial",[160,2165,389],{"class":219},[160,2167,2168,2171,2174,2177,2179,2182,2185,2187,2190,2192,2194],{"class":162,"line":266},[160,2169,2170],{"class":236},"  const",[160,2172,2173],{"class":219}," [",[160,2175,2176],{"class":404},"angle",[160,2178,181],{"class":219},[160,2180,2181],{"class":404},"setAngle",[160,2183,2184],{"class":219},"] ",[160,2186,288],{"class":236},[160,2188,2189],{"class":166}," useState",[160,2191,696],{"class":219},[160,2193,1995],{"class":404},[160,2195,1806],{"class":219},[160,2197,2198],{"class":162,"line":276},[160,2199,263],{"emptyLinePlaceholder":262},[160,2201,2202,2204],{"class":162,"line":296},[160,2203,394],{"class":236},[160,2205,397],{"class":219},[160,2207,2208],{"class":162,"line":324},[160,2209,2210],{"class":219},"    \u003C>\n",[160,2212,2213,2215,2217,2219,2221,2223],{"class":162,"line":334},[160,2214,418],{"class":219},[160,2216,282],{"class":404},[160,2218,407],{"class":166},[160,2220,288],{"class":236},[160,2222,291],{"class":170},[160,2224,230],{"class":219},[160,2226,2227,2230,2232,2234,2236,2238,2240,2242,2244,2246,2248],{"class":162,"line":344},[160,2228,2229],{"class":219},"        \u003C",[160,2231,302],{"class":404},[160,2233,423],{"class":166},[160,2235,288],{"class":236},[160,2237,2044],{"class":170},[160,2239,430],{"class":166},[160,2241,288],{"class":236},[160,2243,2051],{"class":170},[160,2245,1985],{"class":166},[160,2247,288],{"class":236},[160,2249,2250],{"class":219},"{angle} \u002F>\n",[160,2252,2253,2256,2258],{"class":162,"line":892},[160,2254,2255],{"class":219},"      \u003C\u002F",[160,2257,282],{"class":404},[160,2259,230],{"class":219},[160,2261,2262],{"class":162,"line":898},[160,2263,263],{"emptyLinePlaceholder":262},[160,2265,2266,2268],{"class":162,"line":914},[160,2267,418],{"class":219},[160,2269,2270],{"class":223},"input\n",[160,2272,2273,2276,2278],{"class":162,"line":923},[160,2274,2275],{"class":166},"        type",[160,2277,288],{"class":236},[160,2279,2280],{"class":170},"\"range\"\n",[160,2282,2283,2286,2288,2290,2292],{"class":162,"line":1905},[160,2284,2285],{"class":166},"        min",[160,2287,288],{"class":236},[160,2289,939],{"class":219},[160,2291,1995],{"class":404},[160,2293,463],{"class":219},[160,2295,2297,2300,2302,2304,2307],{"class":162,"line":2296},16,[160,2298,2299],{"class":166},"        max",[160,2301,288],{"class":236},[160,2303,939],{"class":219},[160,2305,2306],{"class":404},"360",[160,2308,463],{"class":219},[160,2310,2312,2315,2317],{"class":162,"line":2311},17,[160,2313,2314],{"class":166},"        value",[160,2316,288],{"class":236},[160,2318,2319],{"class":219},"{angle}\n",[160,2321,2323,2326,2328,2330,2334,2337,2340,2342,2345],{"class":162,"line":2322},18,[160,2324,2325],{"class":166},"        onChange",[160,2327,288],{"class":236},[160,2329,939],{"class":219},[160,2331,2333],{"class":2332},"s9osk","e",[160,2335,2336],{"class":236}," =>",[160,2338,2339],{"class":166}," setAngle",[160,2341,696],{"class":219},[160,2343,2344],{"class":166},"Number",[160,2346,2347],{"class":219},"(e.target.value))}\n",[160,2349,2351],{"class":162,"line":2350},19,[160,2352,2353],{"class":219},"      \u002F>\n",[160,2355,2357],{"class":162,"line":2356},20,[160,2358,2359],{"class":219},"    \u003C\u002F>\n",[160,2361,2363],{"class":162,"line":2362},21,[160,2364,458],{"class":219},[160,2366,2368],{"class":162,"line":2367},22,[160,2369,463],{"class":219},[151,2371,2373],{"className":466,"code":2372,"language":468,"meta":156,"style":156},"\u003Cscript>\n  import { Shader, LinearGradient } from 'shaders\u002Fsvelte'\n\n  let angle = $state(0)\n\u003C\u002Fscript>\n\n\u003CShader class=\"w-full h-64\">\n  \u003CLinearGradient colorA=\"#ff6b6b\" colorB=\"#4ecdc4\" {angle} \u002F>\n\u003C\u002FShader>\n\n\u003Cinput type=\"range\" min=\"0\" max=\"360\" bind:value={angle} \u002F>\n",[10,2374,2375,2383,2388,2392,2397,2405,2409,2423,2444,2452,2456],{"__ignoreMap":156},[160,2376,2377,2379,2381],{"class":162,"line":163},[160,2378,220],{"class":219},[160,2380,224],{"class":223},[160,2382,230],{"class":219},[160,2384,2385],{"class":162,"line":233},[160,2386,2387],{"class":219},"  import { Shader, LinearGradient } from 'shaders\u002Fsvelte'\n",[160,2389,2390],{"class":162,"line":249},[160,2391,263],{"emptyLinePlaceholder":262},[160,2393,2394],{"class":162,"line":259},[160,2395,2396],{"class":219},"  let angle = $state(0)\n",[160,2398,2399,2401,2403],{"class":162,"line":266},[160,2400,252],{"class":219},[160,2402,224],{"class":223},[160,2404,230],{"class":219},[160,2406,2407],{"class":162,"line":276},[160,2408,263],{"emptyLinePlaceholder":262},[160,2410,2411,2413,2415,2417,2419,2421],{"class":162,"line":296},[160,2412,220],{"class":219},[160,2414,282],{"class":404},[160,2416,285],{"class":166},[160,2418,288],{"class":236},[160,2420,291],{"class":170},[160,2422,230],{"class":219},[160,2424,2425,2427,2429,2431,2433,2435,2437,2439,2441],{"class":162,"line":324},[160,2426,279],{"class":219},[160,2428,302],{"class":404},[160,2430,423],{"class":166},[160,2432,288],{"class":236},[160,2434,2044],{"class":170},[160,2436,430],{"class":166},[160,2438,288],{"class":236},[160,2440,2051],{"class":170},[160,2442,2443],{"class":219}," {angle} \u002F>\n",[160,2445,2446,2448,2450],{"class":162,"line":334},[160,2447,252],{"class":219},[160,2449,282],{"class":404},[160,2451,230],{"class":219},[160,2453,2454],{"class":162,"line":344},[160,2455,263],{"emptyLinePlaceholder":262},[160,2457,2458,2460,2462,2464,2466,2468,2470,2472,2474,2476,2478,2480,2483,2485,2488,2490],{"class":162,"line":892},[160,2459,220],{"class":219},[160,2461,2080],{"class":223},[160,2463,2090],{"class":166},[160,2465,288],{"class":236},[160,2467,2095],{"class":170},[160,2469,2098],{"class":166},[160,2471,288],{"class":236},[160,2473,2103],{"class":170},[160,2475,2106],{"class":166},[160,2477,288],{"class":236},[160,2479,2111],{"class":170},[160,2481,2482],{"class":166}," bind",[160,2484,801],{"class":219},[160,2486,2487],{"class":166},"value",[160,2489,288],{"class":236},[160,2491,2250],{"class":219},[151,2493,2495],{"className":466,"code":2494,"language":468,"meta":156,"style":156},"import { createSignal } from 'solid-js'\nimport { Shader, LinearGradient } from 'shaders\u002Fsolid'\n\nexport default function GradientDial() {\n  const [angle, setAngle] = createSignal(0)\n\n  return (\n    \u003C>\n      \u003CShader class=\"w-full h-64\">\n        \u003CLinearGradient colorA=\"#ff6b6b\" colorB=\"#4ecdc4\" angle={angle()} \u002F>\n      \u003C\u002FShader>\n\n      \u003Cinput\n        type=\"range\"\n        min={0}\n        max={360}\n        value={angle()}\n        onInput={e => setAngle(Number(e.currentTarget.value))}\n      \u002F>\n    \u003C\u002F>\n  )\n}\n",[10,2496,2497,2509,2519,2523,2535,2560,2564,2570,2574,2588,2617,2625,2629,2635,2643,2655,2667,2680,2702,2706,2710,2714],{"__ignoreMap":156},[160,2498,2499,2501,2504,2506],{"class":162,"line":163},[160,2500,237],{"class":236},[160,2502,2503],{"class":219}," { createSignal } ",[160,2505,243],{"class":236},[160,2507,2508],{"class":170}," 'solid-js'\n",[160,2510,2511,2513,2515,2517],{"class":162,"line":233},[160,2512,237],{"class":236},[160,2514,1970],{"class":219},[160,2516,243],{"class":236},[160,2518,561],{"class":170},[160,2520,2521],{"class":162,"line":249},[160,2522,263],{"emptyLinePlaceholder":262},[160,2524,2525,2527,2529,2531,2533],{"class":162,"line":259},[160,2526,377],{"class":236},[160,2528,380],{"class":236},[160,2530,383],{"class":236},[160,2532,2163],{"class":166},[160,2534,389],{"class":219},[160,2536,2537,2539,2541,2543,2545,2547,2549,2551,2554,2556,2558],{"class":162,"line":266},[160,2538,2170],{"class":236},[160,2540,2173],{"class":219},[160,2542,2176],{"class":404},[160,2544,181],{"class":219},[160,2546,2181],{"class":404},[160,2548,2184],{"class":219},[160,2550,288],{"class":236},[160,2552,2553],{"class":166}," createSignal",[160,2555,696],{"class":219},[160,2557,1995],{"class":404},[160,2559,1806],{"class":219},[160,2561,2562],{"class":162,"line":276},[160,2563,263],{"emptyLinePlaceholder":262},[160,2565,2566,2568],{"class":162,"line":296},[160,2567,394],{"class":236},[160,2569,397],{"class":219},[160,2571,2572],{"class":162,"line":324},[160,2573,2210],{"class":219},[160,2575,2576,2578,2580,2582,2584,2586],{"class":162,"line":334},[160,2577,418],{"class":219},[160,2579,282],{"class":404},[160,2581,285],{"class":166},[160,2583,288],{"class":236},[160,2585,291],{"class":170},[160,2587,230],{"class":219},[160,2589,2590,2592,2594,2596,2598,2600,2602,2604,2606,2608,2610,2612,2614],{"class":162,"line":344},[160,2591,2229],{"class":219},[160,2593,302],{"class":404},[160,2595,423],{"class":166},[160,2597,288],{"class":236},[160,2599,2044],{"class":170},[160,2601,430],{"class":166},[160,2603,288],{"class":236},[160,2605,2051],{"class":170},[160,2607,1985],{"class":166},[160,2609,288],{"class":236},[160,2611,939],{"class":219},[160,2613,2176],{"class":166},[160,2615,2616],{"class":219},"()} \u002F>\n",[160,2618,2619,2621,2623],{"class":162,"line":892},[160,2620,2255],{"class":219},[160,2622,282],{"class":404},[160,2624,230],{"class":219},[160,2626,2627],{"class":162,"line":898},[160,2628,263],{"emptyLinePlaceholder":262},[160,2630,2631,2633],{"class":162,"line":914},[160,2632,418],{"class":219},[160,2634,2270],{"class":223},[160,2636,2637,2639,2641],{"class":162,"line":923},[160,2638,2275],{"class":166},[160,2640,288],{"class":236},[160,2642,2280],{"class":170},[160,2644,2645,2647,2649,2651,2653],{"class":162,"line":1905},[160,2646,2285],{"class":166},[160,2648,288],{"class":236},[160,2650,939],{"class":219},[160,2652,1995],{"class":404},[160,2654,463],{"class":219},[160,2656,2657,2659,2661,2663,2665],{"class":162,"line":2296},[160,2658,2299],{"class":166},[160,2660,288],{"class":236},[160,2662,939],{"class":219},[160,2664,2306],{"class":404},[160,2666,463],{"class":219},[160,2668,2669,2671,2673,2675,2677],{"class":162,"line":2311},[160,2670,2314],{"class":166},[160,2672,288],{"class":236},[160,2674,939],{"class":219},[160,2676,2176],{"class":166},[160,2678,2679],{"class":219},"()}\n",[160,2681,2682,2685,2687,2689,2691,2693,2695,2697,2699],{"class":162,"line":2322},[160,2683,2684],{"class":166},"        onInput",[160,2686,288],{"class":236},[160,2688,939],{"class":219},[160,2690,2333],{"class":2332},[160,2692,2336],{"class":236},[160,2694,2339],{"class":166},[160,2696,696],{"class":219},[160,2698,2344],{"class":166},[160,2700,2701],{"class":219},"(e.currentTarget.value))}\n",[160,2703,2704],{"class":162,"line":2350},[160,2705,2353],{"class":219},[160,2707,2708],{"class":162,"line":2356},[160,2709,2359],{"class":219},[160,2711,2712],{"class":162,"line":2362},[160,2713,458],{"class":219},[160,2715,2716],{"class":162,"line":2367},[160,2717,463],{"class":219},[151,2719,2721],{"className":644,"code":2720,"language":646,"meta":156,"style":156},"\u002F\u002F \u003Cinput id=\"angle\" type=\"range\" min=\"0\" max=\"360\" value=\"0\" \u002F>\nconst canvas = document.getElementById('hero')\n\nconst shader = await createShader(canvas, {\n  components: [\n    { type: 'LinearGradient', id: 'gradient', props: { colorA: '#ff6b6b', colorB: '#4ecdc4', angle: 0 } },\n  ],\n})\n\ndocument.getElementById('angle').addEventListener('input', e => {\n  shader.update('gradient', { angle: Number(e.target.value) })\n})\n",[10,2722,2723,2728,2746,2750,2764,2768,2795,2799,2803,2807,2839,2859],{"__ignoreMap":156},[160,2724,2725],{"class":162,"line":163},[160,2726,2727],{"class":653},"\u002F\u002F \u003Cinput id=\"angle\" type=\"range\" min=\"0\" max=\"360\" value=\"0\" \u002F>\n",[160,2729,2730,2732,2734,2736,2738,2740,2742,2744],{"class":162,"line":233},[160,2731,675],{"class":236},[160,2733,1792],{"class":404},[160,2735,681],{"class":236},[160,2737,1797],{"class":219},[160,2739,693],{"class":166},[160,2741,696],{"class":219},[160,2743,699],{"class":170},[160,2745,1806],{"class":219},[160,2747,2748],{"class":162,"line":249},[160,2749,263],{"emptyLinePlaceholder":262},[160,2751,2752,2754,2756,2758,2760,2762],{"class":162,"line":259},[160,2753,675],{"class":236},[160,2755,678],{"class":404},[160,2757,681],{"class":236},[160,2759,684],{"class":236},[160,2761,687],{"class":166},[160,2763,1825],{"class":219},[160,2765,2766],{"class":162,"line":266},[160,2767,707],{"class":219},[160,2769,2770,2772,2774,2777,2780,2782,2784,2786,2788,2791,2793],{"class":162,"line":276},[160,2771,712],{"class":219},[160,2773,715],{"class":170},[160,2775,2776],{"class":219},", id: ",[160,2778,2779],{"class":170},"'gradient'",[160,2781,718],{"class":219},[160,2783,1857],{"class":170},[160,2785,724],{"class":219},[160,2787,1867],{"class":170},[160,2789,2790],{"class":219},", angle: ",[160,2792,1995],{"class":404},[160,2794,730],{"class":219},[160,2796,2797],{"class":162,"line":296},[160,2798,745],{"class":219},[160,2800,2801],{"class":162,"line":324},[160,2802,750],{"class":219},[160,2804,2805],{"class":162,"line":334},[160,2806,263],{"emptyLinePlaceholder":262},[160,2808,2809,2812,2814,2816,2819,2822,2825,2827,2830,2832,2834,2836],{"class":162,"line":344},[160,2810,2811],{"class":219},"document.",[160,2813,693],{"class":166},[160,2815,696],{"class":219},[160,2817,2818],{"class":170},"'angle'",[160,2820,2821],{"class":219},").",[160,2823,2824],{"class":166},"addEventListener",[160,2826,696],{"class":219},[160,2828,2829],{"class":170},"'input'",[160,2831,181],{"class":219},[160,2833,2333],{"class":2332},[160,2835,2336],{"class":236},[160,2837,2838],{"class":219}," {\n",[160,2840,2841,2844,2847,2849,2851,2854,2856],{"class":162,"line":892},[160,2842,2843],{"class":219},"  shader.",[160,2845,2846],{"class":166},"update",[160,2848,696],{"class":219},[160,2850,2779],{"class":170},[160,2852,2853],{"class":219},", { angle: ",[160,2855,2344],{"class":166},[160,2857,2858],{"class":219},"(e.target.value) })\n",[160,2860,2861],{"class":162,"line":898},[160,2862,750],{"class":219},[139,2864,2865,2866,2868],{},"Drag the slider and the gradient turns on the next frame. Changing ",[10,2867,2176],{}," updates a value on the GPU; the effect doesn't recompile.",[143,2870,2872],{"id":2871},"cleaning-up","Cleaning up",[139,2874,2875,2876,2878,2879,2882],{},"The framework components clean up after themselves: when ",[10,2877,762],{}," unmounts, rendering stops and its GPU memory is freed. In plain JavaScript, call ",[10,2880,2881],{},"destroy()"," when the canvas leaves the page, for example on a route change in a single-page app:",[151,2884,2886],{"className":644,"code":2885,"language":646,"meta":156,"style":156},"shader.destroy()\n",[10,2887,2888],{"__ignoreMap":156},[160,2889,2890,2893,2896],{"class":162,"line":163},[160,2891,2892],{"class":219},"shader.",[160,2894,2895],{"class":166},"destroy",[160,2897,2898],{"class":219},"()\n",[143,2900,2902],{"id":2901},"using-server-rendering","Using server rendering",[139,2904,2905],{},"Shaders needs a browser with a GPU, so it can't render on the server. Each meta-framework handles this differently:",[2907,2908,2909,2927,2943,2956],"ul",{},[2910,2911,2912,2915,2916,2919,2920,2922,2923,196],"li",{},[769,2913,2914],{},"Next.js",": put ",[10,2917,2918],{},"'use client'"," at the top of any file that renders a ",[10,2921,762],{},". See ",[1915,2924,2926],{"href":2925},"\u002Fdocs\u002Fguide\u002Fssr#using-nextjs","Using Next.js",[2910,2928,2929,2932,2933,2935,2936,2922,2939,196],{},[769,2930,2931],{},"Nuxt",": wrap the ",[10,2934,762],{}," in ",[10,2937,2938],{},"\u003CClientOnly>",[1915,2940,2942],{"href":2941},"\u002Fdocs\u002Fguide\u002Fssr#using-nuxt","Using Nuxt",[2910,2944,2945,2948,2949,2951,2952,196],{},[769,2946,2947],{},"SvelteKit",": nothing to do, because ",[10,2950,762],{}," renders nothing on the server and starts on the client. See ",[1915,2953,2955],{"href":2954},"\u002Fdocs\u002Fguide\u002Fssr#using-sveltekit","Using SvelteKit",[2910,2957,2958,2961,2962,2964,2965,2922,2968,196],{},[769,2959,2960],{},"SolidStart",": load the component that renders a ",[10,2963,762],{}," with ",[10,2966,2967],{},"clientOnly",[1915,2969,2971],{"href":2970},"\u002Fdocs\u002Fguide\u002Fssr#using-solidstart","Using SolidStart",[143,2973,2975],{"id":2974},"next-steps","Next steps",[2907,2977,2978,2983,2988,2993],{},[2910,2979,2980,2982],{},[1915,2981,17],{"href":16},": stack and nest components, blend and mask layers.",[2910,2984,2985,2987],{},[1915,2986,33],{"href":32},": place the canvas behind or around your UI.",[2910,2989,2990,2992],{},[1915,2991,25],{"href":24},": bind state to props and animate them.",[2910,2994,2995,2998],{},[1915,2996,2997],{"href":1917},"Component docs",": every component with a live preview and its props.",[800,3000,3001],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}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 .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":156,"searchDepth":233,"depth":233,"links":3003},[3004,3005,3006,3007,3008,3009,3010,3011],{"id":145,"depth":233,"text":146},{"id":199,"depth":233,"text":200},{"id":782,"depth":233,"text":783},{"id":1465,"depth":233,"text":1466},{"id":1922,"depth":233,"text":1923},{"id":2871,"depth":233,"text":2872},{"id":2901,"depth":233,"text":2902},{"id":2974,"depth":233,"text":2975},"md","rocket",{},{"title":13,"description":14},"docs\u002Fguide\u002F01.quickstart","9BxC9w1t719fzna0N85gPJiqJ2fsWrq3sfDCcgmDZPI"]