[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"github-stars":3,"guide-nav":5,"doc-\u002Fdocs\u002Fprimitives\u002Fframes":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":912,"categorySlug":912,"categoryTitle":913,"curated":356,"description":914,"editUrl":915,"extension":916,"group":917,"groupTitle":918,"kind":913,"meta":919,"navigation":356,"path":920,"seo":921,"sourceUrl":922,"stem":923,"wordCount":445,"__hash__":924},"primitives\u002Fdocs\u002Fprimitives\u002F19.frames\u002Findex.md","Frames & coordinates",{"type":133,"value":134,"toc":906},"minimark",[135,139,155,192,221,226,331,335,773,777,827,831,902],[136,137,131],"h1",{"id":138},"frames-coordinates",[140,141,142,143,150,151,154],"p",{},"Frames are how a generator measures its pixels. Instead of raw uv you get named numbers\nready to use: the distance from a centre, how far along and across a line between two\npoints, or the axes of a chosen direction. ",[144,145,147],"a",{"href":146},"\u002Fdocs\u002Fprimitives\u002Fframes\u002Fsurfaceof",[10,148,149],{},"surfaceOf"," is the starting point: the canvas's\n",[10,152,153],{},"uv"," (0–1, y down), its size in pixels and its aspect ratio. Every frame is aspect-corrected,\nso 1 is the canvas height and a circle stays round on a wide canvas.",[140,156,157,158,161,162,165,166,169,170,173,174,177,178,184,185,191],{},"Build a frame from your position props with ",[10,159,160],{},"p('name')",", call it with ",[10,163,164],{},"params"," and the\nsurface, and pull out the numbers you need. Shape them with ",[10,167,168],{},"math"," and hand the result to a\npalette, a ",[10,171,172],{},"light"," word or ",[10,175,176],{},"compose"," to make the pixel's color. ",[144,179,181],{"href":180},"\u002Fdocs\u002Fprimitives\u002Fframes\u002Fdirection",[10,182,183],{},"direction"," and\n",[144,186,188],{"href":187},"\u002Fdocs\u002Fprimitives\u002Fframes\u002Fdirectionframe",[10,189,190],{},"directionFrame"," take an angle in degrees, 0 pointing right and turning clockwise on screen.",[193,194,199],"pre",{"className":195,"code":196,"language":197,"meta":198,"style":198},"language-ts shiki shiki-themes github-dark","import {frames} from 'shaders\u002Fstd'\n","ts","",[10,200,201],{"__ignoreMap":198},[202,203,206,210,214,217],"span",{"class":204,"line":205},"line",1,[202,207,209],{"class":208},"snl16","import",[202,211,213],{"class":212},"s95oV"," {frames} ",[202,215,216],{"class":208},"from",[202,218,220],{"class":219},"sU2Wk"," 'shaders\u002Fstd'\n",[222,223,225],"h2",{"id":224},"reach-for-it-when","Reach for it when",[227,228,229,242],"table",{},[230,231,232],"thead",{},[233,234,235,239],"tr",{},[236,237,238],"th",{},"When you need",[236,240,241],{},"Use",[243,244,245,257,270,283,296,307,318],"tbody",{},[233,246,247,251],{},[248,249,250],"td",{},"the canvas uv, size and aspect at the top of a paint",[248,252,253],{},[144,254,255],{"href":146},[10,256,149],{},[233,258,259,262],{},[248,260,261],{},"a pattern anchored to the whole canvas, not the layer's box",[248,263,264],{},[144,265,267],{"href":266},"\u002Fdocs\u002Fprimitives\u002Fframes\u002Frawsurfaceof",[10,268,269],{},"rawSurfaceOf",[233,271,272,275],{},[248,273,274],{},"the distance from a draggable centre",[248,276,277],{},[144,278,280],{"href":279},"\u002Fdocs\u002Fprimitives\u002Fframes\u002Fcentredframe",[10,281,282],{},"centredFrame",[233,284,285,288],{},[248,286,287],{},"the position along and across a line between two points",[248,289,290],{},[144,291,293],{"href":292},"\u002Fdocs\u002Fprimitives\u002Fframes\u002Fsegmentframe",[10,294,295],{},"segmentFrame",[233,297,298,301],{},[248,299,300],{},"a light or flow angle as a vector",[248,302,303],{},[144,304,305],{"href":180},[10,306,183],{},[233,308,309,312],{},[248,310,311],{},"a grain, weave or streak running at an angle",[248,313,314],{},[144,315,316],{"href":187},[10,317,190],{},[233,319,320,323],{},[248,321,322],{},"a kaleidoscope",[248,324,325],{},[144,326,328],{"href":327},"\u002Fdocs\u002Fprimitives\u002Fframes\u002Fsectorfold",[10,329,330],{},"sectorFold",[222,332,334],{"id":333},"example","Example",[193,336,338],{"className":195,"code":337,"language":197,"meta":198,"style":198},"import {defineShader, p, frames, math, transformColor, transformPosition} from 'shaders\u002Fstd'\n\nconst {surfaceOf, segmentFrame} = frames\nconst {div, exp, mul, neg, smoothstep, sub, vec4} = math\n\n\u002F\u002F A bar of light between two draggable points: bright on the line, fading across it, feathered at both ends.\nexport const LightBar = defineShader({\n  name: 'LightBar',\n  props: {\n    from: {default: {x: 0.2, y: 0.5}, transform: transformPosition},\n    to: {default: {x: 0.8, y: 0.5}, transform: transformPosition},\n    color: {default: '#7ad7ff', transform: transformColor},\n    width: {default: 0.05},\n    feather: {default: 0.1},\n  },\n  paint: (params) => {\n    const u = params.uniforms\n    const {along, across, length} = segmentFrame({from: p('from'), to: p('to')})(params, surfaceOf(params))\n    const profile = exp(neg(div(mul(across, across), mul(u.width, u.width))))\n    const ends = mul(smoothstep(0, u.feather, along), smoothstep(0, u.feather, sub(length, along)))\n    const bar = mul(profile, ends)\n    return vec4(mul(u.color.member('rgb'), bar), bar)\n  },\n})\n",[10,339,340,351,358,384,431,436,443,465,477,483,501,516,528,540,551,557,578,592,648,681,720,735,762,767],{"__ignoreMap":198},[202,341,342,344,347,349],{"class":204,"line":205},[202,343,209],{"class":208},[202,345,346],{"class":212}," {defineShader, p, frames, math, transformColor, transformPosition} ",[202,348,216],{"class":208},[202,350,220],{"class":219},[202,352,354],{"class":204,"line":353},2,[202,355,357],{"emptyLinePlaceholder":356},true,"\n",[202,359,361,364,367,370,373,375,378,381],{"class":204,"line":360},3,[202,362,363],{"class":208},"const",[202,365,366],{"class":212}," {",[202,368,149],{"class":369},"sDLfK",[202,371,372],{"class":212},", ",[202,374,295],{"class":369},[202,376,377],{"class":212},"} ",[202,379,380],{"class":208},"=",[202,382,383],{"class":212}," frames\n",[202,385,387,389,391,394,396,399,401,404,406,409,411,414,416,419,421,424,426,428],{"class":204,"line":386},4,[202,388,363],{"class":208},[202,390,366],{"class":212},[202,392,393],{"class":369},"div",[202,395,372],{"class":212},[202,397,398],{"class":369},"exp",[202,400,372],{"class":212},[202,402,403],{"class":369},"mul",[202,405,372],{"class":212},[202,407,408],{"class":369},"neg",[202,410,372],{"class":212},[202,412,413],{"class":369},"smoothstep",[202,415,372],{"class":212},[202,417,418],{"class":369},"sub",[202,420,372],{"class":212},[202,422,423],{"class":369},"vec4",[202,425,377],{"class":212},[202,427,380],{"class":208},[202,429,430],{"class":212}," math\n",[202,432,434],{"class":204,"line":433},5,[202,435,357],{"emptyLinePlaceholder":356},[202,437,439],{"class":204,"line":438},6,[202,440,442],{"class":441},"sAwPA","\u002F\u002F A bar of light between two draggable points: bright on the line, fading across it, feathered at both ends.\n",[202,444,446,449,452,455,458,462],{"class":204,"line":445},7,[202,447,448],{"class":208},"export",[202,450,451],{"class":208}," const",[202,453,454],{"class":369}," LightBar",[202,456,457],{"class":208}," =",[202,459,461],{"class":460},"svObZ"," defineShader",[202,463,464],{"class":212},"({\n",[202,466,468,471,474],{"class":204,"line":467},8,[202,469,470],{"class":212},"  name: ",[202,472,473],{"class":219},"'LightBar'",[202,475,476],{"class":212},",\n",[202,478,480],{"class":204,"line":479},9,[202,481,482],{"class":212},"  props: {\n",[202,484,486,489,492,495,498],{"class":204,"line":485},10,[202,487,488],{"class":212},"    from: {default: {x: ",[202,490,491],{"class":369},"0.2",[202,493,494],{"class":212},", y: ",[202,496,497],{"class":369},"0.5",[202,499,500],{"class":212},"}, transform: transformPosition},\n",[202,502,504,507,510,512,514],{"class":204,"line":503},11,[202,505,506],{"class":212},"    to: {default: {x: ",[202,508,509],{"class":369},"0.8",[202,511,494],{"class":212},[202,513,497],{"class":369},[202,515,500],{"class":212},[202,517,519,522,525],{"class":204,"line":518},12,[202,520,521],{"class":212},"    color: {default: ",[202,523,524],{"class":219},"'#7ad7ff'",[202,526,527],{"class":212},", transform: transformColor},\n",[202,529,531,534,537],{"class":204,"line":530},13,[202,532,533],{"class":212},"    width: {default: ",[202,535,536],{"class":369},"0.05",[202,538,539],{"class":212},"},\n",[202,541,543,546,549],{"class":204,"line":542},14,[202,544,545],{"class":212},"    feather: {default: ",[202,547,548],{"class":369},"0.1",[202,550,539],{"class":212},[202,552,554],{"class":204,"line":553},15,[202,555,556],{"class":212},"  },\n",[202,558,560,563,566,569,572,575],{"class":204,"line":559},16,[202,561,562],{"class":460},"  paint",[202,564,565],{"class":212},": (",[202,567,164],{"class":568},"s9osk",[202,570,571],{"class":212},") ",[202,573,574],{"class":208},"=>",[202,576,577],{"class":212}," {\n",[202,579,581,584,587,589],{"class":204,"line":580},17,[202,582,583],{"class":208},"    const",[202,585,586],{"class":369}," u",[202,588,457],{"class":208},[202,590,591],{"class":212}," params.uniforms\n",[202,593,595,597,599,602,604,607,609,612,614,616,619,622,624,627,630,633,635,637,640,643,645],{"class":204,"line":594},18,[202,596,583],{"class":208},[202,598,366],{"class":212},[202,600,601],{"class":369},"along",[202,603,372],{"class":212},[202,605,606],{"class":369},"across",[202,608,372],{"class":212},[202,610,611],{"class":369},"length",[202,613,377],{"class":212},[202,615,380],{"class":208},[202,617,618],{"class":460}," segmentFrame",[202,620,621],{"class":212},"({from: ",[202,623,140],{"class":460},[202,625,626],{"class":212},"(",[202,628,629],{"class":219},"'from'",[202,631,632],{"class":212},"), to: ",[202,634,140],{"class":460},[202,636,626],{"class":212},[202,638,639],{"class":219},"'to'",[202,641,642],{"class":212},")})(params, ",[202,644,149],{"class":460},[202,646,647],{"class":212},"(params))\n",[202,649,651,653,656,658,661,663,665,667,669,671,673,676,678],{"class":204,"line":650},19,[202,652,583],{"class":208},[202,654,655],{"class":369}," profile",[202,657,457],{"class":208},[202,659,660],{"class":460}," exp",[202,662,626],{"class":212},[202,664,408],{"class":460},[202,666,626],{"class":212},[202,668,393],{"class":460},[202,670,626],{"class":212},[202,672,403],{"class":460},[202,674,675],{"class":212},"(across, across), ",[202,677,403],{"class":460},[202,679,680],{"class":212},"(u.width, u.width))))\n",[202,682,684,686,689,691,694,696,698,700,703,706,708,710,712,715,717],{"class":204,"line":683},20,[202,685,583],{"class":208},[202,687,688],{"class":369}," ends",[202,690,457],{"class":208},[202,692,693],{"class":460}," mul",[202,695,626],{"class":212},[202,697,413],{"class":460},[202,699,626],{"class":212},[202,701,702],{"class":369},"0",[202,704,705],{"class":212},", u.feather, along), ",[202,707,413],{"class":460},[202,709,626],{"class":212},[202,711,702],{"class":369},[202,713,714],{"class":212},", u.feather, ",[202,716,418],{"class":460},[202,718,719],{"class":212},"(length, along)))\n",[202,721,723,725,728,730,732],{"class":204,"line":722},21,[202,724,583],{"class":208},[202,726,727],{"class":369}," bar",[202,729,457],{"class":208},[202,731,693],{"class":460},[202,733,734],{"class":212},"(profile, ends)\n",[202,736,738,741,744,746,748,751,754,756,759],{"class":204,"line":737},22,[202,739,740],{"class":208},"    return",[202,742,743],{"class":460}," vec4",[202,745,626],{"class":212},[202,747,403],{"class":460},[202,749,750],{"class":212},"(u.color.",[202,752,753],{"class":460},"member",[202,755,626],{"class":212},[202,757,758],{"class":219},"'rgb'",[202,760,761],{"class":212},"), bar), bar)\n",[202,763,765],{"class":204,"line":764},23,[202,766,556],{"class":212},[202,768,770],{"class":204,"line":769},24,[202,771,772],{"class":212},"})\n",[222,774,776],{"id":775},"types","Types",[227,778,779,789],{},[230,780,781],{},[233,782,783,786],{},[236,784,785],{},"Type",[236,787,788],{},"What it is",[243,790,791,804,816],{},[233,792,793,798],{},[248,794,795],{},[10,796,797],{},"CentredFrame",[248,799,800,801,803],{},"What ",[10,802,282],{}," gives you for each pixel.",[233,805,806,811],{},[248,807,808],{},[10,809,810],{},"DirectionFrame",[248,812,800,813,815],{},[10,814,190],{}," gives you.",[233,817,818,823],{},[248,819,820],{},[10,821,822],{},"SegmentFrame",[248,824,800,825,803],{},[10,826,295],{},[222,828,830],{"id":829},"words","Words",[832,833,835],"primitive-words",{":words":834},"[{\"name\":\"surfaceOf\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fframes\u002Fsurfaceof\",\"summary\":\"The canvas a generator paints on: its `uv`, its `viewport` size in pixels and its `aspect`.\"},{\"name\":\"centredFrame\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fframes\u002Fcentredframe\",\"summary\":\"A frame centred on a position prop: each pixel's offset from the centre and its distance.\"},{\"name\":\"segmentFrame\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fframes\u002Fsegmentframe\",\"summary\":\"A frame along the line between two position props: how far each pixel is along it and across it.\"},{\"name\":\"direction\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fframes\u002Fdirection\",\"summary\":\"A direction in degrees as a unit vector.\"},{\"name\":\"directionFrame\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fframes\u002Fdirectionframe\",\"summary\":\"The two axes of a direction given in degrees, for patterns that run along it.\"},{\"name\":\"sectorFold\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fframes\u002Fsectorfold\",\"summary\":\"Fold a point into one mirrored wedge around a centre: the kaleidoscope fold.\"},{\"name\":\"rawSurfaceOf\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fframes\u002Frawsurfaceof\",\"summary\":\"The canvas like `surfaceOf`, but always measured against the whole canvas, never a fitted box.\"}]",[836,837,838,857,864,871,878,885,892],"ul",{},[839,840,841,845,846,848,849,852,853,856],"li",{},[144,842,843],{"href":146},[10,844,149],{}," — The canvas a generator paints on: its ",[10,847,153],{},", its ",[10,850,851],{},"viewport"," size in pixels and its ",[10,854,855],{},"aspect",".",[839,858,859,863],{},[144,860,861],{"href":279},[10,862,282],{}," — A frame centred on a position prop: each pixel's offset from the centre and its distance.",[839,865,866,870],{},[144,867,868],{"href":292},[10,869,295],{}," — A frame along the line between two position props: how far each pixel is along it and across it.",[839,872,873,877],{},[144,874,875],{"href":180},[10,876,183],{}," — A direction in degrees as a unit vector.",[839,879,880,884],{},[144,881,882],{"href":187},[10,883,190],{}," — The two axes of a direction given in degrees, for patterns that run along it.",[839,886,887,891],{},[144,888,889],{"href":327},[10,890,330],{}," — Fold a point into one mirrored wedge around a centre: the kaleidoscope fold.",[839,893,894,898,899,901],{},[144,895,896],{"href":266},[10,897,269],{}," — The canvas like ",[10,900,149],{},", but always measured against the whole canvas, never a fitted box.",[903,904,905],"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 .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}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":198,"searchDepth":353,"depth":353,"links":907},[908,909,910,911],{"id":224,"depth":353,"text":225},{"id":333,"depth":353,"text":334},{"id":775,"depth":353,"text":776},{"id":829,"depth":353,"text":830},"frames",null,"Frames are how a generator measures its pixels.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fframes.md","md","space","Shapes, frames & warps",{},"\u002Fdocs\u002Fprimitives\u002Fframes",{"title":131,"description":914},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fframes.ts","docs\u002Fprimitives\u002F19.frames\u002Findex","k4KdKbJkHox4LthytmWOxeGh1xP6Pjxgv8on-s5MrfU"]