[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Fmotion":145},[4,10,16,20,24,28,32,36,40,44,48,52,56,60,64,69,73,78,82,86,90,94,98,102,106,110,114,117,120,124,127,131,134,138,141],{"path":5,"title":6,"description":7,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide","Getting started","Shaders is a library of GPU effect components for Vue, React, Svelte, Solid, JavaScript and Framer, with a design editor for building with them.","code",null,{"path":11,"title":12,"description":13,"category":8,"exclude":14,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fquickstart","Quickstart","Install Shaders, render your first effect, and drive a prop from state.",[15],"js",{"path":17,"title":18,"description":19,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcomposing-effects","Composing effects","Stack components as layers and nest them to control which layers an effect touches.",{"path":21,"title":22,"description":23,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fblending-masking","Blending and masking","Control how a layer mixes with the layers below it, and reveal one layer through another.",{"path":25,"title":26,"description":27,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fprops-reactivity","Props and reactivity","Bind props to your framework's state so effects update when it changes, and animate props with an animation library.",{"path":29,"title":30,"description":31,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fdynamic-props","Dynamic props","Drive any numeric or position prop from time, the cursor, or another layer, without writing animation code.",{"path":33,"title":34,"description":35,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Flayout-positioning","Layout and positioning","Size and place a shader in your page with CSS, as a background, a fill, or an inline block.",{"path":37,"title":38,"description":39,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Ftransforms","Transforms","Position, size, and rotate any layer inside the canvas with a bounding box, in % or px units.",{"path":41,"title":42,"description":43,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fshape-effects","Shape effects","Pick the 2D, 3D or custom SVG shape that Glass, Neon, Emboss and other shape effects draw inside.",{"path":45,"title":46,"description":47,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcolor-space","Color space","Match colors to your design tool with the output color space, and keep bright layers from clipping with tone mapping.",{"path":49,"title":50,"description":51,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fhooks-events","Hooks and events","Run code when an effect is ready to show, and show a fallback when the GPU can't run it.",{"path":53,"title":54,"description":55,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fperformance","Performance","Learn what makes an effect expensive on the GPU and how to keep it inside the frame budget.",{"path":57,"title":58,"description":59,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcustom-shaders","Custom components","Write your own component in TypeScript, use it like any component in the library, and write WGSL by hand when you need to.",{"path":61,"title":62,"description":63,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Ftelemetry","Telemetry","The `\u003CShader>` component occasionally sends an anonymous performance report to help us improve the engine over time.",{"path":65,"title":66,"description":67,"category":68,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fmcp","Shaders MCP","Connect your AI coding agent to Shaders so it can find, install and edit effects in your codebase.","workflows",{"path":70,"title":71,"description":72,"category":68,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcli","Shaders CLI","Install shaders and presets into your codebase as component files, and keep them in sync with the design editor.",{"path":74,"title":75,"description":76,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fquick-tour-of-the-design-editor","Quick tour of the design editor","A short walkthrough of the full Shaders workflow, from designing on the infinite canvas to exporting code.","editor",{"path":79,"title":80,"description":81,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fintro-to-the-interface","Intro to the interface","A tour of the design editor interface: the canvas, layers, the Properties panel, and the ways to share and export.",{"path":83,"title":84,"description":85,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcomposing-your-first-shader-effect","Composing your first shader effect","Building a first shader effect in the design editor by stacking and nesting components as layers.",{"path":87,"title":88,"description":89,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fmasking-and-blending","Masking and blending","How blend modes and masks combine components in the design editor.",{"path":91,"title":92,"description":93,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fdynamic-prop-mapping","Dynamic prop mapping","Turning static props into dynamic ones in the design editor: mapping one layer's output into another's prop, following the cursor, or animating automatically.",{"path":95,"title":96,"description":97,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fcustom-media-and-transformations","Custom media and transformations","Uploading images, videos, and SVG files to the media gallery, adding them to a composition, and placing them with transformations.",{"path":99,"title":100,"description":101,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Finstalling-a-shader-via-mcp","Installing a shader via MCP","Installing a shader from the design editor into a hero section with the Shaders MCP.",{"path":103,"title":104,"description":105,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fexploring-shape-effects","Exploring shape effects","Applying shape effects such as liquid glass, liquid metal, and glowing edges to built-in shapes and your own SVG.",{"path":107,"title":108,"description":109,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fglass-component-spotlight","Component spotlight: Glass","A short look at the Glass component and the liquid-glass look it creates.",{"path":111,"title":112,"description":113,"category":77,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fdigital-looks-component-spotlight","Component spotlight: Digital looks","A look at the digital stylization components for glitchy, futuristic, or technical effects.",{"path":115,"title":12,"description":116,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fjs\u002Fquickstart","Install Shaders without a framework, render your first effect on a canvas, and update props at runtime.",{"path":118,"title":12,"description":119,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Freact\u002Fquickstart","Install Shaders in a React app, render your first effect, and drive a prop from state.",{"path":121,"title":122,"description":123,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Freact\u002Fssr","Next.js and SSR","Render Shaders in Next.js and other React SSR apps by keeping each shader on the client.",{"path":125,"title":12,"description":126,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fquickstart","Install Shaders in a Solid app, render your first effect, and drive a prop from a signal.",{"path":128,"title":129,"description":130,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsolid\u002Fssr","SolidStart and SSR","Render Shaders in SolidStart and other Solid SSR apps by keeping each shader on the client.",{"path":132,"title":12,"description":133,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fquickstart","Install Shaders in a Svelte app, render your first effect, and drive a prop from state.",{"path":135,"title":136,"description":137,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fsvelte\u002Fssr","SvelteKit and SSR","Render Shaders in SvelteKit and other Svelte SSR apps, where each shader already waits for the browser.",{"path":139,"title":12,"description":140,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fvue\u002Fquickstart","Install Shaders in a Vue app, render your first effect, and drive a prop from a ref.",{"path":142,"title":143,"description":144,"category":8,"exclude":9,"forceFramework":9},"\u002Fdocs\u002Fguide\u002Fvue\u002Fssr","Nuxt and SSR","Render Shaders in Nuxt and other Vue SSR apps by keeping each shader on the client.",{"id":146,"title":147,"body":148,"categoryId":965,"categorySlug":965,"categoryTitle":9,"curated":398,"description":966,"editUrl":967,"extension":968,"group":969,"groupTitle":970,"kind":9,"meta":971,"navigation":398,"path":972,"seo":973,"sourceUrl":974,"stem":975,"wordCount":520,"__hash__":976},"primitives\u002Fdocs\u002Fprimitives\u002F23.motion\u002Findex.md","Motion & timing",{"type":149,"value":150,"toc":960},"minimark",[151,155,196,211,240,245,373,377,847,851,956],[152,153,147],"h1",{"id":154},"motion-timing",[156,157,158,159,162,163,166,167,174,175,181,182,188,189,195],"p",{},"Words that turn a clock into rhythm. The clock is a number of seconds: declare\n",[8,160,161],{},"animatedTime: {speed: 'speed'}"," on the definition and read the layer's clock with\n",[8,164,165],{},"animatedTime(params)",", and a speed prop and a pause button come for free. ",[168,169,171],"a",{"href":170},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Fcycle",[8,172,173],{},"cycle"," splits\nthat clock into \"which pass is this\" and \"how far through it are we\", ",[168,176,178],{"href":177},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Fcycleseed",[8,179,180],{},"cycleSeed"," gives each\npass a stable random number, ",[168,183,185],{"href":184},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Foscillate",[8,186,187],{},"oscillate"," and ",[168,190,192],{"href":191},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Fpulsetrain",[8,193,194],{},"pulseTrain"," shape it into a sweep or a blink,\nand the easings bend a 0..1 progress. The result is a number you multiply into a color, a\nradius or a coordinate.",[156,197,198,188,204,210],{},[168,199,201],{"href":200},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Foscillating",[8,202,203],{},"oscillating",[168,205,207],{"href":206},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Fpulsing",[8,208,209],{},"pulsing"," are the same shapes packaged as a value you can drop into any\nslot that takes a prop, on a warp or an effect, so a knob moves on its own with no math in\nyour definition.",[212,213,218],"pre",{"className":214,"code":215,"language":216,"meta":217,"style":217},"language-ts shiki shiki-themes github-dark","import {motion} from 'shaders\u002Fstd'\n","ts","",[8,219,220],{"__ignoreMap":217},[221,222,225,229,233,236],"span",{"class":223,"line":224},"line",1,[221,226,228],{"class":227},"snl16","import",[221,230,232],{"class":231},"s95oV"," {motion} ",[221,234,235],{"class":227},"from",[221,237,239],{"class":238},"sU2Wk"," 'shaders\u002Fstd'\n",[241,242,244],"h2",{"id":243},"reach-for-it-when","Reach for it when",[246,247,248,261],"table",{},[249,250,251],"thead",{},[252,253,254,258],"tr",{},[255,256,257],"th",{},"When you need",[255,259,260],{},"Use",[262,263,264,277,288,300,312,323,334,347],"tbody",{},[252,265,266,270],{},[267,268,269],"td",{},"a warp or effect knob that sweeps back and forth by itself",[267,271,272,276],{},[168,273,274],{"href":200},[8,275,203],{}," in the slot",[252,278,279,282],{},[267,280,281],{},"a knob that switches on and off in a rhythm",[267,283,284,276],{},[168,285,286],{"href":206},[8,287,209],{},[252,289,290,293],{},[267,291,292],{},"something happens every N seconds",[267,294,295,299],{},[168,296,297],{"href":170},[8,298,173],{},", which gives progress and index",[252,301,302,305],{},[267,303,304],{},"each pass should look different but hold still while it lasts",[267,306,307,311],{},[168,308,309],{"href":177},[8,310,180],{}," on the cycle's index",[252,313,314,317],{},[267,315,316],{},"a smooth breathing value between two numbers",[267,318,319],{},[168,320,321],{"href":184},[8,322,187],{},[252,324,325,328],{},[267,326,327],{},"a blink or strobe with a controllable on time",[267,329,330],{},[168,331,332],{"href":191},[8,333,194],{},[252,335,336,339],{},[267,337,338],{},"just the 0..1 position inside a repeating cycle",[267,340,341],{},[168,342,344],{"href":343},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Fphase",[8,345,346],{},"phase",[252,348,349,352],{},[267,350,351],{},"a progress that accelerates, settles or glides",[267,353,354,360,361,360,367],{},[168,355,357],{"href":356},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Feasein",[8,358,359],{},"easeIn",", ",[168,362,364],{"href":363},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Feaseout",[8,365,366],{},"easeOut",[168,368,370],{"href":369},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Feaseinout",[8,371,372],{},"easeInOut",[241,374,376],{"id":375},"example","Example",[212,378,380],{"className":214,"code":379,"language":216,"meta":217,"style":217},"import {defineShader, p, uniformOf, animatedTime, math, motion, transformColor} from 'shaders\u002Fstd'\n\nconst {sub, mul, mix, splat3, vec4} = math\n\n\u002F\u002F Flash: every `period` seconds the canvas lights up in a new random blend of two colors and fades out.\nexport const Flash = defineShader({\n  name: 'Flash',\n  animatedTime: {speed: 'speed'},\n  props: {\n    colorA: {default: '#ff7e5f', transform: transformColor},\n    colorB: {default: '#7dd3fc', transform: transformColor},\n    period: {default: 2},\n    speed: {default: 1},\n  },\n  paint: (params) => {\n    const u = (name: string) => uniformOf(p(name), params)\n    const t = animatedTime(params)\n    const {progress, index} = motion.cycle(t, u('period'))\n    const fade = motion.easeOut(sub(1, progress)) \u002F\u002F bright at the start of each pass, then out\n    const pick = motion.cycleSeed(index) \u002F\u002F one stable random blend per pass\n    const breathe = motion.oscillate(t, {rate: 0.5, min: 0.7, max: 1})\n    const rgb = mix(u('colorA').member('rgb'), u('colorB').member('rgb'), splat3(pick))\n    return vec4(mul(rgb, mul(fade, breathe)), 1)\n  },\n})\n",[8,381,382,393,400,442,447,454,476,488,500,506,518,529,540,551,557,579,617,633,671,699,719,753,811,837,842],{"__ignoreMap":217},[221,383,384,386,389,391],{"class":223,"line":224},[221,385,228],{"class":227},[221,387,388],{"class":231}," {defineShader, p, uniformOf, animatedTime, math, motion, transformColor} ",[221,390,235],{"class":227},[221,392,239],{"class":238},[221,394,396],{"class":223,"line":395},2,[221,397,399],{"emptyLinePlaceholder":398},true,"\n",[221,401,403,406,409,413,415,418,420,423,425,428,430,433,436,439],{"class":223,"line":402},3,[221,404,405],{"class":227},"const",[221,407,408],{"class":231}," {",[221,410,412],{"class":411},"sDLfK","sub",[221,414,360],{"class":231},[221,416,417],{"class":411},"mul",[221,419,360],{"class":231},[221,421,422],{"class":411},"mix",[221,424,360],{"class":231},[221,426,427],{"class":411},"splat3",[221,429,360],{"class":231},[221,431,432],{"class":411},"vec4",[221,434,435],{"class":231},"} ",[221,437,438],{"class":227},"=",[221,440,441],{"class":231}," math\n",[221,443,445],{"class":223,"line":444},4,[221,446,399],{"emptyLinePlaceholder":398},[221,448,450],{"class":223,"line":449},5,[221,451,453],{"class":452},"sAwPA","\u002F\u002F Flash: every `period` seconds the canvas lights up in a new random blend of two colors and fades out.\n",[221,455,457,460,463,466,469,473],{"class":223,"line":456},6,[221,458,459],{"class":227},"export",[221,461,462],{"class":227}," const",[221,464,465],{"class":411}," Flash",[221,467,468],{"class":227}," =",[221,470,472],{"class":471},"svObZ"," defineShader",[221,474,475],{"class":231},"({\n",[221,477,479,482,485],{"class":223,"line":478},7,[221,480,481],{"class":231},"  name: ",[221,483,484],{"class":238},"'Flash'",[221,486,487],{"class":231},",\n",[221,489,491,494,497],{"class":223,"line":490},8,[221,492,493],{"class":231},"  animatedTime: {speed: ",[221,495,496],{"class":238},"'speed'",[221,498,499],{"class":231},"},\n",[221,501,503],{"class":223,"line":502},9,[221,504,505],{"class":231},"  props: {\n",[221,507,509,512,515],{"class":223,"line":508},10,[221,510,511],{"class":231},"    colorA: {default: ",[221,513,514],{"class":238},"'#ff7e5f'",[221,516,517],{"class":231},", transform: transformColor},\n",[221,519,521,524,527],{"class":223,"line":520},11,[221,522,523],{"class":231},"    colorB: {default: ",[221,525,526],{"class":238},"'#7dd3fc'",[221,528,517],{"class":231},[221,530,532,535,538],{"class":223,"line":531},12,[221,533,534],{"class":231},"    period: {default: ",[221,536,537],{"class":411},"2",[221,539,499],{"class":231},[221,541,543,546,549],{"class":223,"line":542},13,[221,544,545],{"class":231},"    speed: {default: ",[221,547,548],{"class":411},"1",[221,550,499],{"class":231},[221,552,554],{"class":223,"line":553},14,[221,555,556],{"class":231},"  },\n",[221,558,560,563,566,570,573,576],{"class":223,"line":559},15,[221,561,562],{"class":471},"  paint",[221,564,565],{"class":231},": (",[221,567,569],{"class":568},"s9osk","params",[221,571,572],{"class":231},") ",[221,574,575],{"class":227},"=>",[221,577,578],{"class":231}," {\n",[221,580,582,585,588,590,593,596,599,602,604,606,609,612,614],{"class":223,"line":581},16,[221,583,584],{"class":227},"    const",[221,586,587],{"class":471}," u",[221,589,468],{"class":227},[221,591,592],{"class":231}," (",[221,594,595],{"class":568},"name",[221,597,598],{"class":227},":",[221,600,601],{"class":411}," string",[221,603,572],{"class":231},[221,605,575],{"class":227},[221,607,608],{"class":471}," uniformOf",[221,610,611],{"class":231},"(",[221,613,156],{"class":471},[221,615,616],{"class":231},"(name), params)\n",[221,618,620,622,625,627,630],{"class":223,"line":619},17,[221,621,584],{"class":227},[221,623,624],{"class":411}," t",[221,626,468],{"class":227},[221,628,629],{"class":471}," animatedTime",[221,631,632],{"class":231},"(params)\n",[221,634,636,638,640,643,645,648,650,652,655,657,660,663,665,668],{"class":223,"line":635},18,[221,637,584],{"class":227},[221,639,408],{"class":231},[221,641,642],{"class":411},"progress",[221,644,360],{"class":231},[221,646,647],{"class":411},"index",[221,649,435],{"class":231},[221,651,438],{"class":227},[221,653,654],{"class":231}," motion.",[221,656,173],{"class":471},[221,658,659],{"class":231},"(t, ",[221,661,662],{"class":471},"u",[221,664,611],{"class":231},[221,666,667],{"class":238},"'period'",[221,669,670],{"class":231},"))\n",[221,672,674,676,679,681,683,685,687,689,691,693,696],{"class":223,"line":673},19,[221,675,584],{"class":227},[221,677,678],{"class":411}," fade",[221,680,468],{"class":227},[221,682,654],{"class":231},[221,684,366],{"class":471},[221,686,611],{"class":231},[221,688,412],{"class":471},[221,690,611],{"class":231},[221,692,548],{"class":411},[221,694,695],{"class":231},", progress)) ",[221,697,698],{"class":452},"\u002F\u002F bright at the start of each pass, then out\n",[221,700,702,704,707,709,711,713,716],{"class":223,"line":701},20,[221,703,584],{"class":227},[221,705,706],{"class":411}," pick",[221,708,468],{"class":227},[221,710,654],{"class":231},[221,712,180],{"class":471},[221,714,715],{"class":231},"(index) ",[221,717,718],{"class":452},"\u002F\u002F one stable random blend per pass\n",[221,720,722,724,727,729,731,733,736,739,742,745,748,750],{"class":223,"line":721},21,[221,723,584],{"class":227},[221,725,726],{"class":411}," breathe",[221,728,468],{"class":227},[221,730,654],{"class":231},[221,732,187],{"class":471},[221,734,735],{"class":231},"(t, {rate: ",[221,737,738],{"class":411},"0.5",[221,740,741],{"class":231},", min: ",[221,743,744],{"class":411},"0.7",[221,746,747],{"class":231},", max: ",[221,749,548],{"class":411},[221,751,752],{"class":231},"})\n",[221,754,756,758,761,763,766,768,770,772,775,778,781,783,786,789,791,793,796,798,800,802,804,806,808],{"class":223,"line":755},22,[221,757,584],{"class":227},[221,759,760],{"class":411}," rgb",[221,762,468],{"class":227},[221,764,765],{"class":471}," mix",[221,767,611],{"class":231},[221,769,662],{"class":471},[221,771,611],{"class":231},[221,773,774],{"class":238},"'colorA'",[221,776,777],{"class":231},").",[221,779,780],{"class":471},"member",[221,782,611],{"class":231},[221,784,785],{"class":238},"'rgb'",[221,787,788],{"class":231},"), ",[221,790,662],{"class":471},[221,792,611],{"class":231},[221,794,795],{"class":238},"'colorB'",[221,797,777],{"class":231},[221,799,780],{"class":471},[221,801,611],{"class":231},[221,803,785],{"class":238},[221,805,788],{"class":231},[221,807,427],{"class":471},[221,809,810],{"class":231},"(pick))\n",[221,812,814,817,820,822,824,827,829,832,834],{"class":223,"line":813},23,[221,815,816],{"class":227},"    return",[221,818,819],{"class":471}," vec4",[221,821,611],{"class":231},[221,823,417],{"class":471},[221,825,826],{"class":231},"(rgb, ",[221,828,417],{"class":471},[221,830,831],{"class":231},"(fade, breathe)), ",[221,833,548],{"class":411},[221,835,836],{"class":231},")\n",[221,838,840],{"class":223,"line":839},24,[221,841,556],{"class":231},[221,843,845],{"class":223,"line":844},25,[221,846,752],{"class":231},[241,848,850],{"id":849},"words","Words",[852,853,855],"primitive-words",{":words":854},"[{\"name\":\"oscillating\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Foscillating\",\"summary\":\"A knob that sweeps between `min` and `max` on its own, for any slot that takes a prop.\"},{\"name\":\"pulsing\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Fpulsing\",\"summary\":\"A knob that switches on and off in a rhythm, for any slot that takes a prop.\"},{\"name\":\"cycle\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Fcycle\",\"summary\":\"A repeating cycle as two numbers: `progress` (0..1 through the current cycle) and `index` (which cycle this is).\"},{\"name\":\"cycleSeed\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Fcycleseed\",\"summary\":\"A random but stable number, 0..1, for each cycle index.\"},{\"name\":\"oscillate\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Foscillate\",\"summary\":\"A smooth back-and-forth between `min` and `max`.\"},{\"name\":\"pulseTrain\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Fpulsetrain\",\"summary\":\"An on\u002Foff rhythm: 1 for the first part of each cycle, 0 for the rest.\"},{\"name\":\"phase\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Fphase\",\"summary\":\"How far through a repeating cycle the clock is, 0..1.\"},{\"name\":\"easeInOut\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Feaseinout\",\"summary\":\"A 0..1 value that starts slow, speeds up, and slows again at the end.\"},{\"name\":\"easeOut\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Feaseout\",\"summary\":\"A 0..1 value that starts fast and slows to a stop.\"},{\"name\":\"easeIn\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Feasein\",\"summary\":\"A 0..1 value that starts slow and speeds up.\"},{\"name\":\"flashes\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Fflashes\",\"summary\":\"Short, bright flashes at a steady rate: dark most of the time, peaking briefly to 1.\"}]",[856,857,858,873,880,893,900,912,919,926,933,940,947],"ul",{},[859,860,861,865,866,188,869,872],"li",{},[168,862,863],{"href":200},[8,864,203],{}," — A knob that sweeps between ",[8,867,868],{},"min",[8,870,871],{},"max"," on its own, for any slot that takes a prop.",[859,874,875,879],{},[168,876,877],{"href":206},[8,878,209],{}," — A knob that switches on and off in a rhythm, for any slot that takes a prop.",[859,881,882,886,887,889,890,892],{},[168,883,884],{"href":170},[8,885,173],{}," — A repeating cycle as two numbers: ",[8,888,642],{}," (0..1 through the current cycle) and ",[8,891,647],{}," (which cycle this is).",[859,894,895,899],{},[168,896,897],{"href":177},[8,898,180],{}," — A random but stable number, 0..1, for each cycle index.",[859,901,902,906,907,188,909,911],{},[168,903,904],{"href":184},[8,905,187],{}," — A smooth back-and-forth between ",[8,908,868],{},[8,910,871],{},".",[859,913,914,918],{},[168,915,916],{"href":191},[8,917,194],{}," — An on\u002Foff rhythm: 1 for the first part of each cycle, 0 for the rest.",[859,920,921,925],{},[168,922,923],{"href":343},[8,924,346],{}," — How far through a repeating cycle the clock is, 0..1.",[859,927,928,932],{},[168,929,930],{"href":369},[8,931,372],{}," — A 0..1 value that starts slow, speeds up, and slows again at the end.",[859,934,935,939],{},[168,936,937],{"href":363},[8,938,366],{}," — A 0..1 value that starts fast and slows to a stop.",[859,941,942,946],{},[168,943,944],{"href":356},[8,945,359],{}," — A 0..1 value that starts slow and speeds up.",[859,948,949,955],{},[168,950,952],{"href":951},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Fflashes",[8,953,954],{},"flashes"," — Short, bright flashes at a steady rate: dark most of the time, peaking briefly to 1.",[957,958,959],"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":217,"searchDepth":395,"depth":395,"links":961},[962,963,964],{"id":243,"depth":395,"text":244},{"id":375,"depth":395,"text":376},{"id":849,"depth":395,"text":850},"motion","Words that turn a clock into rhythm.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fmotion.md","md","space","Shapes, frames & warps",{},"\u002Fdocs\u002Fprimitives\u002Fmotion",{"title":147,"description":966},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fmotion.ts","docs\u002Fprimitives\u002F23.motion\u002Findex","mjfyq3dNIdUx6MclbCthpuVtabl1y_EoCXS_qBz1uRc"]