[{"data":1,"prerenderedAt":530},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fgetting-started":3},{"id":4,"title":5,"body":6,"description":522,"extension":523,"meta":524,"navigation":68,"path":525,"rawbody":526,"seo":527,"stem":528,"__hash__":529},"docs\u002Fdocs\u002Fgetting-started.md","Getting started",{"type":7,"value":8,"toc":514},"minimark",[9,14,40,80,88,122,129,132,136,142,219,226,230,307,310,315,319,325,417,426,430,449,453,504,510],[10,11,13],"h2",{"id":12},"install","Install",[15,16,21],"pre",{"className":17,"code":18,"language":19,"meta":20,"style":20},"language-bash shiki shiki-themes github-dark-default","npm install @amineyarman\u002Fkinesis\n","bash","",[22,23,24],"code",{"__ignoreMap":20},[25,26,29,33,37],"span",{"class":27,"line":28},"line",1,[25,30,32],{"class":31},"sQhOw","npm",[25,34,36],{"class":35},"s9uIt"," install",[25,38,39],{"class":35}," @amineyarman\u002Fkinesis\n",[15,41,45],{"className":42,"code":43,"language":44,"meta":20,"style":20},"language-js shiki shiki-themes github-dark-default","import { initKinesis } from \"@amineyarman\u002Fkinesis\"\n\ninitKinesis()\n","js",[22,46,47,63,70],{"__ignoreMap":20},[25,48,49,53,57,60],{"class":27,"line":28},[25,50,52],{"class":51},"suJrU","import",[25,54,56],{"class":55},"sZEs4"," { initKinesis } ",[25,58,59],{"class":51},"from",[25,61,62],{"class":35}," \"@amineyarman\u002Fkinesis\"\n",[25,64,66],{"class":27,"line":65},2,[25,67,69],{"emptyLinePlaceholder":68},true,"\n",[25,71,73,77],{"class":27,"line":72},3,[25,74,76],{"class":75},"sc3cj","initKinesis",[25,78,79],{"class":55},"()\n",[81,82,83,84,87],"p",{},"Without a build step, this script tag starts Kinesis and exposes ",[22,85,86],{},"window.Kinesis",":",[15,89,93],{"className":90,"code":91,"language":92,"meta":20,"style":20},"language-html shiki shiki-themes github-dark-default","\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@amineyarman\u002Fkinesis\u002Fdist\u002Fkinesis.global.js\">\u003C\u002Fscript>\n","html",[22,94,95],{"__ignoreMap":20},[25,96,97,100,104,108,111,114,117,119],{"class":27,"line":28},[25,98,99],{"class":55},"\u003C",[25,101,103],{"class":102},"sPWt5","script",[25,105,107],{"class":106},"sFSAA"," src",[25,109,110],{"class":55},"=",[25,112,113],{"class":35},"\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@amineyarman\u002Fkinesis\u002Fdist\u002Fkinesis.global.js\"",[25,115,116],{"class":55},">\u003C\u002F",[25,118,103],{"class":102},[25,120,121],{"class":55},">\n",[81,123,124,125,128],{},"Importing ",[22,126,127],{},"@amineyarman\u002Fkinesis\u002Fauto"," from a CDN also starts it.",[81,130,131],{},"Kinesis supports Chrome and Edge 111+, Safari 16.4+, and Firefox 128+. Older browsers get less motion or none.",[10,133,135],{"id":134},"mark-a-scope","Mark a scope",[81,137,138,141],{},[22,139,140],{},"data-kinesis"," marks a scope. Kinesis searches it for animated elements and measures the pointer against it.",[15,143,145],{"className":90,"code":144,"language":92,"meta":20,"style":20},"\u003Csection class=\"hero\" data-kinesis>\n  \u003Cdiv class=\"hero__glow\">\u003C\u002Fdiv>\n  \u003Ch1 class=\"hero__title\">Hello\u003C\u002Fh1>\n\u003C\u002Fsection>\n",[22,146,147,167,188,209],{"__ignoreMap":20},[25,148,149,151,154,157,159,162,165],{"class":27,"line":28},[25,150,99],{"class":55},[25,152,153],{"class":102},"section",[25,155,156],{"class":106}," class",[25,158,110],{"class":55},[25,160,161],{"class":35},"\"hero\"",[25,163,164],{"class":106}," data-kinesis",[25,166,121],{"class":55},[25,168,169,172,175,177,179,182,184,186],{"class":27,"line":65},[25,170,171],{"class":55},"  \u003C",[25,173,174],{"class":102},"div",[25,176,156],{"class":106},[25,178,110],{"class":55},[25,180,181],{"class":35},"\"hero__glow\"",[25,183,116],{"class":55},[25,185,174],{"class":102},[25,187,121],{"class":55},[25,189,190,192,195,197,199,202,205,207],{"class":27,"line":72},[25,191,171],{"class":55},[25,193,194],{"class":102},"h1",[25,196,156],{"class":106},[25,198,110],{"class":55},[25,200,201],{"class":35},"\"hero__title\"",[25,203,204],{"class":55},">Hello\u003C\u002F",[25,206,194],{"class":102},[25,208,121],{"class":55},[25,210,212,215,217],{"class":27,"line":211},4,[25,213,214],{"class":55},"\u003C\u002F",[25,216,153],{"class":102},[25,218,121],{"class":55},[81,220,221,222,225],{},"Put it on ",[22,223,224],{},"\u003Cbody>"," to cover the whole page.",[10,227,229],{"id":228},"add-a-property","Add a property",[15,231,235],{"className":232,"code":233,"language":234,"meta":20,"style":20},"language-css shiki shiki-themes github-dark-default",".hero__glow {\n  --k-parallax: 40px;\n}\n\n.hero__title {\n  --k-parallax: -12px;\n  --k-motion: soft;\n}\n","css",[22,236,237,245,262,267,271,279,293,302],{"__ignoreMap":20},[25,238,239,242],{"class":27,"line":28},[25,240,241],{"class":106},".hero__glow",[25,243,244],{"class":55}," {\n",[25,246,247,250,253,256,259],{"class":27,"line":65},[25,248,249],{"class":31},"  --k-parallax",[25,251,252],{"class":55},": ",[25,254,255],{"class":106},"40",[25,257,258],{"class":51},"px",[25,260,261],{"class":55},";\n",[25,263,264],{"class":27,"line":72},[25,265,266],{"class":55},"}\n",[25,268,269],{"class":27,"line":211},[25,270,69],{"emptyLinePlaceholder":68},[25,272,274,277],{"class":27,"line":273},5,[25,275,276],{"class":106},".hero__title",[25,278,244],{"class":55},[25,280,282,284,286,289,291],{"class":27,"line":281},6,[25,283,249],{"class":31},[25,285,252],{"class":55},[25,287,288],{"class":106},"-12",[25,290,258],{"class":51},[25,292,261],{"class":55},[25,294,296,299],{"class":27,"line":295},7,[25,297,298],{"class":31},"  --k-motion",[25,300,301],{"class":55},": soft;\n",[25,303,305],{"class":27,"line":304},8,[25,306,266],{"class":55},[81,308,309],{},"The glow drifts away from the pointer and the title drifts toward it. Both settle when the pointer leaves.",[311,312],"demo",{"id":313,"open":314},"parallax-layers","false",[10,316,318],{"id":317},"add-a-reaction","Add a reaction",[81,320,321,324],{},[22,322,323],{},"--k-when"," picks a trigger. Outputs set what changes.",[15,326,328],{"className":232,"code":327,"language":234,"meta":20,"style":20},".button {\n  --k-when: press;\n  --k-scale: 0.94;\n}\n\n.feature {\n  --k-when: view once;\n  --k-opacity: 0 1;\n  --k-y: 24px 0;\n}\n",[22,329,330,337,345,357,361,365,372,379,394,412],{"__ignoreMap":20},[25,331,332,335],{"class":27,"line":28},[25,333,334],{"class":106},".button",[25,336,244],{"class":55},[25,338,339,342],{"class":27,"line":65},[25,340,341],{"class":31},"  --k-when",[25,343,344],{"class":55},": press;\n",[25,346,347,350,352,355],{"class":27,"line":72},[25,348,349],{"class":31},"  --k-scale",[25,351,252],{"class":55},[25,353,354],{"class":106},"0.94",[25,356,261],{"class":55},[25,358,359],{"class":27,"line":211},[25,360,266],{"class":55},[25,362,363],{"class":27,"line":273},[25,364,69],{"emptyLinePlaceholder":68},[25,366,367,370],{"class":27,"line":281},[25,368,369],{"class":106},".feature",[25,371,244],{"class":55},[25,373,374,376],{"class":27,"line":295},[25,375,341],{"class":31},[25,377,378],{"class":55},": view once;\n",[25,380,381,384,386,389,392],{"class":27,"line":304},[25,382,383],{"class":31},"  --k-opacity",[25,385,252],{"class":55},[25,387,388],{"class":106},"0",[25,390,391],{"class":106}," 1",[25,393,261],{"class":55},[25,395,397,400,402,405,407,410],{"class":27,"line":396},9,[25,398,399],{"class":31},"  --k-y",[25,401,252],{"class":55},[25,403,404],{"class":106},"24",[25,406,258],{"class":51},[25,408,409],{"class":106}," 0",[25,411,261],{"class":55},[25,413,415],{"class":27,"line":414},10,[25,416,266],{"class":55},[81,418,419,420,425],{},"The button shrinks while pressed, by mouse, touch, or keyboard. Each feature fades in the first time it scrolls into view. See ",[421,422,424],"a",{"href":423},"\u002Fdocs\u002Freactions\u002F","Reactions",".",[10,427,429],{"id":428},"frameworks","Frameworks",[81,431,432,433,436,437,440,441,444,445,425],{},"Vue has a plugin with a ",[22,434,435],{},"v-kinesis"," directive. React, Svelte, and others use ",[22,438,439],{},"initKinesis()"," with CSS, or ",[22,442,443],{},"kinesis()"," in an effect. See ",[421,446,448],{"href":447},"\u002Fdocs\u002Fframeworks\u002F","Vue and other frameworks",[10,450,452],{"id":451},"if-nothing-moves","If nothing moves",[454,455,456,462,472,482,493],"ul",{},[457,458,459,461],"li",{},[22,460,439],{}," must run in the browser. In server-rendered apps, call it on the client.",[457,463,464,465,468,469,471],{},"CSS properties only work inside a ",[22,466,467],{},"[data-kinesis]"," container. ",[22,470,443],{}," in JavaScript works anywhere.",[457,473,474,475,478,479,425],{},"Inline elements can't be transformed. Use ",[22,476,477],{},"display: inline-block"," or ",[22,480,481],{},"block",[457,483,484,485,488,489,492],{},"A ",[22,486,487],{},"transition"," on the animated properties, usually ",[22,490,491],{},"transition: all",", smooths every update twice and makes motion lag. Limit it to other properties.",[457,494,495,496,499,500,425],{},"With ",[22,497,498],{},"prefers-reduced-motion: reduce",", pointer effects stay at rest. See ",[421,501,503],{"href":502},"\u002Fdocs\u002Faccessibility\u002F","Accessibility",[81,505,506,509],{},[22,507,508],{},"initKinesis({ debug: true })"," reports these problems in the console.",[511,512,513],"style",{},"html pre.shiki code .suJrU, html code.shiki .suJrU{--shiki-default:#FF7B72}html pre.shiki code .sZEs4, html code.shiki .sZEs4{--shiki-default:#E6EDF3}html pre.shiki code .s9uIt, html code.shiki .s9uIt{--shiki-default:#A5D6FF}html pre.shiki code .sc3cj, html code.shiki .sc3cj{--shiki-default:#D2A8FF}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 .sFSAA, html code.shiki .sFSAA{--shiki-default:#79C0FF}html pre.shiki code .sQhOw, html code.shiki .sQhOw{--shiki-default:#FFA657}",{"title":20,"searchDepth":72,"depth":72,"links":515},[516,517,518,519,520,521],{"id":12,"depth":65,"text":13},{"id":134,"depth":65,"text":135},{"id":228,"depth":65,"text":229},{"id":317,"depth":65,"text":318},{"id":428,"depth":65,"text":429},{"id":451,"depth":65,"text":452},"Install Kinesis, mark a scope, add a property.","md",{},"\u002Fdocs\u002Fgetting-started","---\ntitle: Getting started\ndescription: Install Kinesis, mark a scope, add a property.\n---\n\n## Install\n\n```bash\nnpm install @amineyarman\u002Fkinesis\n```\n\n```js\nimport { initKinesis } from \"@amineyarman\u002Fkinesis\"\n\ninitKinesis()\n```\n\nWithout a build step, this script tag starts Kinesis and exposes `window.Kinesis`:\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@amineyarman\u002Fkinesis\u002Fdist\u002Fkinesis.global.js\">\u003C\u002Fscript>\n```\n\nImporting `@amineyarman\u002Fkinesis\u002Fauto` from a CDN also starts it.\n\nKinesis supports Chrome and Edge 111+, Safari 16.4+, and Firefox 128+. Older browsers get less motion or none.\n\n## Mark a scope\n\n`data-kinesis` marks a scope. Kinesis searches it for animated elements and measures the pointer against it.\n\n```html\n\u003Csection class=\"hero\" data-kinesis>\n  \u003Cdiv class=\"hero__glow\">\u003C\u002Fdiv>\n  \u003Ch1 class=\"hero__title\">Hello\u003C\u002Fh1>\n\u003C\u002Fsection>\n```\n\nPut it on `\u003Cbody>` to cover the whole page.\n\n## Add a property\n\n```css\n.hero__glow {\n  --k-parallax: 40px;\n}\n\n.hero__title {\n  --k-parallax: -12px;\n  --k-motion: soft;\n}\n```\n\nThe glow drifts away from the pointer and the title drifts toward it. Both settle when the pointer leaves.\n\n::demo{id=\"parallax-layers\" open=\"false\"}\n::\n\n## Add a reaction\n\n`--k-when` picks a trigger. Outputs set what changes.\n\n```css\n.button {\n  --k-when: press;\n  --k-scale: 0.94;\n}\n\n.feature {\n  --k-when: view once;\n  --k-opacity: 0 1;\n  --k-y: 24px 0;\n}\n```\n\nThe button shrinks while pressed, by mouse, touch, or keyboard. Each feature fades in the first time it scrolls into view. See [Reactions](\u002Fdocs\u002Freactions\u002F).\n\n## Frameworks\n\nVue has a plugin with a `v-kinesis` directive. React, Svelte, and others use `initKinesis()` with CSS, or `kinesis()` in an effect. See [Vue and other frameworks](\u002Fdocs\u002Fframeworks\u002F).\n\n## If nothing moves\n\n- `initKinesis()` must run in the browser. In server-rendered apps, call it on the client.\n- CSS properties only work inside a `[data-kinesis]` container. `kinesis()` in JavaScript works anywhere.\n- Inline elements can't be transformed. Use `display: inline-block` or `block`.\n- A `transition` on the animated properties, usually `transition: all`, smooths every update twice and makes motion lag. Limit it to other properties.\n- With `prefers-reduced-motion: reduce`, pointer effects stay at rest. See [Accessibility](\u002Fdocs\u002Faccessibility\u002F).\n\n`initKinesis({ debug: true })` reports these problems in the console.\n",{"title":5,"description":522},"docs\u002Fgetting-started","M6Nm2CVFMYzNCQ-WaafPzZXPmusHhlXoqVDzlfXHerI",1791309902672]