[{"data":1,"prerenderedAt":758},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fframeworks":3},{"id":4,"title":5,"body":6,"description":750,"extension":751,"meta":752,"navigation":118,"path":753,"rawbody":754,"seo":755,"stem":756,"__hash__":757},"docs\u002Fdocs\u002Fframeworks.md","Vue and other frameworks",{"type":7,"value":8,"toc":741},"minimark",[9,13,46,51,148,159,299,302,313,318,321,418,421,425,428,498,507,511,514,536,542,637,647,651,654,723,727,737],[10,11,12],"p",{},"Kinesis works in any framework in one of two ways:",[14,15,16,29],"ol",{},[17,18,19,23,24,28],"li",{},[20,21,22],"strong",{},"CSS."," Call ",[25,26,27],"code",{},"initKinesis()"," once in the browser. Kinesis watches the page, so components that mount, change classes, or unmount need nothing else.",[17,30,31,23,34,37,38,41,42,45],{},[20,32,33],{},"JavaScript.",[25,35,36],{},"kinesis(element, props)"," on mount, ",[25,39,40],{},"set()"," when state changes, and ",[25,43,44],{},"destroy()"," on unmount.",[47,48,50],"h2",{"id":49},"vue","Vue",[52,53,58],"pre",{"className":54,"code":55,"language":56,"meta":57,"style":57},"language-js shiki shiki-themes github-dark-default","\u002F\u002F main.js\nimport { createApp } from \"vue\"\nimport { KinesisPlugin } from \"@amineyarman\u002Fkinesis\u002Fvue\"\nimport App from \".\u002FApp.vue\"\n\ncreateApp(App).use(KinesisPlugin).mount(\"#app\")\n","js","",[25,59,60,69,87,100,113,120],{"__ignoreMap":57},[61,62,65],"span",{"class":63,"line":64},"line",1,[61,66,68],{"class":67},"sH3jZ","\u002F\u002F main.js\n",[61,70,72,76,80,83],{"class":63,"line":71},2,[61,73,75],{"class":74},"suJrU","import",[61,77,79],{"class":78},"sZEs4"," { createApp } ",[61,81,82],{"class":74},"from",[61,84,86],{"class":85},"s9uIt"," \"vue\"\n",[61,88,90,92,95,97],{"class":63,"line":89},3,[61,91,75],{"class":74},[61,93,94],{"class":78}," { KinesisPlugin } ",[61,96,82],{"class":74},[61,98,99],{"class":85}," \"@amineyarman\u002Fkinesis\u002Fvue\"\n",[61,101,103,105,108,110],{"class":63,"line":102},4,[61,104,75],{"class":74},[61,106,107],{"class":78}," App ",[61,109,82],{"class":74},[61,111,112],{"class":85}," \".\u002FApp.vue\"\n",[61,114,116],{"class":63,"line":115},5,[61,117,119],{"emptyLinePlaceholder":118},true,"\n",[61,121,123,127,130,133,136,139,142,145],{"class":63,"line":122},6,[61,124,126],{"class":125},"sc3cj","createApp",[61,128,129],{"class":78},"(App).",[61,131,132],{"class":125},"use",[61,134,135],{"class":78},"(KinesisPlugin).",[61,137,138],{"class":125},"mount",[61,140,141],{"class":78},"(",[61,143,144],{"class":85},"\"#app\"",[61,146,147],{"class":78},")\n",[10,149,150,151,154,155,158],{},"The plugin starts CSS discovery and registers a ",[25,152,153],{},"v-kinesis"," directive. The directive takes the same props as ",[25,156,157],{},"kinesis()"," and updates with your data:",[52,160,163],{"className":161,"code":162,"language":49,"meta":57,"style":57},"language-vue shiki shiki-themes github-dark-default","\u003Cscript setup>\nimport { ref } from \"vue\"\nconst selected = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle\n    v-kinesis=\"{ tilt: selected ? 14 : 6, area: 'self', when: 'hover', y: -6 }\"\n    @click=\"selected = !selected\"\n  >\n    …\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n",[25,164,165,181,192,213,222,226,235,244,256,267,273,279,290],{"__ignoreMap":57},[61,166,167,170,174,178],{"class":63,"line":64},[61,168,169],{"class":78},"\u003C",[61,171,173],{"class":172},"sPWt5","script",[61,175,177],{"class":176},"sFSAA"," setup",[61,179,180],{"class":78},">\n",[61,182,183,185,188,190],{"class":63,"line":71},[61,184,75],{"class":74},[61,186,187],{"class":78}," { ref } ",[61,189,82],{"class":74},[61,191,86],{"class":85},[61,193,194,197,200,203,206,208,211],{"class":63,"line":89},[61,195,196],{"class":74},"const",[61,198,199],{"class":176}," selected",[61,201,202],{"class":74}," =",[61,204,205],{"class":125}," ref",[61,207,141],{"class":78},[61,209,210],{"class":176},"false",[61,212,147],{"class":78},[61,214,215,218,220],{"class":63,"line":102},[61,216,217],{"class":78},"\u003C\u002F",[61,219,173],{"class":172},[61,221,180],{"class":78},[61,223,224],{"class":63,"line":115},[61,225,119],{"emptyLinePlaceholder":118},[61,227,228,230,233],{"class":63,"line":122},[61,229,169],{"class":78},[61,231,232],{"class":172},"template",[61,234,180],{"class":78},[61,236,238,241],{"class":63,"line":237},7,[61,239,240],{"class":78},"  \u003C",[61,242,243],{"class":172},"article\n",[61,245,247,250,253],{"class":63,"line":246},8,[61,248,249],{"class":176},"    v-kinesis",[61,251,252],{"class":78},"=",[61,254,255],{"class":85},"\"{ tilt: selected ? 14 : 6, area: 'self', when: 'hover', y: -6 }\"\n",[61,257,259,262,264],{"class":63,"line":258},9,[61,260,261],{"class":176},"    @click",[61,263,252],{"class":78},[61,265,266],{"class":85},"\"selected = !selected\"\n",[61,268,270],{"class":63,"line":269},10,[61,271,272],{"class":78},"  >\n",[61,274,276],{"class":63,"line":275},11,[61,277,278],{"class":78},"    …\n",[61,280,282,285,288],{"class":63,"line":281},12,[61,283,284],{"class":78},"  \u003C\u002F",[61,286,287],{"class":172},"article",[61,289,180],{"class":78},[61,291,293,295,297],{"class":63,"line":292},13,[61,294,217],{"class":78},[61,296,232],{"class":172},[61,298,180],{"class":78},[10,300,301],{},"Props removed from the object go back to CSS. Everything is cleaned up on unmount.",[10,303,304,305,308,309,312],{},"Plugin options go in the second argument: ",[25,306,307],{},"app.use(KinesisPlugin, { reducedMotion: \"user\", debug: true })",". ",[25,310,311],{},"{ auto: false }"," skips CSS discovery.",[314,315,317],"h3",{"id":316},"nuxt","Nuxt",[10,319,320],{},"Register the directive in a client plugin, and start discovery after hydration so Kinesis never changes markup before Vue checks it:",[52,322,326],{"className":323,"code":324,"language":325,"meta":57,"style":57},"language-ts shiki shiki-themes github-dark-default","\u002F\u002F plugins\u002Fkinesis.client.ts\nimport { initKinesis } from \"@amineyarman\u002Fkinesis\"\nimport { KinesisPlugin } from \"@amineyarman\u002Fkinesis\u002Fvue\"\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.use(KinesisPlugin, { auto: false })\n  onNuxtReady(() => initKinesis())\n})\n","ts",[25,327,328,333,345,355,359,380,395,411],{"__ignoreMap":57},[61,329,330],{"class":63,"line":64},[61,331,332],{"class":67},"\u002F\u002F plugins\u002Fkinesis.client.ts\n",[61,334,335,337,340,342],{"class":63,"line":71},[61,336,75],{"class":74},[61,338,339],{"class":78}," { initKinesis } ",[61,341,82],{"class":74},[61,343,344],{"class":85}," \"@amineyarman\u002Fkinesis\"\n",[61,346,347,349,351,353],{"class":63,"line":89},[61,348,75],{"class":74},[61,350,94],{"class":78},[61,352,82],{"class":74},[61,354,99],{"class":85},[61,356,357],{"class":63,"line":102},[61,358,119],{"emptyLinePlaceholder":118},[61,360,361,364,367,370,374,377],{"class":63,"line":115},[61,362,363],{"class":74},"export",[61,365,366],{"class":74}," default",[61,368,369],{"class":125}," defineNuxtPlugin",[61,371,373],{"class":372},"sQhOw","((nuxtApp) ",[61,375,376],{"class":74},"=>",[61,378,379],{"class":78}," {\n",[61,381,382,385,387,390,392],{"class":63,"line":122},[61,383,384],{"class":78},"  nuxtApp.vueApp.",[61,386,132],{"class":125},[61,388,389],{"class":78},"(KinesisPlugin, { auto: ",[61,391,210],{"class":176},[61,393,394],{"class":78}," })\n",[61,396,397,400,403,405,408],{"class":63,"line":237},[61,398,399],{"class":125},"  onNuxtReady",[61,401,402],{"class":78},"(() ",[61,404,376],{"class":74},[61,406,407],{"class":125}," initKinesis",[61,409,410],{"class":78},"())\n",[61,412,413,416],{"class":63,"line":246},[61,414,415],{"class":78},"}",[61,417,147],{"class":372},[10,419,420],{},"Server-rendered pages already contain your CSS. Elements sit at rest until Kinesis starts, so nothing flashes.",[314,422,424],{"id":423},"coming-from-vue-kinesis","Coming from vue-kinesis",[10,426,427],{},"The component wrappers are gone. A container and its elements become a scope with CSS properties, or the directive:",[52,429,431],{"className":161,"code":430,"language":49,"meta":57,"style":57},"\u003C!-- vue-kinesis -->\n\u003Ckinesis-container>\n  \u003Ckinesis-element :strength=\"10\" type=\"depth\">…\u003C\u002Fkinesis-element>\n\u003C\u002Fkinesis-container>\n\n\u003C!-- Kinesis 2 -->\n\u003Cdiv data-kinesis>\n  \u003Cdiv v-kinesis=\"{ parallax: 10 }\">…\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[25,432,433,438,447,452,460,464,469,481,490],{"__ignoreMap":57},[61,434,435],{"class":63,"line":64},[61,436,437],{"class":67},"\u003C!-- vue-kinesis -->\n",[61,439,440,442,445],{"class":63,"line":71},[61,441,169],{"class":78},[61,443,444],{"class":172},"kinesis-container",[61,446,180],{"class":78},[61,448,449],{"class":63,"line":89},[61,450,451],{"class":78},"  \u003Ckinesis-element :strength=\"10\" type=\"depth\">…\u003C\u002Fkinesis-element>\n",[61,453,454,456,458],{"class":63,"line":102},[61,455,217],{"class":78},[61,457,444],{"class":172},[61,459,180],{"class":78},[61,461,462],{"class":63,"line":115},[61,463,119],{"emptyLinePlaceholder":118},[61,465,466],{"class":63,"line":122},[61,467,468],{"class":67},"\u003C!-- Kinesis 2 -->\n",[61,470,471,473,476,479],{"class":63,"line":237},[61,472,169],{"class":78},[61,474,475],{"class":172},"div",[61,477,478],{"class":176}," data-kinesis",[61,480,180],{"class":78},[61,482,483,486,488],{"class":63,"line":246},[61,484,485],{"class":78},"  \u003Cdiv v-kinesis=\"{ parallax: 10 }\">…\u003C\u002F",[61,487,475],{"class":172},[61,489,180],{"class":78},[61,491,492,494,496],{"class":63,"line":258},[61,493,217],{"class":78},[61,495,475],{"class":172},[61,497,180],{"class":78},[10,499,500,501,506],{},"The ",[502,503,505],"a",{"href":504},"\u002Fdocs\u002Fmigration\u002F","migration guide"," maps every old option.",[47,508,510],{"id":509},"react","React",[10,512,513],{},"Start discovery once, then write CSS:",[52,515,519],{"className":516,"code":517,"language":518,"meta":57,"style":57},"language-jsx shiki shiki-themes github-dark-default","\u002F\u002F main.jsx\nimport { initKinesis } from \"@amineyarman\u002Fkinesis\"\ninitKinesis()\n","jsx",[25,520,521,526,531],{"__ignoreMap":57},[61,522,523],{"class":63,"line":64},[61,524,525],{},"\u002F\u002F main.jsx\n",[61,527,528],{"class":63,"line":71},[61,529,530],{},"import { initKinesis } from \"@amineyarman\u002Fkinesis\"\n",[61,532,533],{"class":63,"line":89},[61,534,535],{},"initKinesis()\n",[10,537,538,539,541],{},"For motion driven by state, keep a handle in an effect and call ",[25,540,40],{},". It's cheap enough to call on every render:",[52,543,545],{"className":516,"code":544,"language":518,"meta":57,"style":57},"import { useEffect, useRef } from \"react\"\nimport { kinesis } from \"@amineyarman\u002Fkinesis\"\n\nfunction Card({ selected }) {\n  const ref = useRef(null)\n  const handle = useRef(null)\n\n  useEffect(() => {\n    handle.current = kinesis(ref.current, { area: \"self\", when: \"hover\", y: -6 })\n    return () => handle.current.destroy()\n  }, [])\n\n  useEffect(() => {\n    handle.current.set({ tilt: selected ? 14 : 6 })\n  }, [selected])\n\n  return \u003Carticle ref={ref} className=\"card\">…\u003C\u002Farticle>\n}\n",[25,546,547,552,557,561,566,571,576,580,585,590,595,600,604,608,614,620,625,631],{"__ignoreMap":57},[61,548,549],{"class":63,"line":64},[61,550,551],{},"import { useEffect, useRef } from \"react\"\n",[61,553,554],{"class":63,"line":71},[61,555,556],{},"import { kinesis } from \"@amineyarman\u002Fkinesis\"\n",[61,558,559],{"class":63,"line":89},[61,560,119],{"emptyLinePlaceholder":118},[61,562,563],{"class":63,"line":102},[61,564,565],{},"function Card({ selected }) {\n",[61,567,568],{"class":63,"line":115},[61,569,570],{},"  const ref = useRef(null)\n",[61,572,573],{"class":63,"line":122},[61,574,575],{},"  const handle = useRef(null)\n",[61,577,578],{"class":63,"line":237},[61,579,119],{"emptyLinePlaceholder":118},[61,581,582],{"class":63,"line":246},[61,583,584],{},"  useEffect(() => {\n",[61,586,587],{"class":63,"line":258},[61,588,589],{},"    handle.current = kinesis(ref.current, { area: \"self\", when: \"hover\", y: -6 })\n",[61,591,592],{"class":63,"line":269},[61,593,594],{},"    return () => handle.current.destroy()\n",[61,596,597],{"class":63,"line":275},[61,598,599],{},"  }, [])\n",[61,601,602],{"class":63,"line":281},[61,603,119],{"emptyLinePlaceholder":118},[61,605,606],{"class":63,"line":292},[61,607,584],{},[61,609,611],{"class":63,"line":610},14,[61,612,613],{},"    handle.current.set({ tilt: selected ? 14 : 6 })\n",[61,615,617],{"class":63,"line":616},15,[61,618,619],{},"  }, [selected])\n",[61,621,623],{"class":63,"line":622},16,[61,624,119],{"emptyLinePlaceholder":118},[61,626,628],{"class":63,"line":627},17,[61,629,630],{},"  return \u003Carticle ref={ref} className=\"card\">…\u003C\u002Farticle>\n",[61,632,634],{"class":63,"line":633},18,[61,635,636],{},"}\n",[10,638,639,640,643,644,646],{},"Inline ",[25,641,642],{},"--k-*"," styles also work, but each change costs a style recalculation that ",[25,645,40],{}," avoids.",[47,648,650],{"id":649},"svelte","Svelte",[10,652,653],{},"Use an action:",[52,655,658],{"className":656,"code":657,"language":649,"meta":57,"style":57},"language-svelte shiki shiki-themes github-dark-default","\u003Cscript>\n  import { kinesis } from \"@amineyarman\u002Fkinesis\"\n\n  function motion(node, props) {\n    const handle = kinesis(node, props)\n    return {\n      update: (next) => handle.reset().set(next),\n      destroy: () => handle.destroy(),\n    }\n  }\n\u003C\u002Fscript>\n\n\u003Cdiv use:motion={{ magnetic: 0.3, radius: 140 }}>…\u003C\u002Fdiv>\n",[25,659,660,665,670,674,679,684,689,694,699,704,709,714,718],{"__ignoreMap":57},[61,661,662],{"class":63,"line":64},[61,663,664],{},"\u003Cscript>\n",[61,666,667],{"class":63,"line":71},[61,668,669],{},"  import { kinesis } from \"@amineyarman\u002Fkinesis\"\n",[61,671,672],{"class":63,"line":89},[61,673,119],{"emptyLinePlaceholder":118},[61,675,676],{"class":63,"line":102},[61,677,678],{},"  function motion(node, props) {\n",[61,680,681],{"class":63,"line":115},[61,682,683],{},"    const handle = kinesis(node, props)\n",[61,685,686],{"class":63,"line":122},[61,687,688],{},"    return {\n",[61,690,691],{"class":63,"line":237},[61,692,693],{},"      update: (next) => handle.reset().set(next),\n",[61,695,696],{"class":63,"line":246},[61,697,698],{},"      destroy: () => handle.destroy(),\n",[61,700,701],{"class":63,"line":258},[61,702,703],{},"    }\n",[61,705,706],{"class":63,"line":269},[61,707,708],{},"  }\n",[61,710,711],{"class":63,"line":275},[61,712,713],{},"\u003C\u002Fscript>\n",[61,715,716],{"class":63,"line":281},[61,717,119],{"emptyLinePlaceholder":118},[61,719,720],{"class":63,"line":292},[61,721,722],{},"\u003Cdiv use:motion={{ magnetic: 0.3, radius: 140 }}>…\u003C\u002Fdiv>\n",[47,724,726],{"id":725},"server-rendering","Server rendering",[10,728,729,730,732,733,736],{},"Importing Kinesis on the server is safe. It does nothing until called in the browser, and ",[25,731,27],{}," returns without a ",[25,734,735],{},"document",".",[738,739,740],"style",{},"html pre.shiki code .sH3jZ, html code.shiki .sH3jZ{--shiki-default:#8B949E}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":57,"searchDepth":89,"depth":89,"links":742},[743,747,748,749],{"id":49,"depth":71,"text":50,"children":744},[745,746],{"id":316,"depth":89,"text":317},{"id":423,"depth":89,"text":424},{"id":509,"depth":71,"text":510},{"id":649,"depth":71,"text":650},{"id":725,"depth":71,"text":726},"The Vue plugin and directive, and patterns for React, Svelte, and server rendering.","md",{},"\u002Fdocs\u002Fframeworks","---\ntitle: Vue and other frameworks\ndescription: The Vue plugin and directive, and patterns for React, Svelte, and server rendering.\n---\n\nKinesis works in any framework in one of two ways:\n\n1. **CSS.** Call `initKinesis()` once in the browser. Kinesis watches the page, so components that mount, change classes, or unmount need nothing else.\n2. **JavaScript.** Call `kinesis(element, props)` on mount, `set()` when state changes, and `destroy()` on unmount.\n\n## Vue\n\n```js\n\u002F\u002F main.js\nimport { createApp } from \"vue\"\nimport { KinesisPlugin } from \"@amineyarman\u002Fkinesis\u002Fvue\"\nimport App from \".\u002FApp.vue\"\n\ncreateApp(App).use(KinesisPlugin).mount(\"#app\")\n```\n\nThe plugin starts CSS discovery and registers a `v-kinesis` directive. The directive takes the same props as `kinesis()` and updates with your data:\n\n```vue\n\u003Cscript setup>\nimport { ref } from \"vue\"\nconst selected = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle\n    v-kinesis=\"{ tilt: selected ? 14 : 6, area: 'self', when: 'hover', y: -6 }\"\n    @click=\"selected = !selected\"\n  >\n    …\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n```\n\nProps removed from the object go back to CSS. Everything is cleaned up on unmount.\n\nPlugin options go in the second argument: `app.use(KinesisPlugin, { reducedMotion: \"user\", debug: true })`. `{ auto: false }` skips CSS discovery.\n\n### Nuxt\n\nRegister the directive in a client plugin, and start discovery after hydration so Kinesis never changes markup before Vue checks it:\n\n```ts\n\u002F\u002F plugins\u002Fkinesis.client.ts\nimport { initKinesis } from \"@amineyarman\u002Fkinesis\"\nimport { KinesisPlugin } from \"@amineyarman\u002Fkinesis\u002Fvue\"\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.use(KinesisPlugin, { auto: false })\n  onNuxtReady(() => initKinesis())\n})\n```\n\nServer-rendered pages already contain your CSS. Elements sit at rest until Kinesis starts, so nothing flashes.\n\n### Coming from vue-kinesis\n\nThe component wrappers are gone. A container and its elements become a scope with CSS properties, or the directive:\n\n```vue\n\u003C!-- vue-kinesis -->\n\u003Ckinesis-container>\n  \u003Ckinesis-element :strength=\"10\" type=\"depth\">…\u003C\u002Fkinesis-element>\n\u003C\u002Fkinesis-container>\n\n\u003C!-- Kinesis 2 -->\n\u003Cdiv data-kinesis>\n  \u003Cdiv v-kinesis=\"{ parallax: 10 }\">…\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\nThe [migration guide](\u002Fdocs\u002Fmigration\u002F) maps every old option.\n\n## React\n\nStart discovery once, then write CSS:\n\n```jsx\n\u002F\u002F main.jsx\nimport { initKinesis } from \"@amineyarman\u002Fkinesis\"\ninitKinesis()\n```\n\nFor motion driven by state, keep a handle in an effect and call `set()`. It's cheap enough to call on every render:\n\n```jsx\nimport { useEffect, useRef } from \"react\"\nimport { kinesis } from \"@amineyarman\u002Fkinesis\"\n\nfunction Card({ selected }) {\n  const ref = useRef(null)\n  const handle = useRef(null)\n\n  useEffect(() => {\n    handle.current = kinesis(ref.current, { area: \"self\", when: \"hover\", y: -6 })\n    return () => handle.current.destroy()\n  }, [])\n\n  useEffect(() => {\n    handle.current.set({ tilt: selected ? 14 : 6 })\n  }, [selected])\n\n  return \u003Carticle ref={ref} className=\"card\">…\u003C\u002Farticle>\n}\n```\n\nInline `--k-*` styles also work, but each change costs a style recalculation that `set()` avoids.\n\n## Svelte\n\nUse an action:\n\n```svelte\n\u003Cscript>\n  import { kinesis } from \"@amineyarman\u002Fkinesis\"\n\n  function motion(node, props) {\n    const handle = kinesis(node, props)\n    return {\n      update: (next) => handle.reset().set(next),\n      destroy: () => handle.destroy(),\n    }\n  }\n\u003C\u002Fscript>\n\n\u003Cdiv use:motion={{ magnetic: 0.3, radius: 140 }}>…\u003C\u002Fdiv>\n```\n\n## Server rendering\n\nImporting Kinesis on the server is safe. It does nothing until called in the browser, and `initKinesis()` returns without a `document`.\n",{"title":5,"description":750},"docs\u002Fframeworks","x0Mrv55qXeKL3_Euji7U-53ezK_s1og4B3t6CKT6OqA",1791309903005]