[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"github-stars":3,"guide-nav":5,"doc-\u002Fdocs\u002Fprimitives\u002Ffigures":129},{"stars":4},5505,[6,11,15,19,23,27,31,35,39,43,47,51,55,59,63,67,72,76,80,84,88,93,97,101,105,109,113,117,121,125],{"path":7,"title":8,"description":9,"category":10},"\u002Fdocs\u002Fguide","Getting started","Shaders is a library of GPU effect components for Vue, React, Svelte, Solid, JavaScript and Framer, with a design editor for building with them.","code",{"path":12,"title":13,"description":14,"category":10},"\u002Fdocs\u002Fguide\u002Fquickstart","Quickstart","Install Shaders, render your first effect, and drive a prop from state.",{"path":16,"title":17,"description":18,"category":10},"\u002Fdocs\u002Fguide\u002Fcomposing-effects","Composing effects","Stack components as layers and nest them to control which layers an effect touches.",{"path":20,"title":21,"description":22,"category":10},"\u002Fdocs\u002Fguide\u002Fblending-masking","Blending and masking","Control how a layer mixes with the layers below it, and reveal one layer through another.",{"path":24,"title":25,"description":26,"category":10},"\u002Fdocs\u002Fguide\u002Fprops-reactivity","Props and reactivity","Bind props to your framework's state so effects update when it changes, and animate props with an animation library.",{"path":28,"title":29,"description":30,"category":10},"\u002Fdocs\u002Fguide\u002Fdynamic-props","Dynamic props","Drive any numeric or position prop from time, the cursor, or another layer, without writing animation code.",{"path":32,"title":33,"description":34,"category":10},"\u002Fdocs\u002Fguide\u002Flayout-positioning","Layout and positioning","Size and place a shader in your page with CSS, as a background, a fill, or an inline block.",{"path":36,"title":37,"description":38,"category":10},"\u002Fdocs\u002Fguide\u002Fsizing-and-units","Sizing and units","Size and place layers in CSS units (px, %, vw, rem, and canvas units) that stay correct as the canvas and window resize.",{"path":40,"title":41,"description":42,"category":10},"\u002Fdocs\u002Fguide\u002Ftransforms","Transforms","Position, size, and rotate any layer inside the canvas with a bounding box, in any CSS unit.",{"path":44,"title":45,"description":46,"category":10},"\u002Fdocs\u002Fguide\u002Fshape-effects","Shape effects","Pick the 2D, 3D or custom SVG shape that Glass, Neon, Emboss and other shape effects draw inside.",{"path":48,"title":49,"description":50,"category":10},"\u002Fdocs\u002Fguide\u002Fcolor-space","Color space","Match colors to your design tool with the output color space, and keep bright layers from clipping with tone mapping.",{"path":52,"title":53,"description":54,"category":10},"\u002Fdocs\u002Fguide\u002Fhooks-events","Hooks and events","Run code when an effect is ready to show, and show a fallback when the GPU can't run it.",{"path":56,"title":57,"description":58,"category":10},"\u002Fdocs\u002Fguide\u002Fperformance","Performance","Learn what makes an effect expensive on the GPU and how to keep it inside the frame budget.",{"path":60,"title":61,"description":62,"category":10},"\u002Fdocs\u002Fguide\u002Fcustom-shaders","Custom components","Write your own component in TypeScript, use it like any component in the library, and write WGSL by hand when you need to.",{"path":64,"title":65,"description":66,"category":10},"\u002Fdocs\u002Fguide\u002Ftelemetry","Telemetry","The `\u003CShader>` component occasionally sends an anonymous performance report to help us improve the engine over time.",{"path":68,"title":69,"description":70,"category":71},"\u002Fdocs\u002Fguide\u002Fmcp","Shaders MCP","Connect your AI coding agent to Shaders so it can find, install and edit effects in your codebase.","workflows",{"path":73,"title":74,"description":75,"category":71},"\u002Fdocs\u002Fguide\u002Fcli","Shaders CLI","Install your own shaders and Pro shaders into your codebase as component files, and keep them in sync with the design editor.",{"path":77,"title":78,"description":79,"category":71},"\u002Fdocs\u002Fguide\u002Fagent-skill","Agent skill","Give your coding agent a skill that teaches it to build with Shaders components, the CLI and Pro shaders.",{"path":81,"title":82,"description":83,"category":10},"\u002Fdocs\u002Fguide\u002Fvideo-rendering","Rendering to video","Turn a shader effect into a video file, from the design editor or from a frame-by-frame pipeline such as Remotion, Hyperframes or Puppeteer.",{"path":85,"title":86,"description":87,"category":10},"\u002Fdocs\u002Fguide\u002Fssr","Server rendering","Render Shaders in Next.js, Nuxt, SvelteKit, SolidStart and other SSR apps by keeping each shader on the client.",{"path":89,"title":90,"description":91,"category":92},"\u002Fdocs\u002Fguide\u002Fquick-tour-of-the-design-editor","Quick tour of the design editor","A short walkthrough of the full Shaders workflow, from designing on the infinite canvas to exporting code.","editor",{"path":94,"title":95,"description":96,"category":92},"\u002Fdocs\u002Fguide\u002Fintro-to-the-interface","Intro to the interface","A tour of the design editor interface: the canvas, layers, the Properties panel, and the ways to share and export.",{"path":98,"title":99,"description":100,"category":92},"\u002Fdocs\u002Fguide\u002Fcomposing-your-first-shader-effect","Composing your first shader effect","Building a first shader effect in the design editor by stacking and nesting components as layers.",{"path":102,"title":103,"description":104,"category":92},"\u002Fdocs\u002Fguide\u002Fmasking-and-blending","Masking and blending","How blend modes and masks combine components in the design editor.",{"path":106,"title":107,"description":108,"category":92},"\u002Fdocs\u002Fguide\u002Fdynamic-prop-mapping","Dynamic prop mapping","Turning static props into dynamic ones in the design editor: mapping one layer's output into another's prop, following the cursor, or animating automatically.",{"path":110,"title":111,"description":112,"category":92},"\u002Fdocs\u002Fguide\u002Fcustom-media-and-transformations","Custom media and transformations","Uploading images, videos, and SVG files to the media gallery, adding them to a composition, and placing them with transformations.",{"path":114,"title":115,"description":116,"category":92},"\u002Fdocs\u002Fguide\u002Finstalling-a-shader-via-mcp","Installing a shader via MCP","Installing a shader from the design editor into a hero section with the Shaders MCP.",{"path":118,"title":119,"description":120,"category":92},"\u002Fdocs\u002Fguide\u002Fexploring-shape-effects","Exploring shape effects","Applying shape effects such as liquid glass, liquid metal, and glowing edges to built-in shapes and your own SVG.",{"path":122,"title":123,"description":124,"category":92},"\u002Fdocs\u002Fguide\u002Fglass-component-spotlight","Component spotlight: Glass","A short look at the Glass component and the liquid-glass look it creates.",{"path":126,"title":127,"description":128,"category":92},"\u002Fdocs\u002Fguide\u002Fdigital-looks-component-spotlight","Component spotlight: Digital looks","A look at the digital stylization components for glitchy, futuristic, or technical effects.",{"id":130,"title":131,"body":132,"categoryId":801,"categorySlug":801,"categoryTitle":802,"curated":260,"description":803,"editUrl":804,"extension":805,"group":806,"groupTitle":807,"kind":802,"meta":808,"navigation":260,"path":809,"seo":810,"sourceUrl":811,"stem":812,"wordCount":257,"__hash__":813},"primitives\u002Fdocs\u002Fprimitives\u002F9.figures\u002Findex.md","Figures & strokes",{"type":133,"value":134,"toc":795},"minimark",[135,139,143,154,183,188,235,239,710,714,765,769,791],[136,137,131],"h1",{"id":138},"figures-strokes",[140,141,142],"p",{},"Drawn lines: a straight segment and a traveling sine wave. Each word binds your props and\nreturns a paint that draws the stroke in one color prop with an antialiased edge and leaves\neverything else transparent, so it layers cleanly over what sits behind it.",[140,144,145,146,149,150,153],{},"Lengths are fractions of the canvas height, so a stroke keeps its weight when the canvas\nresizes. Endpoints and centers are position props made with ",[10,147,148],{},"transformPosition",". The result\ngoes in the definition's ",[10,151,152],{},"paint:"," field.",[155,156,161],"pre",{"className":157,"code":158,"language":159,"meta":160,"style":160},"language-ts shiki shiki-themes github-dark","import {figures} from 'shaders\u002Fstd'\n","ts","",[10,162,163],{"__ignoreMap":160},[164,165,168,172,176,179],"span",{"class":166,"line":167},"line",1,[164,169,171],{"class":170},"snl16","import",[164,173,175],{"class":174},"s95oV"," {figures} ",[164,177,178],{"class":170},"from",[164,180,182],{"class":181},"sU2Wk"," 'shaders\u002Fstd'\n",[184,185,187],"h2",{"id":186},"reach-for-it-when","Reach for it when",[189,190,191,204],"table",{},[192,193,194],"thead",{},[195,196,197,201],"tr",{},[198,199,200],"th",{},"When you need",[198,202,203],{},"Use",[205,206,207,222],"tbody",{},[195,208,209,213],{},[210,211,212],"td",{},"a line between two draggable points, solid, dashed or dotted",[210,214,215],{},[216,217,219],"a",{"href":218},"\u002Fdocs\u002Fprimitives\u002Ffigures\u002Fstrokedsegment",[10,220,221],{},"strokedSegment",[195,223,224,227],{},[210,225,226],{},"a wavy line that ripples along itself",[210,228,229],{},[216,230,232],{"href":231},"\u002Fdocs\u002Fprimitives\u002Ffigures\u002Fsinestroke",[10,233,234],{},"sineStroke",[184,236,238],{"id":237},"example","Example",[155,240,242],{"className":157,"code":241,"language":159,"meta":160,"style":160},"import {defineShader, p, figures, transformColor, transformPosition} from 'shaders\u002Fstd'\n\n\u002F\u002F A dashed line with round ends. The style select maps its labels to the numbers the word takes.\nexport const DashedLine = defineShader({\n  name: 'DashedLine',\n  props: {\n    color: {default: '#ffffff', transform: transformColor},\n    pointA: {default: {x: 0.2, y: 0.5}, transform: transformPosition},\n    pointB: {default: {x: 0.8, y: 0.5}, transform: transformPosition},\n    thickness: {default: 0.01, ui: {type: 'range', min: 0, max: 0.25, step: 0.001}},\n    style: {\n      default: 'dashed',\n      transform: (value: string) => ({solid: 0, dashed: 1, dotted: 2} as Record\u003Cstring, number>)[value] ?? 0,\n      ui: {type: 'select', options: [{label: 'Solid', value: 'solid'}, {label: 'Dashed', value: 'dashed'}, {label: 'Dotted', value: 'dotted'}]},\n    },\n    dashLength: {default: 0.05},\n    gapLength: {default: 0.025},\n  },\n  paint: figures.strokedSegment({\n    from: p('pointA'),\n    to: p('pointB'),\n    width: p('thickness'),\n    style: p('style'),\n    dashLength: p('dashLength'),\n    gapLength: p('gapLength'),\n    capStart: 1,\n    capEnd: 1,\n    color: p('color'),\n  }),\n})\n",[10,243,244,255,262,269,292,304,310,322,340,355,391,397,408,482,526,532,544,555,561,571,588,603,618,633,648,663,673,683,698,704],{"__ignoreMap":160},[164,245,246,248,251,253],{"class":166,"line":167},[164,247,171],{"class":170},[164,249,250],{"class":174}," {defineShader, p, figures, transformColor, transformPosition} ",[164,252,178],{"class":170},[164,254,182],{"class":181},[164,256,258],{"class":166,"line":257},2,[164,259,261],{"emptyLinePlaceholder":260},true,"\n",[164,263,265],{"class":166,"line":264},3,[164,266,268],{"class":267},"sAwPA","\u002F\u002F A dashed line with round ends. The style select maps its labels to the numbers the word takes.\n",[164,270,272,275,278,282,285,289],{"class":166,"line":271},4,[164,273,274],{"class":170},"export",[164,276,277],{"class":170}," const",[164,279,281],{"class":280},"sDLfK"," DashedLine",[164,283,284],{"class":170}," =",[164,286,288],{"class":287},"svObZ"," defineShader",[164,290,291],{"class":174},"({\n",[164,293,295,298,301],{"class":166,"line":294},5,[164,296,297],{"class":174},"  name: ",[164,299,300],{"class":181},"'DashedLine'",[164,302,303],{"class":174},",\n",[164,305,307],{"class":166,"line":306},6,[164,308,309],{"class":174},"  props: {\n",[164,311,313,316,319],{"class":166,"line":312},7,[164,314,315],{"class":174},"    color: {default: ",[164,317,318],{"class":181},"'#ffffff'",[164,320,321],{"class":174},", transform: transformColor},\n",[164,323,325,328,331,334,337],{"class":166,"line":324},8,[164,326,327],{"class":174},"    pointA: {default: {x: ",[164,329,330],{"class":280},"0.2",[164,332,333],{"class":174},", y: ",[164,335,336],{"class":280},"0.5",[164,338,339],{"class":174},"}, transform: transformPosition},\n",[164,341,343,346,349,351,353],{"class":166,"line":342},9,[164,344,345],{"class":174},"    pointB: {default: {x: ",[164,347,348],{"class":280},"0.8",[164,350,333],{"class":174},[164,352,336],{"class":280},[164,354,339],{"class":174},[164,356,358,361,364,367,370,373,376,379,382,385,388],{"class":166,"line":357},10,[164,359,360],{"class":174},"    thickness: {default: ",[164,362,363],{"class":280},"0.01",[164,365,366],{"class":174},", ui: {type: ",[164,368,369],{"class":181},"'range'",[164,371,372],{"class":174},", min: ",[164,374,375],{"class":280},"0",[164,377,378],{"class":174},", max: ",[164,380,381],{"class":280},"0.25",[164,383,384],{"class":174},", step: ",[164,386,387],{"class":280},"0.001",[164,389,390],{"class":174},"}},\n",[164,392,394],{"class":166,"line":393},11,[164,395,396],{"class":174},"    style: {\n",[164,398,400,403,406],{"class":166,"line":399},12,[164,401,402],{"class":174},"      default: ",[164,404,405],{"class":181},"'dashed'",[164,407,303],{"class":174},[164,409,411,414,417,421,424,427,430,433,436,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480],{"class":166,"line":410},13,[164,412,413],{"class":287},"      transform",[164,415,416],{"class":174},": (",[164,418,420],{"class":419},"s9osk","value",[164,422,423],{"class":170},":",[164,425,426],{"class":280}," string",[164,428,429],{"class":174},") ",[164,431,432],{"class":170},"=>",[164,434,435],{"class":174}," ({solid: ",[164,437,375],{"class":280},[164,439,440],{"class":174},", dashed: ",[164,442,443],{"class":280},"1",[164,445,446],{"class":174},", dotted: ",[164,448,449],{"class":280},"2",[164,451,452],{"class":174},"} ",[164,454,455],{"class":170},"as",[164,457,458],{"class":287}," Record",[164,460,461],{"class":174},"\u003C",[164,463,464],{"class":280},"string",[164,466,467],{"class":174},", ",[164,469,470],{"class":280},"number",[164,472,473],{"class":174},">)[value] ",[164,475,476],{"class":170},"??",[164,478,479],{"class":280}," 0",[164,481,303],{"class":174},[164,483,485,488,491,494,497,500,503,506,509,511,513,515,518,520,523],{"class":166,"line":484},14,[164,486,487],{"class":174},"      ui: {type: ",[164,489,490],{"class":181},"'select'",[164,492,493],{"class":174},", options: [{label: ",[164,495,496],{"class":181},"'Solid'",[164,498,499],{"class":174},", value: ",[164,501,502],{"class":181},"'solid'",[164,504,505],{"class":174},"}, {label: ",[164,507,508],{"class":181},"'Dashed'",[164,510,499],{"class":174},[164,512,405],{"class":181},[164,514,505],{"class":174},[164,516,517],{"class":181},"'Dotted'",[164,519,499],{"class":174},[164,521,522],{"class":181},"'dotted'",[164,524,525],{"class":174},"}]},\n",[164,527,529],{"class":166,"line":528},15,[164,530,531],{"class":174},"    },\n",[164,533,535,538,541],{"class":166,"line":534},16,[164,536,537],{"class":174},"    dashLength: {default: ",[164,539,540],{"class":280},"0.05",[164,542,543],{"class":174},"},\n",[164,545,547,550,553],{"class":166,"line":546},17,[164,548,549],{"class":174},"    gapLength: {default: ",[164,551,552],{"class":280},"0.025",[164,554,543],{"class":174},[164,556,558],{"class":166,"line":557},18,[164,559,560],{"class":174},"  },\n",[164,562,564,567,569],{"class":166,"line":563},19,[164,565,566],{"class":174},"  paint: figures.",[164,568,221],{"class":287},[164,570,291],{"class":174},[164,572,574,577,579,582,585],{"class":166,"line":573},20,[164,575,576],{"class":174},"    from: ",[164,578,140],{"class":287},[164,580,581],{"class":174},"(",[164,583,584],{"class":181},"'pointA'",[164,586,587],{"class":174},"),\n",[164,589,591,594,596,598,601],{"class":166,"line":590},21,[164,592,593],{"class":174},"    to: ",[164,595,140],{"class":287},[164,597,581],{"class":174},[164,599,600],{"class":181},"'pointB'",[164,602,587],{"class":174},[164,604,606,609,611,613,616],{"class":166,"line":605},22,[164,607,608],{"class":174},"    width: ",[164,610,140],{"class":287},[164,612,581],{"class":174},[164,614,615],{"class":181},"'thickness'",[164,617,587],{"class":174},[164,619,621,624,626,628,631],{"class":166,"line":620},23,[164,622,623],{"class":174},"    style: ",[164,625,140],{"class":287},[164,627,581],{"class":174},[164,629,630],{"class":181},"'style'",[164,632,587],{"class":174},[164,634,636,639,641,643,646],{"class":166,"line":635},24,[164,637,638],{"class":174},"    dashLength: ",[164,640,140],{"class":287},[164,642,581],{"class":174},[164,644,645],{"class":181},"'dashLength'",[164,647,587],{"class":174},[164,649,651,654,656,658,661],{"class":166,"line":650},25,[164,652,653],{"class":174},"    gapLength: ",[164,655,140],{"class":287},[164,657,581],{"class":174},[164,659,660],{"class":181},"'gapLength'",[164,662,587],{"class":174},[164,664,666,669,671],{"class":166,"line":665},26,[164,667,668],{"class":174},"    capStart: ",[164,670,443],{"class":280},[164,672,303],{"class":174},[164,674,676,679,681],{"class":166,"line":675},27,[164,677,678],{"class":174},"    capEnd: ",[164,680,443],{"class":280},[164,682,303],{"class":174},[164,684,686,689,691,693,696],{"class":166,"line":685},28,[164,687,688],{"class":174},"    color: ",[164,690,140],{"class":287},[164,692,581],{"class":174},[164,694,695],{"class":181},"'color'",[164,697,587],{"class":174},[164,699,701],{"class":166,"line":700},29,[164,702,703],{"class":174},"  }),\n",[164,705,707],{"class":166,"line":706},30,[164,708,709],{"class":174},"})\n",[184,711,713],{"id":712},"types","Types",[189,715,716,726],{},[192,717,718],{},[195,719,720,723],{},[198,721,722],{},"Type",[198,724,725],{},"What it is",[205,727,728,741,754],{},[195,729,730,735],{},[210,731,732],{},[10,733,734],{},"Paint",[210,736,737,738,740],{},"What a generator's ",[10,739,152],{}," field takes: a function that returns the color at this pixel.",[195,742,743,748],{},[210,744,745],{},[10,746,747],{},"SineStrokeSlots",[210,749,750,751,753],{},"The inputs to ",[10,752,234],{},".",[195,755,756,761],{},[210,757,758],{},[10,759,760],{},"StrokedSegmentSlots",[210,762,750,763,753],{},[10,764,221],{},[184,766,768],{"id":767},"words","Words",[770,771,773],"primitive-words",{":words":772},"[{\"name\":\"strokedSegment\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Ffigures\u002Fstrokedsegment\",\"summary\":\"A straight line between two points, solid, dashed or dotted, with square or round ends.\"},{\"name\":\"sineStroke\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Ffigures\u002Fsinestroke\",\"summary\":\"A wavy line that travels along itself, drawn as a soft band.\"}]",[774,775,776,784],"ul",{},[777,778,779,783],"li",{},[216,780,781],{"href":218},[10,782,221],{}," — A straight line between two points, solid, dashed or dotted, with square or round ends.",[777,785,786,790],{},[216,787,788],{"href":231},[10,789,234],{}," — A wavy line that travels along itself, drawn as a soft band.",[792,793,794],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":160,"searchDepth":257,"depth":257,"links":796},[797,798,799,800],{"id":186,"depth":257,"text":187},{"id":237,"depth":257,"text":238},{"id":712,"depth":257,"text":713},{"id":767,"depth":257,"text":768},"figures",null,"Drawn lines: a straight segment and a traveling sine wave.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Ffigures.md","md","paint","Painting",{},"\u002Fdocs\u002Fprimitives\u002Ffigures",{"title":131,"description":803},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fpaint\u002Ffigures.ts","docs\u002Fprimitives\u002F9.figures\u002Findex","5nj0O1SpwP0KOC7A5Ja-ZuJiwoM-Lo5srkEUU8zTiNA"]