[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"github-stars":3,"guide-nav":5,"doc-\u002Fdocs\u002Fprimitives\u002Fmotion":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":949,"categorySlug":949,"categoryTitle":950,"curated":382,"description":951,"editUrl":952,"extension":953,"group":954,"groupTitle":955,"kind":950,"meta":956,"navigation":382,"path":957,"seo":958,"sourceUrl":959,"stem":960,"wordCount":504,"__hash__":961},"primitives\u002Fdocs\u002Fprimitives\u002F23.motion\u002Findex.md","Motion & timing",{"type":133,"value":134,"toc":944},"minimark",[135,139,180,195,224,229,357,361,831,835,940],[136,137,131],"h1",{"id":138},"motion-timing",[140,141,142,143,146,147,150,151,158,159,165,166,172,173,179],"p",{},"Words that turn a clock into rhythm. The clock is a number of seconds: declare\n",[10,144,145],{},"animatedTime: {speed: 'speed'}"," on the definition and read the layer's clock with\n",[10,148,149],{},"animatedTime(params)",", and a speed prop and a pause button come for free. ",[152,153,155],"a",{"href":154},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Fcycle",[10,156,157],{},"cycle"," splits\nthat clock into \"which pass is this\" and \"how far through it are we\", ",[152,160,162],{"href":161},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Fcycleseed",[10,163,164],{},"cycleSeed"," gives each\npass a stable random number, ",[152,167,169],{"href":168},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Foscillate",[10,170,171],{},"oscillate"," and ",[152,174,176],{"href":175},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Fpulsetrain",[10,177,178],{},"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.",[140,181,182,172,188,194],{},[152,183,185],{"href":184},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Foscillating",[10,186,187],{},"oscillating",[152,189,191],{"href":190},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Fpulsing",[10,192,193],{},"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.",[196,197,202],"pre",{"className":198,"code":199,"language":200,"meta":201,"style":201},"language-ts shiki shiki-themes github-dark","import {motion} from 'shaders\u002Fstd'\n","ts","",[10,203,204],{"__ignoreMap":201},[205,206,209,213,217,220],"span",{"class":207,"line":208},"line",1,[205,210,212],{"class":211},"snl16","import",[205,214,216],{"class":215},"s95oV"," {motion} ",[205,218,219],{"class":211},"from",[205,221,223],{"class":222},"sU2Wk"," 'shaders\u002Fstd'\n",[225,226,228],"h2",{"id":227},"reach-for-it-when","Reach for it when",[230,231,232,245],"table",{},[233,234,235],"thead",{},[236,237,238,242],"tr",{},[239,240,241],"th",{},"When you need",[239,243,244],{},"Use",[246,247,248,261,272,284,296,307,318,331],"tbody",{},[236,249,250,254],{},[251,252,253],"td",{},"a warp or effect knob that sweeps back and forth by itself",[251,255,256,260],{},[152,257,258],{"href":184},[10,259,187],{}," in the slot",[236,262,263,266],{},[251,264,265],{},"a knob that switches on and off in a rhythm",[251,267,268,260],{},[152,269,270],{"href":190},[10,271,193],{},[236,273,274,277],{},[251,275,276],{},"something happens every N seconds",[251,278,279,283],{},[152,280,281],{"href":154},[10,282,157],{},", which gives progress and index",[236,285,286,289],{},[251,287,288],{},"each pass should look different but hold still while it lasts",[251,290,291,295],{},[152,292,293],{"href":161},[10,294,164],{}," on the cycle's index",[236,297,298,301],{},[251,299,300],{},"a smooth breathing value between two numbers",[251,302,303],{},[152,304,305],{"href":168},[10,306,171],{},[236,308,309,312],{},[251,310,311],{},"a blink or strobe with a controllable on time",[251,313,314],{},[152,315,316],{"href":175},[10,317,178],{},[236,319,320,323],{},[251,321,322],{},"just the 0..1 position inside a repeating cycle",[251,324,325],{},[152,326,328],{"href":327},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Fphase",[10,329,330],{},"phase",[236,332,333,336],{},[251,334,335],{},"a progress that accelerates, settles or glides",[251,337,338,344,345,344,351],{},[152,339,341],{"href":340},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Feasein",[10,342,343],{},"easeIn",", ",[152,346,348],{"href":347},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Feaseout",[10,349,350],{},"easeOut",[152,352,354],{"href":353},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Feaseinout",[10,355,356],{},"easeInOut",[225,358,360],{"id":359},"example","Example",[196,362,364],{"className":198,"code":363,"language":200,"meta":201,"style":201},"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",[10,365,366,377,384,426,431,438,460,472,484,490,502,513,524,535,541,563,601,617,655,683,703,737,795,821,826],{"__ignoreMap":201},[205,367,368,370,373,375],{"class":207,"line":208},[205,369,212],{"class":211},[205,371,372],{"class":215}," {defineShader, p, uniformOf, animatedTime, math, motion, transformColor} ",[205,374,219],{"class":211},[205,376,223],{"class":222},[205,378,380],{"class":207,"line":379},2,[205,381,383],{"emptyLinePlaceholder":382},true,"\n",[205,385,387,390,393,397,399,402,404,407,409,412,414,417,420,423],{"class":207,"line":386},3,[205,388,389],{"class":211},"const",[205,391,392],{"class":215}," {",[205,394,396],{"class":395},"sDLfK","sub",[205,398,344],{"class":215},[205,400,401],{"class":395},"mul",[205,403,344],{"class":215},[205,405,406],{"class":395},"mix",[205,408,344],{"class":215},[205,410,411],{"class":395},"splat3",[205,413,344],{"class":215},[205,415,416],{"class":395},"vec4",[205,418,419],{"class":215},"} ",[205,421,422],{"class":211},"=",[205,424,425],{"class":215}," math\n",[205,427,429],{"class":207,"line":428},4,[205,430,383],{"emptyLinePlaceholder":382},[205,432,434],{"class":207,"line":433},5,[205,435,437],{"class":436},"sAwPA","\u002F\u002F Flash: every `period` seconds the canvas lights up in a new random blend of two colors and fades out.\n",[205,439,441,444,447,450,453,457],{"class":207,"line":440},6,[205,442,443],{"class":211},"export",[205,445,446],{"class":211}," const",[205,448,449],{"class":395}," Flash",[205,451,452],{"class":211}," =",[205,454,456],{"class":455},"svObZ"," defineShader",[205,458,459],{"class":215},"({\n",[205,461,463,466,469],{"class":207,"line":462},7,[205,464,465],{"class":215},"  name: ",[205,467,468],{"class":222},"'Flash'",[205,470,471],{"class":215},",\n",[205,473,475,478,481],{"class":207,"line":474},8,[205,476,477],{"class":215},"  animatedTime: {speed: ",[205,479,480],{"class":222},"'speed'",[205,482,483],{"class":215},"},\n",[205,485,487],{"class":207,"line":486},9,[205,488,489],{"class":215},"  props: {\n",[205,491,493,496,499],{"class":207,"line":492},10,[205,494,495],{"class":215},"    colorA: {default: ",[205,497,498],{"class":222},"'#ff7e5f'",[205,500,501],{"class":215},", transform: transformColor},\n",[205,503,505,508,511],{"class":207,"line":504},11,[205,506,507],{"class":215},"    colorB: {default: ",[205,509,510],{"class":222},"'#7dd3fc'",[205,512,501],{"class":215},[205,514,516,519,522],{"class":207,"line":515},12,[205,517,518],{"class":215},"    period: {default: ",[205,520,521],{"class":395},"2",[205,523,483],{"class":215},[205,525,527,530,533],{"class":207,"line":526},13,[205,528,529],{"class":215},"    speed: {default: ",[205,531,532],{"class":395},"1",[205,534,483],{"class":215},[205,536,538],{"class":207,"line":537},14,[205,539,540],{"class":215},"  },\n",[205,542,544,547,550,554,557,560],{"class":207,"line":543},15,[205,545,546],{"class":455},"  paint",[205,548,549],{"class":215},": (",[205,551,553],{"class":552},"s9osk","params",[205,555,556],{"class":215},") ",[205,558,559],{"class":211},"=>",[205,561,562],{"class":215}," {\n",[205,564,566,569,572,574,577,580,583,586,588,590,593,596,598],{"class":207,"line":565},16,[205,567,568],{"class":211},"    const",[205,570,571],{"class":455}," u",[205,573,452],{"class":211},[205,575,576],{"class":215}," (",[205,578,579],{"class":552},"name",[205,581,582],{"class":211},":",[205,584,585],{"class":395}," string",[205,587,556],{"class":215},[205,589,559],{"class":211},[205,591,592],{"class":455}," uniformOf",[205,594,595],{"class":215},"(",[205,597,140],{"class":455},[205,599,600],{"class":215},"(name), params)\n",[205,602,604,606,609,611,614],{"class":207,"line":603},17,[205,605,568],{"class":211},[205,607,608],{"class":395}," t",[205,610,452],{"class":211},[205,612,613],{"class":455}," animatedTime",[205,615,616],{"class":215},"(params)\n",[205,618,620,622,624,627,629,632,634,636,639,641,644,647,649,652],{"class":207,"line":619},18,[205,621,568],{"class":211},[205,623,392],{"class":215},[205,625,626],{"class":395},"progress",[205,628,344],{"class":215},[205,630,631],{"class":395},"index",[205,633,419],{"class":215},[205,635,422],{"class":211},[205,637,638],{"class":215}," motion.",[205,640,157],{"class":455},[205,642,643],{"class":215},"(t, ",[205,645,646],{"class":455},"u",[205,648,595],{"class":215},[205,650,651],{"class":222},"'period'",[205,653,654],{"class":215},"))\n",[205,656,658,660,663,665,667,669,671,673,675,677,680],{"class":207,"line":657},19,[205,659,568],{"class":211},[205,661,662],{"class":395}," fade",[205,664,452],{"class":211},[205,666,638],{"class":215},[205,668,350],{"class":455},[205,670,595],{"class":215},[205,672,396],{"class":455},[205,674,595],{"class":215},[205,676,532],{"class":395},[205,678,679],{"class":215},", progress)) ",[205,681,682],{"class":436},"\u002F\u002F bright at the start of each pass, then out\n",[205,684,686,688,691,693,695,697,700],{"class":207,"line":685},20,[205,687,568],{"class":211},[205,689,690],{"class":395}," pick",[205,692,452],{"class":211},[205,694,638],{"class":215},[205,696,164],{"class":455},[205,698,699],{"class":215},"(index) ",[205,701,702],{"class":436},"\u002F\u002F one stable random blend per pass\n",[205,704,706,708,711,713,715,717,720,723,726,729,732,734],{"class":207,"line":705},21,[205,707,568],{"class":211},[205,709,710],{"class":395}," breathe",[205,712,452],{"class":211},[205,714,638],{"class":215},[205,716,171],{"class":455},[205,718,719],{"class":215},"(t, {rate: ",[205,721,722],{"class":395},"0.5",[205,724,725],{"class":215},", min: ",[205,727,728],{"class":395},"0.7",[205,730,731],{"class":215},", max: ",[205,733,532],{"class":395},[205,735,736],{"class":215},"})\n",[205,738,740,742,745,747,750,752,754,756,759,762,765,767,770,773,775,777,780,782,784,786,788,790,792],{"class":207,"line":739},22,[205,741,568],{"class":211},[205,743,744],{"class":395}," rgb",[205,746,452],{"class":211},[205,748,749],{"class":455}," mix",[205,751,595],{"class":215},[205,753,646],{"class":455},[205,755,595],{"class":215},[205,757,758],{"class":222},"'colorA'",[205,760,761],{"class":215},").",[205,763,764],{"class":455},"member",[205,766,595],{"class":215},[205,768,769],{"class":222},"'rgb'",[205,771,772],{"class":215},"), ",[205,774,646],{"class":455},[205,776,595],{"class":215},[205,778,779],{"class":222},"'colorB'",[205,781,761],{"class":215},[205,783,764],{"class":455},[205,785,595],{"class":215},[205,787,769],{"class":222},[205,789,772],{"class":215},[205,791,411],{"class":455},[205,793,794],{"class":215},"(pick))\n",[205,796,798,801,804,806,808,811,813,816,818],{"class":207,"line":797},23,[205,799,800],{"class":211},"    return",[205,802,803],{"class":455}," vec4",[205,805,595],{"class":215},[205,807,401],{"class":455},[205,809,810],{"class":215},"(rgb, ",[205,812,401],{"class":455},[205,814,815],{"class":215},"(fade, breathe)), ",[205,817,532],{"class":395},[205,819,820],{"class":215},")\n",[205,822,824],{"class":207,"line":823},24,[205,825,540],{"class":215},[205,827,829],{"class":207,"line":828},25,[205,830,736],{"class":215},[225,832,834],{"id":833},"words","Words",[836,837,839],"primitive-words",{":words":838},"[{\"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.\"}]",[840,841,842,857,864,877,884,896,903,910,917,924,931],"ul",{},[843,844,845,849,850,172,853,856],"li",{},[152,846,847],{"href":184},[10,848,187],{}," — A knob that sweeps between ",[10,851,852],{},"min",[10,854,855],{},"max"," on its own, for any slot that takes a prop.",[843,858,859,863],{},[152,860,861],{"href":190},[10,862,193],{}," — A knob that switches on and off in a rhythm, for any slot that takes a prop.",[843,865,866,870,871,873,874,876],{},[152,867,868],{"href":154},[10,869,157],{}," — A repeating cycle as two numbers: ",[10,872,626],{}," (0..1 through the current cycle) and ",[10,875,631],{}," (which cycle this is).",[843,878,879,883],{},[152,880,881],{"href":161},[10,882,164],{}," — A random but stable number, 0..1, for each cycle index.",[843,885,886,890,891,172,893,895],{},[152,887,888],{"href":168},[10,889,171],{}," — A smooth back-and-forth between ",[10,892,852],{},[10,894,855],{},".",[843,897,898,902],{},[152,899,900],{"href":175},[10,901,178],{}," — An on\u002Foff rhythm: 1 for the first part of each cycle, 0 for the rest.",[843,904,905,909],{},[152,906,907],{"href":327},[10,908,330],{}," — How far through a repeating cycle the clock is, 0..1.",[843,911,912,916],{},[152,913,914],{"href":353},[10,915,356],{}," — A 0..1 value that starts slow, speeds up, and slows again at the end.",[843,918,919,923],{},[152,920,921],{"href":347},[10,922,350],{}," — A 0..1 value that starts fast and slows to a stop.",[843,925,926,930],{},[152,927,928],{"href":340},[10,929,343],{}," — A 0..1 value that starts slow and speeds up.",[843,932,933,939],{},[152,934,936],{"href":935},"\u002Fdocs\u002Fprimitives\u002Fmotion\u002Fflashes",[10,937,938],{},"flashes"," — Short, bright flashes at a steady rate: dark most of the time, peaking briefly to 1.",[941,942,943],"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":201,"searchDepth":379,"depth":379,"links":945},[946,947,948],{"id":227,"depth":379,"text":228},{"id":359,"depth":379,"text":360},{"id":833,"depth":379,"text":834},"motion",null,"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":131,"description":951},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fmotion.ts","docs\u002Fprimitives\u002F23.motion\u002Findex","mjfyq3dNIdUx6MclbCthpuVtabl1y_EoCXS_qBz1uRc"]