[{"data":1,"prerenderedAt":1041},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fpointer-effects":3},{"id":4,"title":5,"body":6,"description":1033,"extension":1034,"meta":1035,"navigation":957,"path":1036,"rawbody":1037,"seo":1038,"stem":1039,"__hash__":1040},"docs\u002Fdocs\u002Fpointer-effects.md","Pointer effects",{"type":7,"value":8,"toc":1019},"minimark",[9,13,18,21,33,87,144,155,159,165,233,236,240,244,250,278,289,293,299,358,361,384,388,401,452,455,458,462,471,518,521,525,555,601,604,612,660,663,667,676,719,722,725,729,747,783,786,790,807,865,868,871,875,921,925,928,931,1012,1015],[10,11,12],"p",{},"Each effect is one property. Several on one element add together.",[14,15,17],"h2",{"id":16},"the-pointer-area","The pointer area",[10,19,20],{},"Parallax, tilt, follow, and spin measure the pointer against an area. Its center is rest and its edges are the maximum. When the pointer leaves, these effects return to rest.",[10,22,23,24,28,29,32],{},"By default the area is the nearest ",[25,26,27],"code",{},"[data-kinesis]"," scope. ",[25,30,31],{},"--k-area"," changes it:",[34,35,36,49],"table",{},[37,38,39],"thead",{},[40,41,42,46],"tr",{},[43,44,45],"th",{},"Value",[43,47,48],{},"Area",[50,51,52,67,77],"tbody",{},[40,53,54,61],{},[55,56,57,60],"td",{},[25,58,59],{},"scope"," (default)",[55,62,63,64,66],{},"the nearest ",[25,65,27],{}," element",[40,68,69,74],{},[55,70,71],{},[25,72,73],{},"self",[55,75,76],{},"the element itself, so each card in a grid reacts only under the pointer",[40,78,79,84],{},[55,80,81],{},[25,82,83],{},"viewport",[55,85,86],{},"the window",[88,89,94],"pre",{"className":90,"code":91,"language":92,"meta":93,"style":93},"language-css shiki shiki-themes github-dark-default",".product-card {\n  --k-tilt: 10deg;\n  --k-area: self;\n}\n","css","",[25,95,96,109,129,138],{"__ignoreMap":93},[97,98,101,105],"span",{"class":99,"line":100},"line",1,[97,102,104],{"class":103},"sFSAA",".product-card",[97,106,108],{"class":107},"sZEs4"," {\n",[97,110,112,116,119,122,126],{"class":99,"line":111},2,[97,113,115],{"class":114},"sQhOw","  --k-tilt",[97,117,118],{"class":107},": ",[97,120,121],{"class":103},"10",[97,123,125],{"class":124},"suJrU","deg",[97,127,128],{"class":107},";\n",[97,130,132,135],{"class":99,"line":131},3,[97,133,134],{"class":114},"  --k-area",[97,136,137],{"class":107},": self;\n",[97,139,141],{"class":99,"line":140},4,[97,142,143],{"class":107},"}\n",[10,145,146,147,154],{},"Magnetic, repel, look, and point use the distance between the element and the pointer instead. ",[148,149,151],"a",{"href":150},"#radius-axis-and-limit",[25,152,153],{},"--k-radius"," sets how far they reach.",[14,156,158],{"id":157},"parallax","Parallax",[10,160,161,164],{},[25,162,163],{},"--k-parallax"," shifts the element away from the pointer. One value covers both axes, two set x and y. Negative values move with the pointer.",[88,166,168],{"className":90,"code":167,"language":92,"meta":93,"style":93},".background { --k-parallax: 12px; }\n.midground  { --k-parallax: 30px 10px; }\n.foreground { --k-parallax: -20px; }\n",[25,169,170,191,215],{"__ignoreMap":93},[97,171,172,175,178,180,182,185,188],{"class":99,"line":100},[97,173,174],{"class":103},".background",[97,176,177],{"class":107}," { ",[97,179,163],{"class":114},[97,181,118],{"class":107},[97,183,184],{"class":103},"12",[97,186,187],{"class":124},"px",[97,189,190],{"class":107},"; }\n",[97,192,193,196,199,201,203,206,208,211,213],{"class":99,"line":111},[97,194,195],{"class":103},".midground",[97,197,198],{"class":107},"  { ",[97,200,163],{"class":114},[97,202,118],{"class":107},[97,204,205],{"class":103},"30",[97,207,187],{"class":124},[97,209,210],{"class":103}," 10",[97,212,187],{"class":124},[97,214,190],{"class":107},[97,216,217,220,222,224,226,229,231],{"class":99,"line":131},[97,218,219],{"class":103},".foreground",[97,221,177],{"class":107},[97,223,163],{"class":114},[97,225,118],{"class":107},[97,227,228],{"class":103},"-20",[97,230,187],{"class":124},[97,232,190],{"class":107},[10,234,235],{},"Different amounts per layer create depth.",[237,238],"demo",{"id":239},"parallax-layers",[14,241,243],{"id":242},"tilt","Tilt",[10,245,246,249],{},[25,247,248],{},"--k-tilt"," turns the element toward the pointer in 3D. One angle covers both axes, two set each. Negative values tilt away.",[88,251,253],{"className":90,"code":252,"language":92,"meta":93,"style":93},".card {\n  --k-tilt: 12deg;\n}\n",[25,254,255,262,274],{"__ignoreMap":93},[97,256,257,260],{"class":99,"line":100},[97,258,259],{"class":103},".card",[97,261,108],{"class":107},[97,263,264,266,268,270,272],{"class":99,"line":111},[97,265,115],{"class":114},[97,267,118],{"class":107},[97,269,184],{"class":103},[97,271,125],{"class":124},[97,273,128],{"class":107},[97,275,276],{"class":99,"line":131},[97,277,143],{"class":107},[10,279,280,281,284,285,288],{},"Tilt needs perspective. If the parent has none, Kinesis gives it ",[25,282,283],{},"perspective: 1000px",". ",[25,286,287],{},"--k-perspective"," sets another distance. Smaller values look more dramatic.",[14,290,292],{"id":291},"depth","Depth",[10,294,295,298],{},[25,296,297],{},"--k-depth"," lifts an element toward the viewer. Inside a tilted ancestor, deeper layers stand out as it turns.",[88,300,302],{"className":90,"code":301,"language":92,"meta":93,"style":93},".card        { --k-tilt: 14deg; }\n.card__badge { --k-depth: 70px; }\n.card__title { --k-depth: 40px; }\n",[25,303,304,322,340],{"__ignoreMap":93},[97,305,306,308,311,313,315,318,320],{"class":99,"line":100},[97,307,259],{"class":103},[97,309,310],{"class":107},"        { ",[97,312,248],{"class":114},[97,314,118],{"class":107},[97,316,317],{"class":103},"14",[97,319,125],{"class":124},[97,321,190],{"class":107},[97,323,324,327,329,331,333,336,338],{"class":99,"line":111},[97,325,326],{"class":103},".card__badge",[97,328,177],{"class":107},[97,330,297],{"class":114},[97,332,118],{"class":107},[97,334,335],{"class":103},"70",[97,337,187],{"class":124},[97,339,190],{"class":107},[97,341,342,345,347,349,351,354,356],{"class":99,"line":131},[97,343,344],{"class":103},".card__title",[97,346,177],{"class":107},[97,348,297],{"class":114},[97,350,118],{"class":107},[97,352,353],{"class":103},"40",[97,355,187],{"class":124},[97,357,190],{"class":107},[237,359],{"id":360},"tilt-card",[10,362,363,364,367,368,371,372,375,376,379,380,383],{},"Kinesis sets ",[25,365,366],{},"transform-style: preserve-3d"," between each depth layer and its tilted ancestor. ",[25,369,370],{},"overflow: hidden",", ",[25,373,374],{},"filter",", or ",[25,377,378],{},"opacity"," below 1 on an element in between flattens the 3D. If depth looks flat, check those. ",[25,381,382],{},"debug"," mode names the element.",[14,385,387],{"id":386},"magnetic","Magnetic",[10,389,390,393,394,396,397,400],{},[25,391,392],{},"--k-magnetic"," leans the element toward a pointer within ",[25,395,153],{},". The value is the share of the distance it travels, so ",[25,398,399],{},"0.3"," moves a third of the way. The pull fades toward the edge of the radius.",[88,402,404],{"className":90,"code":403,"language":92,"meta":93,"style":93},".cta {\n  --k-magnetic: 0.35;\n  --k-radius: 160px;\n  --k-motion: bouncy;\n}\n",[25,405,406,413,425,439,447],{"__ignoreMap":93},[97,407,408,411],{"class":99,"line":100},[97,409,410],{"class":103},".cta",[97,412,108],{"class":107},[97,414,415,418,420,423],{"class":99,"line":111},[97,416,417],{"class":114},"  --k-magnetic",[97,419,118],{"class":107},[97,421,422],{"class":103},"0.35",[97,424,128],{"class":107},[97,426,427,430,432,435,437],{"class":99,"line":131},[97,428,429],{"class":114},"  --k-radius",[97,431,118],{"class":107},[97,433,434],{"class":103},"160",[97,436,187],{"class":124},[97,438,128],{"class":107},[97,440,441,444],{"class":99,"line":140},[97,442,443],{"class":114},"  --k-motion",[97,445,446],{"class":107},": bouncy;\n",[97,448,450],{"class":99,"line":449},5,[97,451,143],{"class":107},[10,453,454],{},"A smaller value on the label than on the button gives a layered pull.",[237,456],{"id":457},"magnetic-button",[14,459,461],{"id":460},"repel","Repel",[10,463,464,467,468,470],{},[25,465,466],{},"--k-repel"," pushes the element away from a pointer within ",[25,469,153],{},". The value is the largest distance, reached with the pointer right on top.",[88,472,474],{"className":90,"code":473,"language":92,"meta":93,"style":93},".dots i {\n  --k-repel: 26px;\n  --k-radius: 110px;\n}\n",[25,475,476,487,501,514],{"__ignoreMap":93},[97,477,478,481,485],{"class":99,"line":100},[97,479,480],{"class":103},".dots",[97,482,484],{"class":483},"sPWt5"," i",[97,486,108],{"class":107},[97,488,489,492,494,497,499],{"class":99,"line":111},[97,490,491],{"class":114},"  --k-repel",[97,493,118],{"class":107},[97,495,496],{"class":103},"26",[97,498,187],{"class":124},[97,500,128],{"class":107},[97,502,503,505,507,510,512],{"class":99,"line":131},[97,504,429],{"class":114},[97,506,118],{"class":107},[97,508,509],{"class":103},"110",[97,511,187],{"class":124},[97,513,128],{"class":107},[97,515,516],{"class":99,"line":140},[97,517,143],{"class":107},[237,519],{"id":520},"repel-field",[14,522,524],{"id":523},"follow","Follow",[10,526,527,530,531,284,535,538,539,542,543,546,547,550,551,554],{},[25,528,529],{},"--k-follow"," chases the pointer inside the ",[148,532,534],{"href":533},"#the-pointer-area","area",[25,536,537],{},"1"," reaches it, ",[25,540,541],{},"0.5"," goes halfway. When the pointer leaves, the element returns. ",[25,544,545],{},"--k-motion"," sets the chase: ",[25,548,549],{},"instant"," sticks to the pointer, ",[25,552,553],{},"soft"," trails it.",[88,556,558],{"className":90,"code":557,"language":92,"meta":93,"style":93},".cursor-dot  { --k-follow: 1; --k-motion: instant; }\n.cursor-ring { --k-follow: 1; --k-motion: soft; }\n",[25,559,560,581],{"__ignoreMap":93},[97,561,562,565,567,569,571,573,576,578],{"class":99,"line":100},[97,563,564],{"class":103},".cursor-dot",[97,566,198],{"class":107},[97,568,529],{"class":114},[97,570,118],{"class":107},[97,572,537],{"class":103},[97,574,575],{"class":107},"; ",[97,577,545],{"class":114},[97,579,580],{"class":107},": instant; }\n",[97,582,583,586,588,590,592,594,596,598],{"class":99,"line":111},[97,584,585],{"class":103},".cursor-ring",[97,587,177],{"class":107},[97,589,529],{"class":114},[97,591,118],{"class":107},[97,593,537],{"class":103},[97,595,575],{"class":107},[97,597,545],{"class":114},[97,599,600],{"class":107},": soft; }\n",[237,602],{"id":603},"cursor",[10,605,606,611],{},[148,607,608],{"href":150},[25,609,610],{},"--k-limit"," keeps it on a short leash, like a pupil in an eye:",[88,613,615],{"className":90,"code":614,"language":92,"meta":93,"style":93},".pupil {\n  --k-follow: 1;\n  --k-limit: 22px;\n  --k-area: viewport;\n}\n",[25,616,617,624,635,649,656],{"__ignoreMap":93},[97,618,619,622],{"class":99,"line":100},[97,620,621],{"class":103},".pupil",[97,623,108],{"class":107},[97,625,626,629,631,633],{"class":99,"line":111},[97,627,628],{"class":114},"  --k-follow",[97,630,118],{"class":107},[97,632,537],{"class":103},[97,634,128],{"class":107},[97,636,637,640,642,645,647],{"class":99,"line":131},[97,638,639],{"class":114},"  --k-limit",[97,641,118],{"class":107},[97,643,644],{"class":103},"22",[97,646,187],{"class":124},[97,648,128],{"class":107},[97,650,651,653],{"class":99,"line":140},[97,652,134],{"class":114},[97,654,655],{"class":107},": viewport;\n",[97,657,658],{"class":99,"line":449},[97,659,143],{"class":107},[237,661],{"id":662},"eyes",[14,664,666],{"id":665},"look","Look",[10,668,669,672,673,675],{},[25,670,671],{},"--k-look"," turns the element in 3D to face the pointer, like a head. It reaches the full angle at ",[25,674,153],{}," and holds it beyond.",[88,677,679],{"className":90,"code":678,"language":92,"meta":93,"style":93},".head {\n  --k-look: 35deg;\n  --k-radius: 320px;\n}\n",[25,680,681,688,702,715],{"__ignoreMap":93},[97,682,683,686],{"class":99,"line":100},[97,684,685],{"class":103},".head",[97,687,108],{"class":107},[97,689,690,693,695,698,700],{"class":99,"line":111},[97,691,692],{"class":114},"  --k-look",[97,694,118],{"class":107},[97,696,697],{"class":103},"35",[97,699,125],{"class":124},[97,701,128],{"class":107},[97,703,704,706,708,711,713],{"class":99,"line":131},[97,705,429],{"class":114},[97,707,118],{"class":107},[97,709,710],{"class":103},"320",[97,712,187],{"class":124},[97,714,128],{"class":107},[97,716,717],{"class":99,"line":140},[97,718,143],{"class":107},[237,720],{"id":721},"heads",[10,723,724],{},"Tilt reacts to where the pointer is in an area. Look makes each element face the pointer from its own position.",[14,726,728],{"id":727},"point","Point",[10,730,731,734,735,738,739,742,743,746],{},[25,732,733],{},"--k-point"," rotates the element flat to aim at the pointer, for needles, arrows, and compasses. The value is the direction your artwork faces at rest, measured like gradient angles: ",[25,736,737],{},"0deg"," up, ",[25,740,741],{},"90deg"," right, ",[25,744,745],{},"180deg"," down. When the pointer leaves the page, it keeps its last direction.",[88,748,750],{"className":90,"code":749,"language":92,"meta":93,"style":93},".needle {\n  --k-point: 0deg;\n  --k-motion: bouncy;\n}\n",[25,751,752,759,773,779],{"__ignoreMap":93},[97,753,754,757],{"class":99,"line":100},[97,755,756],{"class":103},".needle",[97,758,108],{"class":107},[97,760,761,764,766,769,771],{"class":99,"line":111},[97,762,763],{"class":114},"  --k-point",[97,765,118],{"class":107},[97,767,768],{"class":103},"0",[97,770,125],{"class":124},[97,772,128],{"class":107},[97,774,775,777],{"class":99,"line":131},[97,776,443],{"class":114},[97,778,446],{"class":107},[97,780,781],{"class":99,"line":140},[97,782,143],{"class":107},[237,784],{"id":785},"compass",[14,787,789],{"id":788},"spin","Spin",[10,791,792,795,796,798,799,802,803,806],{},[25,793,794],{},"--k-spin"," rotates the element flat in proportion to the pointer's position across the ",[148,797,534],{"href":533},". The value is the rotation at the right edge, and the left edge turns the other way. ",[25,800,801],{},"--k-axis: y"," uses vertical position instead. ",[25,804,805],{},"transform-origin"," sets the pivot.",[88,808,810],{"className":90,"code":809,"language":92,"meta":93,"style":93},".wheel { --k-spin: 360deg; }\n.arm   { --k-spin: 20deg; transform-origin: 20% 90%; }\n",[25,811,812,830],{"__ignoreMap":93},[97,813,814,817,819,821,823,826,828],{"class":99,"line":100},[97,815,816],{"class":103},".wheel",[97,818,177],{"class":107},[97,820,794],{"class":114},[97,822,118],{"class":107},[97,824,825],{"class":103},"360",[97,827,125],{"class":124},[97,829,190],{"class":107},[97,831,832,835,838,840,842,845,847,849,851,853,855,858,861,863],{"class":99,"line":111},[97,833,834],{"class":103},".arm",[97,836,837],{"class":107},"   { ",[97,839,794],{"class":114},[97,841,118],{"class":107},[97,843,844],{"class":103},"20",[97,846,125],{"class":124},[97,848,575],{"class":107},[97,850,805],{"class":103},[97,852,118],{"class":107},[97,854,844],{"class":103},[97,856,857],{"class":124},"%",[97,859,860],{"class":103}," 90",[97,862,857],{"class":124},[97,864,190],{"class":107},[237,866],{"id":867},"gears",[10,869,870],{},"Point aims at the pointer. Spin turns with the pointer's position, which is how a wheel rolls as a rider moves.",[14,872,874],{"id":873},"radius-axis-and-limit","Radius, axis, and limit",[876,877,878,895,914],"ul",{},[879,880,881,886,887,890,891,894],"li",{},[882,883,884],"strong",{},[25,885,153],{}," (default ",[25,888,889],{},"200px",") is how far the pointer reaches for magnetic, repel, look, and the ",[25,892,893],{},"near"," reaction.",[879,896,897,902,903,908,909,913],{},[882,898,899],{},[25,900,901],{},"--k-axis: x"," or ",[882,904,905],{},[25,906,907],{},"y"," limits effects to one axis. Distance-based effects then measure along that axis only, which is how a ",[148,910,912],{"href":911},"\u002Fexamples\u002Fdock\u002F","dock"," follows horizontal position.",[879,915,916,920],{},[882,917,918],{},[25,919,610],{}," caps how far pointer effects move the element.",[14,922,924],{"id":923},"touch-and-device-orientation","Touch and device orientation",[10,926,927],{},"On touch screens, pointer effects follow a finger while it is down and return to rest when it lifts. Hover is never simulated.",[10,929,930],{},"On phones, parallax and tilt can follow how the device is held. iOS asks for permission, so request it from a user gesture:",[88,932,936],{"className":933,"code":934,"language":935,"meta":93,"style":93},"language-js shiki shiki-themes github-dark-default","import { requestOrientation } from \"@amineyarman\u002Fkinesis\"\n\nenableMotionButton.addEventListener(\"click\", async () => {\n  const granted = await requestOrientation()\n})\n","js",[25,937,938,953,959,987,1007],{"__ignoreMap":93},[97,939,940,943,946,949],{"class":99,"line":100},[97,941,942],{"class":124},"import",[97,944,945],{"class":107}," { requestOrientation } ",[97,947,948],{"class":124},"from",[97,950,952],{"class":951},"s9uIt"," \"@amineyarman\u002Fkinesis\"\n",[97,954,955],{"class":99,"line":111},[97,956,958],{"emptyLinePlaceholder":957},true,"\n",[97,960,961,964,968,971,974,976,979,982,985],{"class":99,"line":131},[97,962,963],{"class":107},"enableMotionButton.",[97,965,967],{"class":966},"sc3cj","addEventListener",[97,969,970],{"class":107},"(",[97,972,973],{"class":951},"\"click\"",[97,975,371],{"class":107},[97,977,978],{"class":124},"async",[97,980,981],{"class":107}," () ",[97,983,984],{"class":124},"=>",[97,986,108],{"class":107},[97,988,989,992,995,998,1001,1004],{"class":99,"line":140},[97,990,991],{"class":124},"  const",[97,993,994],{"class":103}," granted",[97,996,997],{"class":124}," =",[97,999,1000],{"class":124}," await",[97,1002,1003],{"class":966}," requestOrientation",[97,1005,1006],{"class":107},"()\n",[97,1008,1009],{"class":99,"line":449},[97,1010,1011],{"class":107},"})\n",[10,1013,1014],{},"Once granted, the device's tilt drives parallax and tilt while no finger is down.",[1016,1017,1018],"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 .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 .sPWt5, html code.shiki .sPWt5{--shiki-default:#7EE787}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":93,"searchDepth":131,"depth":131,"links":1020},[1021,1022,1023,1024,1025,1026,1027,1028,1029,1030,1031,1032],{"id":16,"depth":111,"text":17},{"id":157,"depth":111,"text":158},{"id":242,"depth":111,"text":243},{"id":291,"depth":111,"text":292},{"id":386,"depth":111,"text":387},{"id":460,"depth":111,"text":461},{"id":523,"depth":111,"text":524},{"id":665,"depth":111,"text":666},{"id":727,"depth":111,"text":728},{"id":788,"depth":111,"text":789},{"id":873,"depth":111,"text":874},{"id":923,"depth":111,"text":924},"Parallax, tilt, depth, magnetic, repel, follow, look, point, and spin. One property each.","md",{},"\u002Fdocs\u002Fpointer-effects","---\ntitle: Pointer effects\ndescription: Parallax, tilt, depth, magnetic, repel, follow, look, point, and spin. One property each.\n---\n\nEach effect is one property. Several on one element add together.\n\n## The pointer area\n\nParallax, tilt, follow, and spin measure the pointer against an area. Its center is rest and its edges are the maximum. When the pointer leaves, these effects return to rest.\n\nBy default the area is the nearest `[data-kinesis]` scope. `--k-area` changes it:\n\n| Value | Area |\n| --- | --- |\n| `scope` (default) | the nearest `[data-kinesis]` element |\n| `self` | the element itself, so each card in a grid reacts only under the pointer |\n| `viewport` | the window |\n\n```css\n.product-card {\n  --k-tilt: 10deg;\n  --k-area: self;\n}\n```\n\nMagnetic, repel, look, and point use the distance between the element and the pointer instead. [`--k-radius`](#radius-axis-and-limit) sets how far they reach.\n\n## Parallax\n\n`--k-parallax` shifts the element away from the pointer. One value covers both axes, two set x and y. Negative values move with the pointer.\n\n```css\n.background { --k-parallax: 12px; }\n.midground  { --k-parallax: 30px 10px; }\n.foreground { --k-parallax: -20px; }\n```\n\nDifferent amounts per layer create depth.\n\n::demo{id=\"parallax-layers\"}\n::\n\n## Tilt\n\n`--k-tilt` turns the element toward the pointer in 3D. One angle covers both axes, two set each. Negative values tilt away.\n\n```css\n.card {\n  --k-tilt: 12deg;\n}\n```\n\nTilt needs perspective. If the parent has none, Kinesis gives it `perspective: 1000px`. `--k-perspective` sets another distance. Smaller values look more dramatic.\n\n## Depth\n\n`--k-depth` lifts an element toward the viewer. Inside a tilted ancestor, deeper layers stand out as it turns.\n\n```css\n.card        { --k-tilt: 14deg; }\n.card__badge { --k-depth: 70px; }\n.card__title { --k-depth: 40px; }\n```\n\n::demo{id=\"tilt-card\"}\n::\n\nKinesis sets `transform-style: preserve-3d` between each depth layer and its tilted ancestor. `overflow: hidden`, `filter`, or `opacity` below 1 on an element in between flattens the 3D. If depth looks flat, check those. `debug` mode names the element.\n\n## Magnetic\n\n`--k-magnetic` leans the element toward a pointer within `--k-radius`. The value is the share of the distance it travels, so `0.3` moves a third of the way. The pull fades toward the edge of the radius.\n\n```css\n.cta {\n  --k-magnetic: 0.35;\n  --k-radius: 160px;\n  --k-motion: bouncy;\n}\n```\n\nA smaller value on the label than on the button gives a layered pull.\n\n::demo{id=\"magnetic-button\"}\n::\n\n## Repel\n\n`--k-repel` pushes the element away from a pointer within `--k-radius`. The value is the largest distance, reached with the pointer right on top.\n\n```css\n.dots i {\n  --k-repel: 26px;\n  --k-radius: 110px;\n}\n```\n\n::demo{id=\"repel-field\"}\n::\n\n## Follow\n\n`--k-follow` chases the pointer inside the [area](#the-pointer-area). `1` reaches it, `0.5` goes halfway. When the pointer leaves, the element returns. `--k-motion` sets the chase: `instant` sticks to the pointer, `soft` trails it.\n\n```css\n.cursor-dot  { --k-follow: 1; --k-motion: instant; }\n.cursor-ring { --k-follow: 1; --k-motion: soft; }\n```\n\n::demo{id=\"cursor\"}\n::\n\n[`--k-limit`](#radius-axis-and-limit) keeps it on a short leash, like a pupil in an eye:\n\n```css\n.pupil {\n  --k-follow: 1;\n  --k-limit: 22px;\n  --k-area: viewport;\n}\n```\n\n::demo{id=\"eyes\"}\n::\n\n## Look\n\n`--k-look` turns the element in 3D to face the pointer, like a head. It reaches the full angle at `--k-radius` and holds it beyond.\n\n```css\n.head {\n  --k-look: 35deg;\n  --k-radius: 320px;\n}\n```\n\n::demo{id=\"heads\"}\n::\n\nTilt reacts to where the pointer is in an area. Look makes each element face the pointer from its own position.\n\n## Point\n\n`--k-point` rotates the element flat to aim at the pointer, for needles, arrows, and compasses. The value is the direction your artwork faces at rest, measured like gradient angles: `0deg` up, `90deg` right, `180deg` down. When the pointer leaves the page, it keeps its last direction.\n\n```css\n.needle {\n  --k-point: 0deg;\n  --k-motion: bouncy;\n}\n```\n\n::demo{id=\"compass\"}\n::\n\n## Spin\n\n`--k-spin` rotates the element flat in proportion to the pointer's position across the [area](#the-pointer-area). The value is the rotation at the right edge, and the left edge turns the other way. `--k-axis: y` uses vertical position instead. `transform-origin` sets the pivot.\n\n```css\n.wheel { --k-spin: 360deg; }\n.arm   { --k-spin: 20deg; transform-origin: 20% 90%; }\n```\n\n::demo{id=\"gears\"}\n::\n\nPoint aims at the pointer. Spin turns with the pointer's position, which is how a wheel rolls as a rider moves.\n\n## Radius, axis, and limit\n\n- **`--k-radius`** (default `200px`) is how far the pointer reaches for magnetic, repel, look, and the `near` reaction.\n- **`--k-axis: x`** or **`y`** limits effects to one axis. Distance-based effects then measure along that axis only, which is how a [dock](\u002Fexamples\u002Fdock\u002F) follows horizontal position.\n- **`--k-limit`** caps how far pointer effects move the element.\n\n## Touch and device orientation\n\nOn touch screens, pointer effects follow a finger while it is down and return to rest when it lifts. Hover is never simulated.\n\nOn phones, parallax and tilt can follow how the device is held. iOS asks for permission, so request it from a user gesture:\n\n```js\nimport { requestOrientation } from \"@amineyarman\u002Fkinesis\"\n\nenableMotionButton.addEventListener(\"click\", async () => {\n  const granted = await requestOrientation()\n})\n```\n\nOnce granted, the device's tilt drives parallax and tilt while no finger is down.\n",{"title":5,"description":1033},"docs\u002Fpointer-effects","_Rr-EPGHPRKmPiHHsyaP50DwXU-1KCIvi1jxWvRnULU",1791309902699]