[{"data":1,"prerenderedAt":442},["ShallowReactive",2],{"docs:\u002Fdocs":3},{"id":4,"title":5,"body":6,"description":434,"extension":435,"meta":436,"navigation":213,"path":437,"rawbody":438,"seo":439,"stem":440,"__hash__":441},"docs\u002Fdocs\u002Findex.md","Introduction",{"type":7,"value":8,"toc":428},"minimark",[9,13,71,76,81,95,102,106,135,314,318,359,395,404,407,411,415,418,425],[10,11,12],"p",{},"Kinesis is a 14 KB library for interactive motion. Cards tilt toward the pointer, buttons lean in, lists appear on scroll, panels drag and throw. You declare the behavior in CSS, and Kinesis does the measuring, animating, and cleanup.",[14,15,20],"pre",{"className":16,"code":17,"language":18,"meta":19,"style":19},"language-css shiki shiki-themes github-dark-default",".card {\n  --k-tilt: 12deg;\n  --k-motion: soft;\n}\n","css","",[21,22,23,36,56,65],"code",{"__ignoreMap":19},[24,25,28,32],"span",{"class":26,"line":27},"line",1,[24,29,31],{"class":30},"sFSAA",".card",[24,33,35],{"class":34},"sZEs4"," {\n",[24,37,39,43,46,49,53],{"class":26,"line":38},2,[24,40,42],{"class":41},"sQhOw","  --k-tilt",[24,44,45],{"class":34},": ",[24,47,48],{"class":30},"12",[24,50,52],{"class":51},"suJrU","deg",[24,54,55],{"class":34},";\n",[24,57,59,62],{"class":26,"line":58},3,[24,60,61],{"class":41},"  --k-motion",[24,63,64],{"class":34},": soft;\n",[24,66,68],{"class":26,"line":67},4,[24,69,70],{"class":34},"}\n",[72,73],"demo",{"id":74,"open":75},"tilt-card","false",[77,78,80],"h2",{"id":79},"the-idea","The idea",[10,82,83,84,87,88,87,91,94],{},"Kinesis properties are CSS variables with registered types. The browser computes their values, so media queries, ",[21,85,86],{},":hover",", ",[21,89,90],{},"calc()",[21,92,93],{},"em",", and design tokens work in them.",[10,96,97,98,101],{},"Values move on springs. A spring keeps its speed when its target changes, so motion that follows the pointer never jumps. ",[21,99,100],{},"--k-motion"," sets how it feels.",[77,103,105],{"id":104},"setup","Setup",[107,108,109,117,128],"ol",{},[110,111,112,113,116],"li",{},"Add ",[21,114,115],{},"data-kinesis"," to a container. Kinesis looks for animated elements inside it and measures the pointer against it.",[110,118,119,120,123,124,127],{},"Give elements a Kinesis property, such as ",[21,121,122],{},"--k-tilt"," or ",[21,125,126],{},"--k-when",".",[110,129,130,131,134],{},"Call ",[21,132,133],{},"initKinesis()"," once. Elements added later are picked up.",[14,136,140],{"className":137,"code":138,"language":139,"meta":19,"style":19},"language-html shiki shiki-themes github-dark-default","\u003Csection class=\"hero\" data-kinesis>\n  \u003Cimg class=\"hero__art\" src=\"art.png\" alt=\"\">\n\u003C\u002Fsection>\n\n\u003Cstyle>\n  .hero__art { --k-parallax: 24px; }\n\u003C\u002Fstyle>\n\n\u003Cscript type=\"module\">\n  import { initKinesis } from \"@amineyarman\u002Fkinesis\"\n  initKinesis()\n\u003C\u002Fscript>\n","html",[21,141,142,167,200,209,215,225,248,257,262,280,295,305],{"__ignoreMap":19},[24,143,144,147,151,154,157,161,164],{"class":26,"line":27},[24,145,146],{"class":34},"\u003C",[24,148,150],{"class":149},"sPWt5","section",[24,152,153],{"class":30}," class",[24,155,156],{"class":34},"=",[24,158,160],{"class":159},"s9uIt","\"hero\"",[24,162,163],{"class":30}," data-kinesis",[24,165,166],{"class":34},">\n",[24,168,169,172,175,177,179,182,185,187,190,193,195,198],{"class":26,"line":38},[24,170,171],{"class":34},"  \u003C",[24,173,174],{"class":149},"img",[24,176,153],{"class":30},[24,178,156],{"class":34},[24,180,181],{"class":159},"\"hero__art\"",[24,183,184],{"class":30}," src",[24,186,156],{"class":34},[24,188,189],{"class":159},"\"art.png\"",[24,191,192],{"class":30}," alt",[24,194,156],{"class":34},[24,196,197],{"class":159},"\"\"",[24,199,166],{"class":34},[24,201,202,205,207],{"class":26,"line":58},[24,203,204],{"class":34},"\u003C\u002F",[24,206,150],{"class":149},[24,208,166],{"class":34},[24,210,211],{"class":26,"line":67},[24,212,214],{"emptyLinePlaceholder":213},true,"\n",[24,216,218,220,223],{"class":26,"line":217},5,[24,219,146],{"class":34},[24,221,222],{"class":149},"style",[24,224,166],{"class":34},[24,226,228,231,234,237,239,242,245],{"class":26,"line":227},6,[24,229,230],{"class":30},"  .hero__art",[24,232,233],{"class":34}," { ",[24,235,236],{"class":41},"--k-parallax",[24,238,45],{"class":34},[24,240,241],{"class":30},"24",[24,243,244],{"class":51},"px",[24,246,247],{"class":34},"; }\n",[24,249,251,253,255],{"class":26,"line":250},7,[24,252,204],{"class":34},[24,254,222],{"class":149},[24,256,166],{"class":34},[24,258,260],{"class":26,"line":259},8,[24,261,214],{"emptyLinePlaceholder":213},[24,263,265,267,270,273,275,278],{"class":26,"line":264},9,[24,266,146],{"class":34},[24,268,269],{"class":149},"script",[24,271,272],{"class":30}," type",[24,274,156],{"class":34},[24,276,277],{"class":159},"\"module\"",[24,279,166],{"class":34},[24,281,283,286,289,292],{"class":26,"line":282},10,[24,284,285],{"class":51},"  import",[24,287,288],{"class":34}," { initKinesis } ",[24,290,291],{"class":51},"from",[24,293,294],{"class":159}," \"@amineyarman\u002Fkinesis\"\n",[24,296,298,302],{"class":26,"line":297},11,[24,299,301],{"class":300},"sc3cj","  initKinesis",[24,303,304],{"class":34},"()\n",[24,306,308,310,312],{"class":26,"line":307},12,[24,309,204],{"class":34},[24,311,269],{"class":149},[24,313,166],{"class":34},[77,315,317],{"id":316},"what-it-does","What it does",[10,319,320,324,325,87,330,87,334,87,338,87,342,87,346,87,350,354,355,127],{},[321,322,323],"strong",{},"Pointer effects"," move an element based on where the pointer is: ",[326,327,329],"a",{"href":328},"\u002Fdocs\u002Fpointer-effects\u002F#parallax","parallax",[326,331,333],{"href":332},"\u002Fdocs\u002Fpointer-effects\u002F#tilt","tilt",[326,335,337],{"href":336},"\u002Fdocs\u002Fpointer-effects\u002F#magnetic","magnetic",[326,339,341],{"href":340},"\u002Fdocs\u002Fpointer-effects\u002F#repel","repel",[326,343,345],{"href":344},"\u002Fdocs\u002Fpointer-effects\u002F#follow","follow",[326,347,349],{"href":348},"\u002Fdocs\u002Fpointer-effects\u002F#look","look",[326,351,353],{"href":352},"\u002Fdocs\u002Fpointer-effects\u002F#point","point",", and ",[326,356,358],{"href":357},"\u002Fdocs\u002Fpointer-effects\u002F#spin","spin",[10,360,361,364,365,87,369,87,373,377,378,382,383,387,388,390,391,394],{},[321,362,363],{},"Reactions"," animate between two states on a trigger: the pointer coming ",[326,366,368],{"href":367},"\u002Fdocs\u002Freactions\u002F#near","near",[326,370,372],{"href":371},"\u002Fdocs\u002Freactions\u002F#hover","hover",[326,374,376],{"href":375},"\u002Fdocs\u002Freactions\u002F#press","press",", scrolling ",[326,379,381],{"href":380},"\u002Fdocs\u002Freactions\u002F#view","into view",", or ",[326,384,386],{"href":385},"\u002Fdocs\u002Freactions\u002F#scroll-and-page","scroll position",". ",[21,389,126],{}," sets the trigger. Outputs like ",[21,392,393],{},"--k-scale"," set what changes.",[10,396,397,400,401,127],{},[321,398,399],{},"Drag"," makes an element draggable, with bounds and throwing. See ",[326,402,399],{"href":403},"\u002Fdocs\u002Fdrag\u002F",[10,405,406],{},"All three combine on one element, in CSS or in JavaScript.",[408,409],"example-links",{"ids":410},"magnetic-button,dock,spotlight,reveal,eyes,drag",[77,412,414],{"id":413},"what-it-doesnt-do","What it doesn't do",[10,416,417],{},"Timelines and keyframe sequences. CSS animations, the Web Animations API, and GSAP handle those, and they run alongside Kinesis on the same elements.",[10,419,420,421,127],{},"Next: ",[326,422,424],{"href":423},"\u002Fdocs\u002Fgetting-started\u002F","Getting started",[222,426,427],{},"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":19,"searchDepth":58,"depth":58,"links":429},[430,431,432,433],{"id":79,"depth":38,"text":80},{"id":104,"depth":38,"text":105},{"id":316,"depth":38,"text":317},{"id":413,"depth":38,"text":414},"Kinesis makes elements react to the pointer, scroll, and touch. You set CSS variables, it animates them with springs.","md",{},"\u002Fdocs","---\ntitle: Introduction\ndescription: Kinesis makes elements react to the pointer, scroll, and touch. You set CSS variables, it animates them with springs.\n---\n\nKinesis is a 14 KB library for interactive motion. Cards tilt toward the pointer, buttons lean in, lists appear on scroll, panels drag and throw. You declare the behavior in CSS, and Kinesis does the measuring, animating, and cleanup.\n\n```css\n.card {\n  --k-tilt: 12deg;\n  --k-motion: soft;\n}\n```\n\n::demo{id=\"tilt-card\" open=\"false\"}\n::\n\n## The idea\n\nKinesis properties are CSS variables with registered types. The browser computes their values, so media queries, `:hover`, `calc()`, `em`, and design tokens work in them.\n\nValues move on springs. A spring keeps its speed when its target changes, so motion that follows the pointer never jumps. `--k-motion` sets how it feels.\n\n## Setup\n\n1. Add `data-kinesis` to a container. Kinesis looks for animated elements inside it and measures the pointer against it.\n2. Give elements a Kinesis property, such as `--k-tilt` or `--k-when`.\n3. Call `initKinesis()` once. Elements added later are picked up.\n\n```html\n\u003Csection class=\"hero\" data-kinesis>\n  \u003Cimg class=\"hero__art\" src=\"art.png\" alt=\"\">\n\u003C\u002Fsection>\n\n\u003Cstyle>\n  .hero__art { --k-parallax: 24px; }\n\u003C\u002Fstyle>\n\n\u003Cscript type=\"module\">\n  import { initKinesis } from \"@amineyarman\u002Fkinesis\"\n  initKinesis()\n\u003C\u002Fscript>\n```\n\n## What it does\n\n**Pointer effects** move an element based on where the pointer is: [parallax](\u002Fdocs\u002Fpointer-effects\u002F#parallax), [tilt](\u002Fdocs\u002Fpointer-effects\u002F#tilt), [magnetic](\u002Fdocs\u002Fpointer-effects\u002F#magnetic), [repel](\u002Fdocs\u002Fpointer-effects\u002F#repel), [follow](\u002Fdocs\u002Fpointer-effects\u002F#follow), [look](\u002Fdocs\u002Fpointer-effects\u002F#look), [point](\u002Fdocs\u002Fpointer-effects\u002F#point), and [spin](\u002Fdocs\u002Fpointer-effects\u002F#spin).\n\n**Reactions** animate between two states on a trigger: the pointer coming [near](\u002Fdocs\u002Freactions\u002F#near), [hover](\u002Fdocs\u002Freactions\u002F#hover), [press](\u002Fdocs\u002Freactions\u002F#press), scrolling [into view](\u002Fdocs\u002Freactions\u002F#view), or [scroll position](\u002Fdocs\u002Freactions\u002F#scroll-and-page). `--k-when` sets the trigger. Outputs like `--k-scale` set what changes.\n\n**Drag** makes an element draggable, with bounds and throwing. See [Drag](\u002Fdocs\u002Fdrag\u002F).\n\nAll three combine on one element, in CSS or in JavaScript.\n\n:example-links{ids=\"magnetic-button,dock,spotlight,reveal,eyes,drag\"}\n\n## What it doesn't do\n\nTimelines and keyframe sequences. CSS animations, the Web Animations API, and GSAP handle those, and they run alongside Kinesis on the same elements.\n\nNext: [Getting started](\u002Fdocs\u002Fgetting-started\u002F).\n",{"title":5,"description":434},"docs\u002Findex","_zNumHjQXDpoqA8JA5xtIGmNOljAObbrTe0a2pM63Kw",1791309902600]