[{"data":1,"prerenderedAt":1087},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcss":3},{"id":4,"title":5,"body":6,"description":1079,"extension":1080,"meta":1081,"navigation":123,"path":1082,"rawbody":1083,"seo":1084,"stem":1085,"__hash__":1086},"docs\u002Fdocs\u002Fcss.md","Working with CSS",{"type":7,"value":8,"toc":1067},"minimark",[9,36,41,287,290,294,400,403,414,425,478,488,492,513,548,552,558,570,574,585,738,743,753,758,813,817,833,999,1002,1006,1037,1044,1048,1060,1063],[10,11,12,13,23,24,27,28,31,32,35],"p",{},"Kinesis properties are CSS variables registered with ",[14,15,19],"a",{"href":16,"rel":17},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fdocs\u002FWeb\u002FCSS\u002F@property",[18],"nofollow",[20,21,22],"code",{},"@property"," and a type, such as ",[20,25,26],{},"\u003Clength>"," or ",[20,29,30],{},"\u003Cangle>",". The browser computes their values the way it computes ",[20,33,34],{},"width",", so anything valid in CSS works in them.",[37,38,40],"h2",{"id":39},"tokens-units-and-calc","Tokens, units, and calc()",[42,43,48],"pre",{"className":44,"code":45,"language":46,"meta":47,"style":47},"language-css shiki shiki-themes github-dark-default",":root {\n  --space: 8px;\n  --brand: oklch(62% 0.2 265);\n}\n\n.layer {\n  --k-parallax: calc(var(--space) * 4);   \u002F* 32px *\u002F\n  --k-radius: 12vw;\n}\n\n.title {\n  font-size: 40px;\n  --k-parallax: 1em;                       \u002F* 40px: this element's font size *\u002F\n}\n\n.chip {\n  --k-when: hover;\n  --k-background: var(--brand);\n}\n","css","",[20,49,50,63,83,112,118,125,133,170,186,191,196,204,219,238,243,248,256,265,282],{"__ignoreMap":47},[51,52,55,59],"span",{"class":53,"line":54},"line",1,[51,56,58],{"class":57},"sFSAA",":root",[51,60,62],{"class":61},"sZEs4"," {\n",[51,64,66,70,73,76,80],{"class":53,"line":65},2,[51,67,69],{"class":68},"sQhOw","  --space",[51,71,72],{"class":61},": ",[51,74,75],{"class":57},"8",[51,77,79],{"class":78},"suJrU","px",[51,81,82],{"class":61},";\n",[51,84,86,89,91,94,97,100,103,106,109],{"class":53,"line":85},3,[51,87,88],{"class":68},"  --brand",[51,90,72],{"class":61},[51,92,93],{"class":57},"oklch",[51,95,96],{"class":61},"(",[51,98,99],{"class":57},"62",[51,101,102],{"class":78},"%",[51,104,105],{"class":57}," 0.2",[51,107,108],{"class":57}," 265",[51,110,111],{"class":61},");\n",[51,113,115],{"class":53,"line":114},4,[51,116,117],{"class":61},"}\n",[51,119,121],{"class":53,"line":120},5,[51,122,124],{"emptyLinePlaceholder":123},true,"\n",[51,126,128,131],{"class":53,"line":127},6,[51,129,130],{"class":57},".layer",[51,132,62],{"class":61},[51,134,136,139,141,144,146,149,151,154,157,160,163,166],{"class":53,"line":135},7,[51,137,138],{"class":68},"  --k-parallax",[51,140,72],{"class":61},[51,142,143],{"class":57},"calc",[51,145,96],{"class":61},[51,147,148],{"class":57},"var",[51,150,96],{"class":61},[51,152,153],{"class":68},"--space",[51,155,156],{"class":61},") ",[51,158,159],{"class":78},"*",[51,161,162],{"class":57}," 4",[51,164,165],{"class":61},");   ",[51,167,169],{"class":168},"sH3jZ","\u002F* 32px *\u002F\n",[51,171,173,176,178,181,184],{"class":53,"line":172},8,[51,174,175],{"class":68},"  --k-radius",[51,177,72],{"class":61},[51,179,180],{"class":57},"12",[51,182,183],{"class":78},"vw",[51,185,82],{"class":61},[51,187,189],{"class":53,"line":188},9,[51,190,117],{"class":61},[51,192,194],{"class":53,"line":193},10,[51,195,124],{"emptyLinePlaceholder":123},[51,197,199,202],{"class":53,"line":198},11,[51,200,201],{"class":57},".title",[51,203,62],{"class":61},[51,205,207,210,212,215,217],{"class":53,"line":206},12,[51,208,209],{"class":57},"  font-size",[51,211,72],{"class":61},[51,213,214],{"class":57},"40",[51,216,79],{"class":78},[51,218,82],{"class":61},[51,220,222,224,226,229,232,235],{"class":53,"line":221},13,[51,223,138],{"class":68},[51,225,72],{"class":61},[51,227,228],{"class":57},"1",[51,230,231],{"class":78},"em",[51,233,234],{"class":61},";                       ",[51,236,237],{"class":168},"\u002F* 40px: this element's font size *\u002F\n",[51,239,241],{"class":53,"line":240},14,[51,242,117],{"class":61},[51,244,246],{"class":53,"line":245},15,[51,247,124],{"emptyLinePlaceholder":123},[51,249,251,254],{"class":53,"line":250},16,[51,252,253],{"class":57},".chip",[51,255,62],{"class":61},[51,257,259,262],{"class":53,"line":258},17,[51,260,261],{"class":68},"  --k-when",[51,263,264],{"class":61},": hover;\n",[51,266,268,271,273,275,277,280],{"class":53,"line":267},18,[51,269,270],{"class":68},"  --k-background",[51,272,72],{"class":61},[51,274,148],{"class":57},[51,276,96],{"class":61},[51,278,279],{"class":68},"--brand",[51,281,111],{"class":61},[51,283,285],{"class":53,"line":284},19,[51,286,117],{"class":61},[10,288,289],{},"A value that doesn't match a property's type is ignored, like any invalid CSS.",[37,291,293],{"id":292},"media-queries-and-container-queries","Media queries and container queries",[42,295,297],{"className":44,"code":296,"language":46,"meta":47,"style":47},".hero__art { --k-parallax: 40px; }\n\n@media (max-width: 700px) {\n  .hero__art { --k-parallax: 12px; }\n}\n\n@media (pointer: coarse) {\n  .card { --k-tilt: 0deg; }\n}\n",[20,298,299,319,323,344,361,365,369,376,396],{"__ignoreMap":47},[51,300,301,304,307,310,312,314,316],{"class":53,"line":54},[51,302,303],{"class":57},".hero__art",[51,305,306],{"class":61}," { ",[51,308,309],{"class":68},"--k-parallax",[51,311,72],{"class":61},[51,313,214],{"class":57},[51,315,79],{"class":78},[51,317,318],{"class":61},"; }\n",[51,320,321],{"class":53,"line":65},[51,322,124],{"emptyLinePlaceholder":123},[51,324,325,328,331,334,336,339,341],{"class":53,"line":85},[51,326,327],{"class":78},"@media",[51,329,330],{"class":61}," (",[51,332,333],{"class":57},"max-width",[51,335,72],{"class":61},[51,337,338],{"class":57},"700",[51,340,79],{"class":78},[51,342,343],{"class":61},") {\n",[51,345,346,349,351,353,355,357,359],{"class":53,"line":114},[51,347,348],{"class":57},"  .hero__art",[51,350,306],{"class":61},[51,352,309],{"class":68},[51,354,72],{"class":61},[51,356,180],{"class":57},[51,358,79],{"class":78},[51,360,318],{"class":61},[51,362,363],{"class":53,"line":120},[51,364,117],{"class":61},[51,366,367],{"class":53,"line":127},[51,368,124],{"emptyLinePlaceholder":123},[51,370,371,373],{"class":53,"line":135},[51,372,327],{"class":78},[51,374,375],{"class":61}," (pointer: coarse) {\n",[51,377,378,381,383,386,388,391,394],{"class":53,"line":172},[51,379,380],{"class":57},"  .card",[51,382,306],{"class":61},[51,384,385],{"class":68},"--k-tilt",[51,387,72],{"class":61},[51,389,390],{"class":57},"0",[51,392,393],{"class":78},"deg",[51,395,318],{"class":61},[51,397,398],{"class":53,"line":188},[51,399,117],{"class":61},[10,401,402],{},"Kinesis re-reads configuration after a window resize, so media queries apply on their own.",[37,404,406,409,410,413],{"id":405},"and-classes",[407,408],"hover",{},", ",[411,412],"focus",{},", and classes",[10,415,416,417,420,421,424],{},"Kinesis picks up changes from classes, ",[20,418,419],{},":hover",", and ",[20,422,423],{},":focus",":",[42,426,428],{"className":44,"code":427,"language":46,"meta":47,"style":47},".card { --k-tilt: 4deg; }\n.card:hover { --k-tilt: 12deg; }\n.card.is-selected { --k-motion: bouncy; }\n",[20,429,430,448,465],{"__ignoreMap":47},[51,431,432,435,437,439,441,444,446],{"class":53,"line":54},[51,433,434],{"class":57},".card",[51,436,306],{"class":61},[51,438,385],{"class":68},[51,440,72],{"class":61},[51,442,443],{"class":57},"4",[51,445,393],{"class":78},[51,447,318],{"class":61},[51,449,450,453,455,457,459,461,463],{"class":53,"line":65},[51,451,452],{"class":57},".card:hover",[51,454,306],{"class":61},[51,456,385],{"class":68},[51,458,72],{"class":61},[51,460,180],{"class":57},[51,462,393],{"class":78},[51,464,318],{"class":61},[51,466,467,470,472,475],{"class":53,"line":85},[51,468,469],{"class":57},".card.is-selected",[51,471,306],{"class":61},[51,473,474],{"class":68},"--k-motion",[51,476,477],{"class":61},": bouncy; }\n",[10,479,480,481,487],{},"For hover effects, the ",[14,482,484,486],{"href":483},"\u002Fdocs\u002Freactions\u002F#hover",[20,485,407],{}," reaction"," is usually better. It springs, and it doesn't flicker when the element moves away from the pointer.",[37,489,491],{"id":490},"themes-and-stylesheets","Themes and stylesheets",[10,493,494,495,498,499,27,502,505,506,509,510,424],{},"Kinesis re-reads the page when a class or ",[20,496,497],{},"data-theme"," changes on ",[20,500,501],{},"\u003Chtml>",[20,503,504],{},"\u003Cbody>",", and when a stylesheet is added. For changes it can't see, like ",[20,507,508],{},":has()"," reacting to a distant element or a stylesheet edited through the CSSOM, call ",[20,511,512],{},"refresh()",[42,514,518],{"className":515,"code":516,"language":517,"meta":47,"style":47},"language-js shiki shiki-themes github-dark-default","import { refresh } from \"@amineyarman\u002Fkinesis\"\n\nrefresh()\n","js",[20,519,520,535,539],{"__ignoreMap":47},[51,521,522,525,528,531],{"class":53,"line":54},[51,523,524],{"class":78},"import",[51,526,527],{"class":61}," { refresh } ",[51,529,530],{"class":78},"from",[51,532,534],{"class":533},"s9uIt"," \"@amineyarman\u002Fkinesis\"\n",[51,536,537],{"class":53,"line":65},[51,538,124],{"emptyLinePlaceholder":123},[51,540,541,545],{"class":53,"line":85},[51,542,544],{"class":543},"sc3cj","refresh",[51,546,547],{"class":61},"()\n",[37,549,551],{"id":550},"what-inherits","What inherits",[10,553,554,555,557],{},"Interaction properties apply only to the element that declares them. ",[20,556,385],{}," on a card doesn't tilt its children.",[10,559,560,561,409,563,420,566,569],{},"Three context properties inherit, so you can set them once on a scope: ",[20,562,474],{},[20,564,565],{},"--k-intensity",[20,567,568],{},"--k-perspective",".",[37,571,573],{"id":572},"reaction-progress","Reaction progress",[10,575,576,577,580,581,584],{},"Every element with ",[20,578,579],{},"--k-when"," gets ",[20,582,583],{},"--k-progress",", from 0 to 1, moving with the reaction's spring. Use it in any CSS property to animate what Kinesis has no output for:",[42,586,588],{"className":44,"code":587,"language":46,"meta":47,"style":47},".button {\n  --k-when: press;\n  box-shadow: 0 calc((1 - var(--k-progress)) * 6px) 0 #1a4fd6;\n}\n\n.route {\n  --k-when: scroll;\n}\n\n.route__dot {\n  offset-path: path(\"M 20 180 C 110 20, 290 20, 380 180\");\n  offset-distance: calc(var(--k-progress) * 100%);\n}\n",[20,589,590,597,604,652,656,660,667,678,682,686,693,706,734],{"__ignoreMap":47},[51,591,592,595],{"class":53,"line":54},[51,593,594],{"class":57},".button",[51,596,62],{"class":61},[51,598,599,601],{"class":53,"line":65},[51,600,261],{"class":68},[51,602,603],{"class":61},": press;\n",[51,605,606,609,611,613,616,619,621,624,627,629,631,634,637,639,642,644,646,649],{"class":53,"line":85},[51,607,608],{"class":57},"  box-shadow",[51,610,72],{"class":61},[51,612,390],{"class":57},[51,614,615],{"class":57}," calc",[51,617,618],{"class":61},"((",[51,620,228],{"class":57},[51,622,623],{"class":78}," -",[51,625,626],{"class":57}," var",[51,628,96],{"class":61},[51,630,583],{"class":68},[51,632,633],{"class":61},")) * ",[51,635,636],{"class":57},"6",[51,638,79],{"class":78},[51,640,641],{"class":61},") 0 #1",[51,643,14],{"class":57},[51,645,443],{"class":61},[51,647,648],{"class":57},"fd",[51,650,651],{"class":61},"6;\n",[51,653,654],{"class":53,"line":114},[51,655,117],{"class":61},[51,657,658],{"class":53,"line":120},[51,659,124],{"emptyLinePlaceholder":123},[51,661,662,665],{"class":53,"line":127},[51,663,664],{"class":57},".route",[51,666,62],{"class":61},[51,668,669,671,673,676],{"class":53,"line":135},[51,670,261],{"class":68},[51,672,72],{"class":61},[51,674,675],{"class":57},"scroll",[51,677,82],{"class":61},[51,679,680],{"class":53,"line":172},[51,681,117],{"class":61},[51,683,684],{"class":53,"line":188},[51,685,124],{"emptyLinePlaceholder":123},[51,687,688,691],{"class":53,"line":193},[51,689,690],{"class":57},".route__dot",[51,692,62],{"class":61},[51,694,695,698,701,704],{"class":53,"line":198},[51,696,697],{"class":57},"  offset-path",[51,699,700],{"class":61},": path(",[51,702,703],{"class":533},"\"M 20 180 C 110 20, 290 20, 380 180\"",[51,705,111],{"class":61},[51,707,708,711,713,715,717,719,721,723,725,727,730,732],{"class":53,"line":206},[51,709,710],{"class":57},"  offset-distance",[51,712,72],{"class":61},[51,714,143],{"class":57},[51,716,96],{"class":61},[51,718,148],{"class":57},[51,720,96],{"class":61},[51,722,583],{"class":68},[51,724,156],{"class":61},[51,726,159],{"class":78},[51,728,729],{"class":57}," 100",[51,731,102],{"class":78},[51,733,111],{"class":61},[51,735,736],{"class":53,"line":221},[51,737,117],{"class":61},[739,740],"demo",{"id":741,"open":742},"path","false",[10,744,745,746,748,749,752],{},"The dot reads its parent's progress. For ",[20,747,675],{}," and ",[20,750,751],{},"view",", measure an element that stays put. An element moved by its own progress measures a moving target.",[10,754,755,757],{},[20,756,583],{}," inherits, so children can use their parent's:",[42,759,761],{"className":44,"code":760,"language":46,"meta":47,"style":47},".card { --k-when: hover; }\n.card .arrow { translate: calc(var(--k-progress) * 6px) 0; }\n",[20,762,763,774],{"__ignoreMap":47},[51,764,765,767,769,771],{"class":53,"line":54},[51,766,434],{"class":57},[51,768,306],{"class":61},[51,770,579],{"class":68},[51,772,773],{"class":61},": hover; }\n",[51,775,776,778,781,783,786,788,790,792,794,796,798,800,802,805,807,809,811],{"class":53,"line":65},[51,777,434],{"class":57},[51,779,780],{"class":57}," .arrow",[51,782,306],{"class":61},[51,784,785],{"class":57},"translate",[51,787,72],{"class":61},[51,789,143],{"class":57},[51,791,96],{"class":61},[51,793,148],{"class":57},[51,795,96],{"class":61},[51,797,583],{"class":68},[51,799,156],{"class":61},[51,801,159],{"class":78},[51,803,804],{"class":57}," 6",[51,806,79],{"class":78},[51,808,156],{"class":61},[51,810,390],{"class":57},[51,812,318],{"class":61},[37,814,816],{"id":815},"pointer-position","Pointer position",[10,818,819,822,823,748,826,829,830,832],{},[20,820,821],{},"--k-track: pointer"," writes the pointer's position over the element to ",[20,824,825],{},"--k-pointer-x",[20,827,828],{},"--k-pointer-y",", from 0 at the left and top to 1 at the right and bottom. With ",[20,831,583],{},", that makes a spotlight:",[42,834,836],{"className":44,"code":835,"language":46,"meta":47,"style":47},".spot-card {\n  --k-track: pointer;\n  --k-when: hover;\n  background:\n    radial-gradient(\n      260px circle at calc(var(--k-pointer-x) * 100%) calc(var(--k-pointer-y) * 100%),\n      rgb(120 160 255 \u002F calc(var(--k-progress) * 0.35)),\n      transparent 65%\n    ),\n    #0c1324;\n}\n",[20,837,838,845,857,863,871,879,933,972,983,988,995],{"__ignoreMap":47},[51,839,840,843],{"class":53,"line":54},[51,841,842],{"class":57},".spot-card",[51,844,62],{"class":61},[51,846,847,850,852,855],{"class":53,"line":65},[51,848,849],{"class":68},"  --k-track",[51,851,72],{"class":61},[51,853,854],{"class":57},"pointer",[51,856,82],{"class":61},[51,858,859,861],{"class":53,"line":85},[51,860,261],{"class":68},[51,862,264],{"class":61},[51,864,865,868],{"class":53,"line":114},[51,866,867],{"class":57},"  background",[51,869,870],{"class":61},":\n",[51,872,873,876],{"class":53,"line":120},[51,874,875],{"class":57},"    radial-gradient",[51,877,878],{"class":61},"(\n",[51,880,881,884,886,889,892,894,896,898,900,902,904,906,908,910,912,914,916,918,920,922,924,926,928,930],{"class":53,"line":127},[51,882,883],{"class":57},"      260",[51,885,79],{"class":78},[51,887,888],{"class":57}," circle",[51,890,891],{"class":78}," at",[51,893,615],{"class":57},[51,895,96],{"class":61},[51,897,148],{"class":57},[51,899,96],{"class":61},[51,901,825],{"class":68},[51,903,156],{"class":61},[51,905,159],{"class":78},[51,907,729],{"class":57},[51,909,102],{"class":78},[51,911,156],{"class":61},[51,913,143],{"class":57},[51,915,96],{"class":61},[51,917,148],{"class":57},[51,919,96],{"class":61},[51,921,828],{"class":68},[51,923,156],{"class":61},[51,925,159],{"class":78},[51,927,729],{"class":57},[51,929,102],{"class":78},[51,931,932],{"class":61},"),\n",[51,934,935,938,940,943,946,949,952,954,956,958,960,962,964,966,969],{"class":53,"line":135},[51,936,937],{"class":57},"      rgb",[51,939,96],{"class":61},[51,941,942],{"class":57},"120",[51,944,945],{"class":57}," 160",[51,947,948],{"class":57}," 255",[51,950,951],{"class":61}," \u002F ",[51,953,143],{"class":57},[51,955,96],{"class":61},[51,957,148],{"class":57},[51,959,96],{"class":61},[51,961,583],{"class":68},[51,963,156],{"class":61},[51,965,159],{"class":78},[51,967,968],{"class":57}," 0.35",[51,970,971],{"class":61},")),\n",[51,973,974,977,980],{"class":53,"line":172},[51,975,976],{"class":57},"      transparent",[51,978,979],{"class":57}," 65",[51,981,982],{"class":78},"%\n",[51,984,985],{"class":53,"line":188},[51,986,987],{"class":61},"    ),\n",[51,989,990,993],{"class":53,"line":193},[51,991,992],{"class":57},"    #0c1324",[51,994,82],{"class":61},[51,996,997],{"class":53,"line":198},[51,998,117],{"class":61},[739,1000],{"id":1001,"open":742},"spotlight",[37,1003,1005],{"id":1004},"transforms-and-transitions","Transforms and transitions",[10,1007,1008,1009,409,1011,420,1014,1017,1018,1021,1022,1024,1025,409,1027,1029,1030,1032,1033,569],{},"Kinesis writes ",[20,1010,785],{},[20,1012,1013],{},"rotate",[20,1015,1016],{},"scale",", never ",[20,1019,1020],{},"transform",", so your own ",[20,1023,1020],{}," keeps working. If you set ",[20,1026,785],{},[20,1028,1013],{},", or ",[20,1031,1016],{}," yourself, Kinesis adds to your value. See ",[14,1034,1036],{"href":1035},"\u002Fdocs\u002Fhow-it-works\u002F#what-kinesis-writes","How it works",[10,1038,1039,1040,1043],{},"Don't put CSS transitions on the properties Kinesis animates. ",[20,1041,1042],{},"transition: all"," is the usual cause. The browser smooths every update a second time and the motion lags.",[37,1045,1047],{"id":1046},"debugging","Debugging",[10,1049,1050,1053,1054,27,1057,569],{},[20,1051,1052],{},"initKinesis({ debug: true })"," warns about inline elements that can't be transformed, conflicting transitions, unknown keywords, and 3D flattened by ",[20,1055,1056],{},"overflow",[20,1058,1059],{},"filter",[10,1061,1062],{},"In DevTools, Kinesis properties appear in the Styles panel like any CSS, and the inline style shows what Kinesis writes.",[1064,1065,1066],"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 pre.shiki code .suJrU, html code.shiki .suJrU{--shiki-default:#FF7B72}html pre.shiki code .sH3jZ, html code.shiki .sH3jZ{--shiki-default:#8B949E}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 .s9uIt, html code.shiki .s9uIt{--shiki-default:#A5D6FF}html pre.shiki code .sc3cj, html code.shiki .sc3cj{--shiki-default:#D2A8FF}",{"title":47,"searchDepth":85,"depth":85,"links":1068},[1069,1070,1071,1073,1074,1075,1076,1077,1078],{"id":39,"depth":65,"text":40},{"id":292,"depth":65,"text":293},{"id":405,"depth":65,"text":1072},", , and classes",{"id":490,"depth":65,"text":491},{"id":550,"depth":65,"text":551},{"id":572,"depth":65,"text":573},{"id":815,"depth":65,"text":816},{"id":1004,"depth":65,"text":1005},{"id":1046,"depth":65,"text":1047},"Tokens, calc(), media queries, :hover, themes, and the variables Kinesis writes back.","md",{},"\u002Fdocs\u002Fcss","---\ntitle: Working with CSS\ndescription: Tokens, calc(), media queries, :hover, themes, and the variables Kinesis writes back.\n---\n\nKinesis properties are CSS variables registered with [`@property`](https:\u002F\u002Fdeveloper.mozilla.org\u002Fdocs\u002FWeb\u002FCSS\u002F@property) and a type, such as `\u003Clength>` or `\u003Cangle>`. The browser computes their values the way it computes `width`, so anything valid in CSS works in them.\n\n## Tokens, units, and calc()\n\n```css\n:root {\n  --space: 8px;\n  --brand: oklch(62% 0.2 265);\n}\n\n.layer {\n  --k-parallax: calc(var(--space) * 4);   \u002F* 32px *\u002F\n  --k-radius: 12vw;\n}\n\n.title {\n  font-size: 40px;\n  --k-parallax: 1em;                       \u002F* 40px: this element's font size *\u002F\n}\n\n.chip {\n  --k-when: hover;\n  --k-background: var(--brand);\n}\n```\n\nA value that doesn't match a property's type is ignored, like any invalid CSS.\n\n## Media queries and container queries\n\n```css\n.hero__art { --k-parallax: 40px; }\n\n@media (max-width: 700px) {\n  .hero__art { --k-parallax: 12px; }\n}\n\n@media (pointer: coarse) {\n  .card { --k-tilt: 0deg; }\n}\n```\n\nKinesis re-reads configuration after a window resize, so media queries apply on their own.\n\n## :hover, :focus, and classes\n\nKinesis picks up changes from classes, `:hover`, and `:focus`:\n\n```css\n.card { --k-tilt: 4deg; }\n.card:hover { --k-tilt: 12deg; }\n.card.is-selected { --k-motion: bouncy; }\n```\n\nFor hover effects, the [`hover` reaction](\u002Fdocs\u002Freactions\u002F#hover) is usually better. It springs, and it doesn't flicker when the element moves away from the pointer.\n\n## Themes and stylesheets\n\nKinesis re-reads the page when a class or `data-theme` changes on `\u003Chtml>` or `\u003Cbody>`, and when a stylesheet is added. For changes it can't see, like `:has()` reacting to a distant element or a stylesheet edited through the CSSOM, call `refresh()`:\n\n```js\nimport { refresh } from \"@amineyarman\u002Fkinesis\"\n\nrefresh()\n```\n\n## What inherits\n\nInteraction properties apply only to the element that declares them. `--k-tilt` on a card doesn't tilt its children.\n\nThree context properties inherit, so you can set them once on a scope: `--k-motion`, `--k-intensity`, and `--k-perspective`.\n\n## Reaction progress\n\nEvery element with `--k-when` gets `--k-progress`, from 0 to 1, moving with the reaction's spring. Use it in any CSS property to animate what Kinesis has no output for:\n\n```css\n.button {\n  --k-when: press;\n  box-shadow: 0 calc((1 - var(--k-progress)) * 6px) 0 #1a4fd6;\n}\n\n.route {\n  --k-when: scroll;\n}\n\n.route__dot {\n  offset-path: path(\"M 20 180 C 110 20, 290 20, 380 180\");\n  offset-distance: calc(var(--k-progress) * 100%);\n}\n```\n\n::demo{id=\"path\" open=\"false\"}\n::\n\nThe dot reads its parent's progress. For `scroll` and `view`, measure an element that stays put. An element moved by its own progress measures a moving target.\n\n`--k-progress` inherits, so children can use their parent's:\n\n```css\n.card { --k-when: hover; }\n.card .arrow { translate: calc(var(--k-progress) * 6px) 0; }\n```\n\n## Pointer position\n\n`--k-track: pointer` writes the pointer's position over the element to `--k-pointer-x` and `--k-pointer-y`, from 0 at the left and top to 1 at the right and bottom. With `--k-progress`, that makes a spotlight:\n\n```css\n.spot-card {\n  --k-track: pointer;\n  --k-when: hover;\n  background:\n    radial-gradient(\n      260px circle at calc(var(--k-pointer-x) * 100%) calc(var(--k-pointer-y) * 100%),\n      rgb(120 160 255 \u002F calc(var(--k-progress) * 0.35)),\n      transparent 65%\n    ),\n    #0c1324;\n}\n```\n\n::demo{id=\"spotlight\" open=\"false\"}\n::\n\n## Transforms and transitions\n\nKinesis writes `translate`, `rotate`, and `scale`, never `transform`, so your own `transform` keeps working. If you set `translate`, `rotate`, or `scale` yourself, Kinesis adds to your value. See [How it works](\u002Fdocs\u002Fhow-it-works\u002F#what-kinesis-writes).\n\nDon't put CSS transitions on the properties Kinesis animates. `transition: all` is the usual cause. The browser smooths every update a second time and the motion lags.\n\n## Debugging\n\n`initKinesis({ debug: true })` warns about inline elements that can't be transformed, conflicting transitions, unknown keywords, and 3D flattened by `overflow` or `filter`.\n\nIn DevTools, Kinesis properties appear in the Styles panel like any CSS, and the inline style shows what Kinesis writes.\n",{"title":5,"description":1079},"docs\u002Fcss","QuPFc7ZK5RnIVzwAw6v_riaPmTMwzZpHJgaDDHxAh5o",1791309902901]