[{"data":1,"prerenderedAt":68},["ShallowReactive",2],{"tool-content-en-bezier-curve-editor":3},{"id":4,"title":5,"body":6,"description":58,"extension":59,"locale":60,"meta":61,"navigation":62,"path":63,"seo":64,"stem":65,"toolId":66,"__hash__":67},"tools\u002Ftools\u002Fen\u002Fbezier-curve-editor.md","Cubic Bezier Editor",{"type":7,"value":8,"toc":53},"minimark",[9,13,22,50],[10,11,5],"h2",{"id":12},"cubic-bezier-editor",[14,15,16,17,21],"p",{},"Design ",[18,19,20],"code",{},"cubic-bezier()"," timing functions visually and copy them straight into your CSS.",[23,24,25,29,32,35],"ul",{},[26,27,28],"li",{},"Drag the two control points on the speed curve — x stays between 0 and 1 as CSS requires, while y may overshoot the unit box, which is how back-style easing gets its bounce.",[26,30,31],{},"Pick from common templates: CSS keywords (linear, ease, ease-in\u002Fout), quad\u002Fcubic\u002Fquart easing, and back curves with overshoot.",[26,33,34],{},"A ball preview runs the current curve across a track, with duration and loop controls, plus a scrubber to inspect any single moment. Overshoot carries the ball slightly past the ends before it settles.",[26,36,37,38,41,42,45,46,49],{},"Copy the ",[18,39,40],{},"cubic-bezier(...)"," value alone or together with ready-made ",[18,43,44],{},"transition-timing-function"," and ",[18,47,48],{},"animation-timing-function"," declarations.",[14,51,52],{},"Everything runs locally in your browser.",{"title":54,"searchDepth":55,"depth":55,"links":56},"",2,[57],{"id":12,"depth":55,"text":5},"Drag control points to design cubic-bezier easing curves, try presets, preview the motion, and copy the CSS.","md","en",{},true,"\u002Ftools\u002Fen\u002Fbezier-curve-editor",{"title":5,"description":58},"tools\u002Fen\u002Fbezier-curve-editor","bezier-curve-editor","LpnbuSwPrklNIPlP4MJmav_KRp5XJN4PCzpuV8bTd-g",1792391416352]