[{"data":1,"prerenderedAt":333},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fmotion":3},{"id":4,"title":5,"body":6,"description":324,"extension":325,"meta":326,"navigation":327,"path":328,"rawbody":329,"seo":330,"stem":331,"__hash__":332},"docs\u002Fdocs\u002Fmotion.md","Motion",{"type":7,"value":8,"toc":318},"minimark",[9,13,18,25,106,115,158,162,165,227,230,244,248,254,307,311,314],[10,11,12],"p",{},"Every Kinesis value moves on a spring. A spring keeps its speed when the target changes mid-way, so motion stays continuous when the pointer turns back or a hover ends early. An animation with a fixed duration has to restart instead.",[14,15,17],"h2",{"id":16},"presets","Presets",[10,19,20,24],{},[21,22,23],"code",{},"--k-motion"," picks a preset. It inherits, so one value on a scope covers everything inside.",[26,27,28,41],"table",{},[29,30,31],"thead",{},[32,33,34,38],"tr",{},[35,36,37],"th",{},"Preset",[35,39,40],{},"Character",[42,43,44,56,66,76,86,96],"tbody",{},[32,45,46,53],{},[47,48,49,52],"td",{},[21,50,51],{},"smooth"," (default)",[47,54,55],{},"settles quickly, no overshoot",[32,57,58,63],{},[47,59,60],{},[21,61,62],{},"soft",[47,64,65],{},"slower and floaty, for large layers",[32,67,68,73],{},[47,69,70],{},[21,71,72],{},"snappy",[47,74,75],{},"quick and precise, for controls",[32,77,78,83],{},[47,79,80],{},[21,81,82],{},"bouncy",[47,84,85],{},"overshoots and wobbles",[32,87,88,93],{},[47,89,90],{},[21,91,92],{},"heavy",[47,94,95],{},"slow to start and to stop",[32,97,98,103],{},[47,99,100],{},[21,101,102],{},"instant",[47,104,105],{},"no spring, jumps to the target",[10,107,108,109,114],{},"Compare them on the card at the top of the ",[110,111,113],"a",{"href":112},"\u002F","home page",".",[116,117,122],"pre",{"className":118,"code":119,"language":120,"meta":121,"style":121},"language-css shiki shiki-themes github-dark-default",".hero { --k-motion: soft; }\n.hero .cta { --k-motion: bouncy; }\n","css","",[21,123,124,143],{"__ignoreMap":121},[125,126,129,133,137,140],"span",{"class":127,"line":128},"line",1,[125,130,132],{"class":131},"sFSAA",".hero",[125,134,136],{"class":135},"sZEs4"," { ",[125,138,23],{"class":139},"sQhOw",[125,141,142],{"class":135},": soft; }\n",[125,144,146,148,151,153,155],{"class":127,"line":145},2,[125,147,132],{"class":131},[125,149,150],{"class":131}," .cta",[125,152,136],{"class":135},[125,154,23],{"class":139},[125,156,157],{"class":135},": bouncy; }\n",[14,159,161],{"id":160},"custom-springs","Custom springs",[10,163,164],{},"Two or three numbers instead of a name: stiffness, damping, and optional mass.",[116,166,168],{"className":118,"code":167,"language":120,"meta":121,"style":121},".card {\n  --k-motion: 260 18;       \u002F* stiffness, damping *\u002F\n  --k-motion: 120 20 1.5;   \u002F* stiffness, damping, mass *\u002F\n}\n",[21,169,170,178,199,221],{"__ignoreMap":121},[125,171,172,175],{"class":127,"line":128},[125,173,174],{"class":131},".card",[125,176,177],{"class":135}," {\n",[125,179,180,183,186,189,192,195],{"class":127,"line":145},[125,181,182],{"class":139},"  --k-motion",[125,184,185],{"class":135},": ",[125,187,188],{"class":131},"260",[125,190,191],{"class":131}," 18",[125,193,194],{"class":135},";       ",[125,196,198],{"class":197},"sH3jZ","\u002F* stiffness, damping *\u002F\n",[125,200,202,204,206,209,212,215,218],{"class":127,"line":201},3,[125,203,182],{"class":139},[125,205,185],{"class":135},[125,207,208],{"class":131},"120",[125,210,211],{"class":131}," 20",[125,213,214],{"class":131}," 1.5",[125,216,217],{"class":135},";   ",[125,219,220],{"class":197},"\u002F* stiffness, damping, mass *\u002F\n",[125,222,224],{"class":127,"line":223},4,[125,225,226],{"class":135},"}\n",[10,228,229],{},"Higher stiffness is faster. Higher damping bounces less. A spring never overshoots when damping is at least twice the square root of stiffness times mass.",[10,231,232,233,236,237,240,241,114],{},"In JavaScript, pass ",[21,234,235],{},"motion: \"bouncy\"",", ",[21,238,239],{},"motion: [260, 18]",", or ",[21,242,243],{},"motion: { stiffness: 260, damping: 18 }",[14,245,247],{"id":246},"intensity","Intensity",[10,249,250,253],{},[21,251,252],{},"--k-intensity"," multiplies every pointer effect. It inherits, which makes it an easy way to tone motion down on small screens:",[116,255,257],{"className":118,"code":256,"language":120,"meta":121,"style":121},"@media (max-width: 640px) {\n  [data-kinesis] { --k-intensity: 0.5; }\n}\n",[21,258,259,282,303],{"__ignoreMap":121},[125,260,261,265,268,271,273,276,279],{"class":127,"line":128},[125,262,264],{"class":263},"suJrU","@media",[125,266,267],{"class":135}," (",[125,269,270],{"class":131},"max-width",[125,272,185],{"class":135},[125,274,275],{"class":131},"640",[125,277,278],{"class":263},"px",[125,280,281],{"class":135},") {\n",[125,283,284,287,290,293,295,297,300],{"class":127,"line":145},[125,285,286],{"class":135},"  [",[125,288,289],{"class":131},"data-kinesis",[125,291,292],{"class":135},"] { ",[125,294,252],{"class":139},[125,296,185],{"class":135},[125,298,299],{"class":131},"0.5",[125,301,302],{"class":135},"; }\n",[125,304,305],{"class":127,"line":201},[125,306,226],{"class":135},[14,308,310],{"id":309},"frame-rate","Frame rate",[10,312,313],{},"Springs are solved exactly instead of stepped. They look the same at 60 Hz, at 120 Hz, and when frames drop. Hidden tabs pause, and motion resumes where it stopped.",[315,316,317],"style",{},"html pre.shiki code .sFSAA, html code.shiki .sFSAA{--shiki-default:#79C0FF}html pre.shiki code .sZEs4, html code.shiki .sZEs4{--shiki-default:#E6EDF3}html pre.shiki code .sQhOw, html code.shiki .sQhOw{--shiki-default:#FFA657}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 .sH3jZ, html code.shiki .sH3jZ{--shiki-default:#8B949E}html pre.shiki code .suJrU, html code.shiki .suJrU{--shiki-default:#FF7B72}",{"title":121,"searchDepth":201,"depth":201,"links":319},[320,321,322,323],{"id":16,"depth":145,"text":17},{"id":160,"depth":145,"text":161},{"id":246,"depth":145,"text":247},{"id":309,"depth":145,"text":310},"Spring presets, custom springs, and intensity.","md",{},true,"\u002Fdocs\u002Fmotion","---\ntitle: Motion\ndescription: Spring presets, custom springs, and intensity.\n---\n\nEvery Kinesis value moves on a spring. A spring keeps its speed when the target changes mid-way, so motion stays continuous when the pointer turns back or a hover ends early. An animation with a fixed duration has to restart instead.\n\n## Presets\n\n`--k-motion` picks a preset. It inherits, so one value on a scope covers everything inside.\n\n| Preset | Character |\n| --- | --- |\n| `smooth` (default) | settles quickly, no overshoot |\n| `soft` | slower and floaty, for large layers |\n| `snappy` | quick and precise, for controls |\n| `bouncy` | overshoots and wobbles |\n| `heavy` | slow to start and to stop |\n| `instant` | no spring, jumps to the target |\n\nCompare them on the card at the top of the [home page](\u002F).\n\n```css\n.hero { --k-motion: soft; }\n.hero .cta { --k-motion: bouncy; }\n```\n\n## Custom springs\n\nTwo or three numbers instead of a name: stiffness, damping, and optional mass.\n\n```css\n.card {\n  --k-motion: 260 18;       \u002F* stiffness, damping *\u002F\n  --k-motion: 120 20 1.5;   \u002F* stiffness, damping, mass *\u002F\n}\n```\n\nHigher stiffness is faster. Higher damping bounces less. A spring never overshoots when damping is at least twice the square root of stiffness times mass.\n\nIn JavaScript, pass `motion: \"bouncy\"`, `motion: [260, 18]`, or `motion: { stiffness: 260, damping: 18 }`.\n\n## Intensity\n\n`--k-intensity` multiplies every pointer effect. It inherits, which makes it an easy way to tone motion down on small screens:\n\n```css\n@media (max-width: 640px) {\n  [data-kinesis] { --k-intensity: 0.5; }\n}\n```\n\n## Frame rate\n\nSprings are solved exactly instead of stepped. They look the same at 60 Hz, at 120 Hz, and when frames drop. Hidden tabs pause, and motion resumes where it stopped.\n",{"title":5,"description":324},"docs\u002Fmotion","O2wiGrQQWAk9uCr8npwHI3fAbe_edH1t9aK3HENg3dM",1791309902868]