[{"data":1,"prerenderedAt":1873},["ShallowReactive",2],{"docs:\u002Fdocs\u002Freference\u002Fjavascript":3},{"id":4,"title":5,"body":6,"description":1865,"extension":1866,"meta":1867,"navigation":1588,"path":1868,"rawbody":1869,"seo":1870,"stem":1871,"__hash__":1872},"docs\u002Fdocs\u002Freference\u002Fjavascript.md","JavaScript API",{"type":7,"value":8,"toc":1846},"minimark",[9,14,19,28,85,89,100,200,204,263,266,275,279,289,293,297,342,353,960,964,1104,1138,1147,1151,1371,1467,1471,1528,1532,1659,1663,1773,1777,1820,1824,1842],[10,11,13],"h2",{"id":12},"starting-kinesis","Starting Kinesis",[15,16,18],"h3",{"id":17},"initkinesisoptions","initKinesis(options?)",[20,21,22,23,27],"p",{},"Sets up every ",[24,25,26],"code",{},"[data-kinesis]"," element and keeps watching the page for new ones, removed ones, theme changes, and new stylesheets. Calling it again returns the same app and refreshes it. Does nothing on the server.",[29,30,35],"pre",{"className":31,"code":32,"language":33,"meta":34,"style":34},"language-ts shiki shiki-themes github-dark-default","initKinesis(options?: KinesisOptions): { refresh(): void; destroy(): void }\n","ts","",[24,36,37],{"__ignoreMap":34},[38,39,42,46,50,54,57,60,63,66,70,73,76,78,80,82],"span",{"class":40,"line":41},"line",1,[38,43,45],{"class":44},"sc3cj","initKinesis",[38,47,49],{"class":48},"sZEs4","(options",[38,51,53],{"class":52},"suJrU","?:",[38,55,56],{"class":48}," KinesisOptions): { ",[38,58,59],{"class":44},"refresh",[38,61,62],{"class":48},"()",[38,64,65],{"class":52},":",[38,67,69],{"class":68},"sFSAA"," void",[38,71,72],{"class":48},"; ",[38,74,75],{"class":44},"destroy",[38,77,62],{"class":48},[38,79,65],{"class":52},[38,81,69],{"class":68},[38,83,84],{"class":48}," }\n",[15,86,88],{"id":87},"createkinesisroot-options","createKinesis(root, options?)",[20,90,91,92,95,96,99],{},"Makes ",[24,93,94],{},"root"," a scope (adding ",[24,97,98],{},"data-kinesis"," if needed) and returns controls for it.",[29,101,103],{"className":31,"code":102,"language":33,"meta":34,"style":34},"createKinesis(root: Element | string, options?: KinesisOptions): {\n  root: Element\n  target(element: Element, props?: KinesisProps): KinesisTarget\n  refresh(): void   \u002F\u002F re-read CSS\n  pause(): void\n  resume(): void\n  destroy(): void   \u002F\u002F restore every style Kinesis wrote\n}\n",[24,104,105,124,130,144,160,171,181,194],{"__ignoreMap":34},[38,106,107,110,113,116,119,121],{"class":40,"line":41},[38,108,109],{"class":44},"createKinesis",[38,111,112],{"class":48},"(root: Element ",[38,114,115],{"class":52},"|",[38,117,118],{"class":48}," string, options",[38,120,53],{"class":52},[38,122,123],{"class":48}," KinesisOptions): {\n",[38,125,127],{"class":40,"line":126},2,[38,128,129],{"class":48},"  root: Element\n",[38,131,133,136,139,141],{"class":40,"line":132},3,[38,134,135],{"class":44},"  target",[38,137,138],{"class":48},"(element: Element, props",[38,140,53],{"class":52},[38,142,143],{"class":48}," KinesisProps): KinesisTarget\n",[38,145,147,150,153,156],{"class":40,"line":146},4,[38,148,149],{"class":44},"  refresh",[38,151,152],{"class":48},"(): ",[38,154,155],{"class":52},"void",[38,157,159],{"class":158},"sH3jZ","   \u002F\u002F re-read CSS\n",[38,161,163,166,168],{"class":40,"line":162},5,[38,164,165],{"class":44},"  pause",[38,167,152],{"class":48},[38,169,170],{"class":52},"void\n",[38,172,174,177,179],{"class":40,"line":173},6,[38,175,176],{"class":44},"  resume",[38,178,152],{"class":48},[38,180,170],{"class":52},[38,182,184,187,189,191],{"class":40,"line":183},7,[38,185,186],{"class":44},"  destroy",[38,188,152],{"class":48},[38,190,155],{"class":52},[38,192,193],{"class":158},"   \u002F\u002F restore every style Kinesis wrote\n",[38,195,197],{"class":40,"line":196},8,[38,198,199],{"class":48},"}\n",[15,201,203],{"id":202},"configureoptions","configure(options)",[29,205,207],{"className":31,"code":206,"language":33,"meta":34,"style":34},"interface KinesisOptions {\n  reducedMotion?: \"user\" | \"always\" | \"never\"   \u002F\u002F default \"user\"\n  debug?: boolean                               \u002F\u002F console diagnostics, default false\n}\n",[24,208,209,221,246,259],{"__ignoreMap":34},[38,210,211,214,218],{"class":40,"line":41},[38,212,213],{"class":52},"interface",[38,215,217],{"class":216},"sQhOw"," KinesisOptions",[38,219,220],{"class":48}," {\n",[38,222,223,226,228,232,235,238,240,243],{"class":40,"line":126},[38,224,225],{"class":216},"  reducedMotion",[38,227,53],{"class":52},[38,229,231],{"class":230},"s9uIt"," \"user\"",[38,233,234],{"class":52}," |",[38,236,237],{"class":230}," \"always\"",[38,239,234],{"class":52},[38,241,242],{"class":230}," \"never\"",[38,244,245],{"class":158},"   \u002F\u002F default \"user\"\n",[38,247,248,251,253,256],{"class":40,"line":132},[38,249,250],{"class":216},"  debug",[38,252,53],{"class":52},[38,254,255],{"class":68}," boolean",[38,257,258],{"class":158},"                               \u002F\u002F console diagnostics, default false\n",[38,260,261],{"class":40,"line":146},[38,262,199],{"class":48},[15,264,265],{"id":59},"refresh()",[20,267,268,269,274],{},"Re-reads CSS in every scope. Only needed after changes Kinesis can't observe. See ",[270,271,273],"a",{"href":272},"\u002Fdocs\u002Fcss\u002F#themes-and-stylesheets","Working with CSS",".",[15,276,278],{"id":277},"requestorientation","requestOrientation()",[20,280,281,282,285,286,274],{},"Asks for device-orientation access. Call it from a click. If granted, device tilt drives parallax and tilt on touch devices. Resolves to ",[24,283,284],{},"true"," or ",[24,287,288],{},"false",[10,290,292],{"id":291},"animating-elements","Animating elements",[15,294,296],{"id":295},"kinesistarget-props","kinesis(target, props?)",[29,298,300],{"className":31,"code":299,"language":33,"meta":34,"style":34},"kinesis(element: Element, props?: KinesisProps): KinesisTarget\nkinesis(selector: string | Iterable\u003CElement>, props?: KinesisProps): KinesisTargets\n",[24,301,302,313],{"__ignoreMap":34},[38,303,304,307,309,311],{"class":40,"line":41},[38,305,306],{"class":44},"kinesis",[38,308,138],{"class":48},[38,310,53],{"class":52},[38,312,143],{"class":48},[38,314,315,317,320,322,325,328,331,334,337,339],{"class":40,"line":126},[38,316,306],{"class":44},[38,318,319],{"class":48},"(selector: string ",[38,321,115],{"class":52},[38,323,324],{"class":48}," Iterable",[38,326,327],{"class":52},"\u003C",[38,329,330],{"class":48},"Element",[38,332,333],{"class":52},">",[38,335,336],{"class":48},", props",[38,338,53],{"class":52},[38,340,341],{"class":48}," KinesisProps): KinesisTargets\n",[20,343,344,347,348,352],{},[24,345,346],{},"KinesisProps"," has one key per ",[270,349,351],{"href":350},"\u002Fdocs\u002Freference\u002Fcss\u002F","CSS property",", in camelCase. Lengths are px, angles deg, times ms.",[29,354,356],{"className":31,"code":355,"language":33,"meta":34,"style":34},"interface KinesisProps {\n  motion?: \"instant\" | \"smooth\" | \"soft\" | \"snappy\" | \"bouncy\" | \"heavy\"\n         | [stiffness: number, damping: number, mass?: number]\n         | { stiffness: number; damping: number; mass?: number }\n  intensity?: number\n  perspective?: number\n  parallax?: number | [x: number, y: number]\n  tilt?: number | [x: number, y: number]\n  magnetic?: number\n  repel?: number\n  follow?: number\n  look?: number\n  point?: number | null\n  spin?: number\n  depth?: number\n  drag?: \"x\" | \"y\" | \"both\" | null\n  when?: \"near\" | \"hover\" | \"press\" | \"view\" | \"view once\" | \"scroll\" | \"page\" | null\n  x?, y?, rotate?, scale?, opacity?, blur?: number | [from: number, to: number]\n  color?, background?: string | [from: string, to: string]\n  area?: \"scope\" | \"self\" | \"viewport\"\n  radius?: number\n  limit?: number | null\n  axis?: \"both\" | \"x\" | \"y\"\n  bounds?: \"parent\" | \"scope\" | \"viewport\" | null\n  release?: \"throw\" | \"stay\" | \"return\"\n  delay?: number\n  stagger?: number\n  index?: number\n  track?: boolean\n}\n",[24,357,358,367,402,444,476,486,495,526,555,565,575,585,595,610,620,630,655,700,766,805,826,836,850,869,893,914,924,934,944,955],{"__ignoreMap":34},[38,359,360,362,365],{"class":40,"line":41},[38,361,213],{"class":52},[38,363,364],{"class":216}," KinesisProps",[38,366,220],{"class":48},[38,368,369,372,374,377,379,382,384,387,389,392,394,397,399],{"class":40,"line":126},[38,370,371],{"class":216},"  motion",[38,373,53],{"class":52},[38,375,376],{"class":230}," \"instant\"",[38,378,234],{"class":52},[38,380,381],{"class":230}," \"smooth\"",[38,383,234],{"class":52},[38,385,386],{"class":230}," \"soft\"",[38,388,234],{"class":52},[38,390,391],{"class":230}," \"snappy\"",[38,393,234],{"class":52},[38,395,396],{"class":230}," \"bouncy\"",[38,398,234],{"class":52},[38,400,401],{"class":230}," \"heavy\"\n",[38,403,404,407,410,413,416,419,422,425,427,429,431,434,437,439,441],{"class":40,"line":132},[38,405,406],{"class":52},"         |",[38,408,409],{"class":48}," [",[38,411,412],{"class":216},"stiffness",[38,414,415],{"class":48},": ",[38,417,418],{"class":68},"number",[38,420,421],{"class":48},", ",[38,423,424],{"class":216},"damping",[38,426,415],{"class":48},[38,428,418],{"class":68},[38,430,421],{"class":48},[38,432,433],{"class":216},"mass",[38,435,436],{"class":52},"?",[38,438,415],{"class":48},[38,440,418],{"class":68},[38,442,443],{"class":48},"]\n",[38,445,446,448,451,453,455,458,460,462,464,466,468,470,472,474],{"class":40,"line":146},[38,447,406],{"class":52},[38,449,450],{"class":48}," { ",[38,452,412],{"class":216},[38,454,65],{"class":52},[38,456,457],{"class":68}," number",[38,459,72],{"class":48},[38,461,424],{"class":216},[38,463,65],{"class":52},[38,465,457],{"class":68},[38,467,72],{"class":48},[38,469,433],{"class":216},[38,471,53],{"class":52},[38,473,457],{"class":68},[38,475,84],{"class":48},[38,477,478,481,483],{"class":40,"line":162},[38,479,480],{"class":216},"  intensity",[38,482,53],{"class":52},[38,484,485],{"class":68}," number\n",[38,487,488,491,493],{"class":40,"line":173},[38,489,490],{"class":216},"  perspective",[38,492,53],{"class":52},[38,494,485],{"class":68},[38,496,497,500,502,504,506,508,511,513,515,517,520,522,524],{"class":40,"line":183},[38,498,499],{"class":216},"  parallax",[38,501,53],{"class":52},[38,503,457],{"class":68},[38,505,234],{"class":52},[38,507,409],{"class":48},[38,509,510],{"class":216},"x",[38,512,415],{"class":48},[38,514,418],{"class":68},[38,516,421],{"class":48},[38,518,519],{"class":216},"y",[38,521,415],{"class":48},[38,523,418],{"class":68},[38,525,443],{"class":48},[38,527,528,531,533,535,537,539,541,543,545,547,549,551,553],{"class":40,"line":196},[38,529,530],{"class":216},"  tilt",[38,532,53],{"class":52},[38,534,457],{"class":68},[38,536,234],{"class":52},[38,538,409],{"class":48},[38,540,510],{"class":216},[38,542,415],{"class":48},[38,544,418],{"class":68},[38,546,421],{"class":48},[38,548,519],{"class":216},[38,550,415],{"class":48},[38,552,418],{"class":68},[38,554,443],{"class":48},[38,556,558,561,563],{"class":40,"line":557},9,[38,559,560],{"class":216},"  magnetic",[38,562,53],{"class":52},[38,564,485],{"class":68},[38,566,568,571,573],{"class":40,"line":567},10,[38,569,570],{"class":216},"  repel",[38,572,53],{"class":52},[38,574,485],{"class":68},[38,576,578,581,583],{"class":40,"line":577},11,[38,579,580],{"class":216},"  follow",[38,582,53],{"class":52},[38,584,485],{"class":68},[38,586,588,591,593],{"class":40,"line":587},12,[38,589,590],{"class":216},"  look",[38,592,53],{"class":52},[38,594,485],{"class":68},[38,596,598,601,603,605,607],{"class":40,"line":597},13,[38,599,600],{"class":216},"  point",[38,602,53],{"class":52},[38,604,457],{"class":68},[38,606,234],{"class":52},[38,608,609],{"class":68}," null\n",[38,611,613,616,618],{"class":40,"line":612},14,[38,614,615],{"class":216},"  spin",[38,617,53],{"class":52},[38,619,485],{"class":68},[38,621,623,626,628],{"class":40,"line":622},15,[38,624,625],{"class":216},"  depth",[38,627,53],{"class":52},[38,629,485],{"class":68},[38,631,633,636,638,641,643,646,648,651,653],{"class":40,"line":632},16,[38,634,635],{"class":216},"  drag",[38,637,53],{"class":52},[38,639,640],{"class":230}," \"x\"",[38,642,234],{"class":52},[38,644,645],{"class":230}," \"y\"",[38,647,234],{"class":52},[38,649,650],{"class":230}," \"both\"",[38,652,234],{"class":52},[38,654,609],{"class":68},[38,656,658,661,663,666,668,671,673,676,678,681,683,686,688,691,693,696,698],{"class":40,"line":657},17,[38,659,660],{"class":216},"  when",[38,662,53],{"class":52},[38,664,665],{"class":230}," \"near\"",[38,667,234],{"class":52},[38,669,670],{"class":230}," \"hover\"",[38,672,234],{"class":52},[38,674,675],{"class":230}," \"press\"",[38,677,234],{"class":52},[38,679,680],{"class":230}," \"view\"",[38,682,234],{"class":52},[38,684,685],{"class":230}," \"view once\"",[38,687,234],{"class":52},[38,689,690],{"class":230}," \"scroll\"",[38,692,234],{"class":52},[38,694,695],{"class":230}," \"page\"",[38,697,234],{"class":52},[38,699,609],{"class":68},[38,701,703,706,708,710,712,714,716,719,721,723,726,728,730,733,735,737,740,742,744,746,748,751,753,755,757,760,762,764],{"class":40,"line":702},18,[38,704,705],{"class":216},"  x",[38,707,436],{"class":52},[38,709,421],{"class":48},[38,711,519],{"class":216},[38,713,436],{"class":52},[38,715,421],{"class":48},[38,717,718],{"class":216},"rotate",[38,720,436],{"class":52},[38,722,421],{"class":48},[38,724,725],{"class":216},"scale",[38,727,436],{"class":52},[38,729,421],{"class":48},[38,731,732],{"class":216},"opacity",[38,734,436],{"class":52},[38,736,421],{"class":48},[38,738,739],{"class":216},"blur",[38,741,53],{"class":52},[38,743,457],{"class":68},[38,745,234],{"class":52},[38,747,409],{"class":48},[38,749,750],{"class":216},"from",[38,752,415],{"class":48},[38,754,418],{"class":68},[38,756,421],{"class":48},[38,758,759],{"class":216},"to",[38,761,415],{"class":48},[38,763,418],{"class":68},[38,765,443],{"class":48},[38,767,769,772,774,776,779,781,784,786,788,790,792,795,797,799,801,803],{"class":40,"line":768},19,[38,770,771],{"class":216},"  color",[38,773,436],{"class":52},[38,775,421],{"class":48},[38,777,778],{"class":216},"background",[38,780,53],{"class":52},[38,782,783],{"class":68}," string",[38,785,234],{"class":52},[38,787,409],{"class":48},[38,789,750],{"class":216},[38,791,415],{"class":48},[38,793,794],{"class":68},"string",[38,796,421],{"class":48},[38,798,759],{"class":216},[38,800,415],{"class":48},[38,802,794],{"class":68},[38,804,443],{"class":48},[38,806,808,811,813,816,818,821,823],{"class":40,"line":807},20,[38,809,810],{"class":216},"  area",[38,812,53],{"class":52},[38,814,815],{"class":230}," \"scope\"",[38,817,234],{"class":52},[38,819,820],{"class":230}," \"self\"",[38,822,234],{"class":52},[38,824,825],{"class":230}," \"viewport\"\n",[38,827,829,832,834],{"class":40,"line":828},21,[38,830,831],{"class":216},"  radius",[38,833,53],{"class":52},[38,835,485],{"class":68},[38,837,839,842,844,846,848],{"class":40,"line":838},22,[38,840,841],{"class":216},"  limit",[38,843,53],{"class":52},[38,845,457],{"class":68},[38,847,234],{"class":52},[38,849,609],{"class":68},[38,851,853,856,858,860,862,864,866],{"class":40,"line":852},23,[38,854,855],{"class":216},"  axis",[38,857,53],{"class":52},[38,859,650],{"class":230},[38,861,234],{"class":52},[38,863,640],{"class":230},[38,865,234],{"class":52},[38,867,868],{"class":230}," \"y\"\n",[38,870,872,875,877,880,882,884,886,889,891],{"class":40,"line":871},24,[38,873,874],{"class":216},"  bounds",[38,876,53],{"class":52},[38,878,879],{"class":230}," \"parent\"",[38,881,234],{"class":52},[38,883,815],{"class":230},[38,885,234],{"class":52},[38,887,888],{"class":230}," \"viewport\"",[38,890,234],{"class":52},[38,892,609],{"class":68},[38,894,896,899,901,904,906,909,911],{"class":40,"line":895},25,[38,897,898],{"class":216},"  release",[38,900,53],{"class":52},[38,902,903],{"class":230}," \"throw\"",[38,905,234],{"class":52},[38,907,908],{"class":230}," \"stay\"",[38,910,234],{"class":52},[38,912,913],{"class":230}," \"return\"\n",[38,915,917,920,922],{"class":40,"line":916},26,[38,918,919],{"class":216},"  delay",[38,921,53],{"class":52},[38,923,485],{"class":68},[38,925,927,930,932],{"class":40,"line":926},27,[38,928,929],{"class":216},"  stagger",[38,931,53],{"class":52},[38,933,485],{"class":68},[38,935,937,940,942],{"class":40,"line":936},28,[38,938,939],{"class":216},"  index",[38,941,53],{"class":52},[38,943,485],{"class":68},[38,945,947,950,952],{"class":40,"line":946},29,[38,948,949],{"class":216},"  track",[38,951,53],{"class":52},[38,953,954],{"class":68}," boolean\n",[38,956,958],{"class":40,"line":957},30,[38,959,199],{"class":48},[15,961,963],{"id":962},"kinesistarget","KinesisTarget",[965,966,967,980],"table",{},[968,969,970],"thead",{},[971,972,973,977],"tr",{},[974,975,976],"th",{},"Member",[974,978,979],{},"Description",[981,982,983,994,1004,1014,1028,1038,1058,1068,1081,1094],"tbody",{},[971,984,985,991],{},[986,987,988],"td",{},[24,989,990],{},"element",[986,992,993],{},"the element",[971,995,996,1001],{},[986,997,998],{},[24,999,1000],{},"set(props)",[986,1002,1003],{},"set props; they override CSS until reset",[971,1005,1006,1011],{},[986,1007,1008],{},[24,1009,1010],{},"reset(...names)",[986,1012,1013],{},"return the named props (or all) to CSS",[971,1015,1016,1021],{},[986,1017,1018],{},[24,1019,1020],{},"bind(bindings)",[986,1022,1023,1024,1027],{},"drive channels or ",[24,1025,1026],{},"--custom"," properties from signals",[971,1029,1030,1035],{},[986,1031,1032],{},[24,1033,1034],{},"unbind(...names)",[986,1036,1037],{},"remove the named bindings (or all)",[971,1039,1040,1045],{},[986,1041,1042],{},[24,1043,1044],{},"on(event, fn)",[986,1046,1047,421,1050,1053,1054,1057],{},[24,1048,1049],{},"\"dragstart\"",[24,1051,1052],{},"\"drag\"",", or ",[24,1055,1056],{},"\"dragend\"","; returns an unsubscribe function",[971,1059,1060,1065],{},[986,1061,1062],{},[24,1063,1064],{},"progress",[986,1066,1067],{},"the reaction progress as a signal",[971,1069,1070,1075],{},[986,1071,1072],{},[24,1073,1074],{},"near",[986,1076,1077,1078],{},"pointer closeness as a signal: 1 at the element's center, 0 at its ",[24,1079,1080],{},"radius",[971,1082,1083,1088],{},[986,1084,1085],{},[24,1086,1087],{},"pointer",[986,1089,1090,1093],{},[24,1091,1092],{},"{ x, y }"," signals: the pointer's offset from the element's resting center, px",[971,1095,1096,1101],{},[986,1097,1098],{},[24,1099,1100],{},"destroy()",[986,1102,1103],{},"remove everything added from JavaScript",[20,1105,1106,1107,421,1109,421,1111,421,1114,421,1116,421,1119,421,1122,421,1124,421,1126,421,1128,1130,1131,1134,1135,274],{},"Bindable channels: ",[24,1108,510],{},[24,1110,519],{},[24,1112,1113],{},"z",[24,1115,718],{},[24,1117,1118],{},"rotateX",[24,1120,1121],{},"rotateY",[24,1123,725],{},[24,1125,732],{},[24,1127,739],{},[24,1129,1064],{},", and any ",[24,1132,1133],{},"--custom-property",". Drag events receive ",[24,1136,1137],{},"{ x, y, velocityX, velocityY }",[20,1139,1140,1143,1144,274],{},[24,1141,1142],{},"KinesisTargets"," (from a selector) has the same methods, applied to every element, plus ",[24,1145,1146],{},"targets",[10,1148,1150],{"id":1149},"signals","Signals",[29,1152,1154],{"className":31,"code":1153,"language":33,"meta":34,"style":34},"abstract class Signal {\n  get(): number\n  map(from: [number, number], to: [number, number], options?: { clamp?: boolean }): Signal\n  map(fn: (value: number) => number): Signal\n  clamp(min: number, max: number): Signal\n  spring(motion?: MotionPreset | SpringOptions): Signal\n  subscribe(fn: (value: number) => void): () => void\n}\n",[24,1155,1156,1169,1180,1239,1275,1304,1330,1367],{"__ignoreMap":34},[38,1157,1158,1161,1164,1167],{"class":40,"line":41},[38,1159,1160],{"class":52},"abstract",[38,1162,1163],{"class":52}," class",[38,1165,1166],{"class":216}," Signal",[38,1168,220],{"class":48},[38,1170,1171,1174,1176,1178],{"class":40,"line":126},[38,1172,1173],{"class":44},"  get",[38,1175,62],{"class":48},[38,1177,65],{"class":52},[38,1179,485],{"class":68},[38,1181,1182,1185,1188,1190,1192,1194,1196,1198,1200,1203,1205,1207,1209,1211,1213,1215,1217,1220,1222,1224,1227,1229,1231,1234,1236],{"class":40,"line":132},[38,1183,1184],{"class":44},"  map",[38,1186,1187],{"class":48},"(",[38,1189,750],{"class":216},[38,1191,65],{"class":52},[38,1193,409],{"class":48},[38,1195,418],{"class":68},[38,1197,421],{"class":48},[38,1199,418],{"class":68},[38,1201,1202],{"class":48},"], ",[38,1204,759],{"class":216},[38,1206,65],{"class":52},[38,1208,409],{"class":48},[38,1210,418],{"class":68},[38,1212,421],{"class":48},[38,1214,418],{"class":68},[38,1216,1202],{"class":48},[38,1218,1219],{"class":216},"options",[38,1221,53],{"class":52},[38,1223,450],{"class":48},[38,1225,1226],{"class":216},"clamp",[38,1228,53],{"class":52},[38,1230,255],{"class":68},[38,1232,1233],{"class":48}," })",[38,1235,65],{"class":52},[38,1237,1238],{"class":216}," Signal\n",[38,1240,1241,1243,1245,1248,1250,1253,1256,1258,1260,1263,1266,1268,1271,1273],{"class":40,"line":146},[38,1242,1184],{"class":44},[38,1244,1187],{"class":48},[38,1246,1247],{"class":44},"fn",[38,1249,65],{"class":52},[38,1251,1252],{"class":48}," (",[38,1254,1255],{"class":216},"value",[38,1257,65],{"class":52},[38,1259,457],{"class":68},[38,1261,1262],{"class":48},") ",[38,1264,1265],{"class":52},"=>",[38,1267,457],{"class":68},[38,1269,1270],{"class":48},")",[38,1272,65],{"class":52},[38,1274,1238],{"class":216},[38,1276,1277,1280,1282,1285,1287,1289,1291,1294,1296,1298,1300,1302],{"class":40,"line":162},[38,1278,1279],{"class":44},"  clamp",[38,1281,1187],{"class":48},[38,1283,1284],{"class":216},"min",[38,1286,65],{"class":52},[38,1288,457],{"class":68},[38,1290,421],{"class":48},[38,1292,1293],{"class":216},"max",[38,1295,65],{"class":52},[38,1297,457],{"class":68},[38,1299,1270],{"class":48},[38,1301,65],{"class":52},[38,1303,1238],{"class":216},[38,1305,1306,1309,1311,1314,1316,1319,1321,1324,1326,1328],{"class":40,"line":173},[38,1307,1308],{"class":44},"  spring",[38,1310,1187],{"class":48},[38,1312,1313],{"class":216},"motion",[38,1315,53],{"class":52},[38,1317,1318],{"class":216}," MotionPreset",[38,1320,234],{"class":52},[38,1322,1323],{"class":216}," SpringOptions",[38,1325,1270],{"class":48},[38,1327,65],{"class":52},[38,1329,1238],{"class":216},[38,1331,1332,1335,1337,1339,1341,1343,1345,1347,1349,1351,1353,1355,1357,1359,1362,1364],{"class":40,"line":183},[38,1333,1334],{"class":44},"  subscribe",[38,1336,1187],{"class":48},[38,1338,1247],{"class":44},[38,1340,65],{"class":52},[38,1342,1252],{"class":48},[38,1344,1255],{"class":216},[38,1346,65],{"class":52},[38,1348,457],{"class":68},[38,1350,1262],{"class":48},[38,1352,1265],{"class":52},[38,1354,69],{"class":68},[38,1356,1270],{"class":48},[38,1358,65],{"class":52},[38,1360,1361],{"class":48}," () ",[38,1363,1265],{"class":52},[38,1365,1366],{"class":68}," void\n",[38,1368,1369],{"class":40,"line":196},[38,1370,199],{"class":48},[965,1372,1373,1382],{},[968,1374,1375],{},[971,1376,1377,1380],{},[974,1378,1379],{},"Export",[974,1381,979],{},[981,1383,1384,1414,1432,1442,1455],{},[971,1385,1386,1390],{},[986,1387,1388],{},[24,1389,1087],{},[986,1391,1392,421,1394,421,1396,421,1399,421,1402,421,1405,421,1408,421,1411],{},[24,1393,510],{},[24,1395,519],{},[24,1397,1398],{},"nx",[24,1400,1401],{},"ny",[24,1403,1404],{},"velocityX",[24,1406,1407],{},"velocityY",[24,1409,1410],{},"speed",[24,1412,1413],{},"present",[971,1415,1416,1421],{},[986,1417,1418],{},[24,1419,1420],{},"scroll",[986,1422,1423,421,1425,421,1427,421,1429],{},[24,1424,510],{},[24,1426,519],{},[24,1428,1064],{},[24,1430,1431],{},"velocity",[971,1433,1434,1439],{},[986,1435,1436],{},[24,1437,1438],{},"time",[986,1440,1441],{},"seconds since load; keeps frames running while read",[971,1443,1444,1449],{},[986,1445,1446],{},[24,1447,1448],{},"value(initial)",[986,1450,1451,1452],{},"a signal you ",[24,1453,1454],{},"set()",[971,1456,1457,1462],{},[986,1458,1459],{},[24,1460,1461],{},"computed(fn)",[986,1463,1464,1465],{},"a signal derived from others read inside ",[24,1466,1247],{},[10,1468,1470],{"id":1469},"other-exports","Other exports",[965,1472,1473,1481],{},[968,1474,1475],{},[971,1476,1477,1479],{},[974,1478,1379],{},[974,1480,979],{},[981,1482,1483,1496,1518],{},[971,1484,1485,1490],{},[986,1486,1487],{},[24,1488,1489],{},"presets",[986,1491,1492,1493],{},"the motion presets as ",[24,1494,1495],{},"{ stiffness, damping, mass }",[971,1497,1498,1503],{},[986,1499,1500],{},[24,1501,1502],{},"properties",[986,1504,1505,1506,421,1509,421,1512,421,1515],{},"every registered property: ",[24,1507,1508],{},"name",[24,1510,1511],{},"syntax",[24,1513,1514],{},"initial",[24,1516,1517],{},"inherits",[971,1519,1520,1525],{},[986,1521,1522],{},[24,1523,1524],{},"version",[986,1526,1527],{},"the library version",[10,1529,1531],{"id":1530},"amineyarmankinesistext","@amineyarman\u002Fkinesis\u002Ftext",[29,1533,1535],{"className":31,"code":1534,"language":33,"meta":34,"style":34},"splitText(target: Element | string, by?: \"chars\" | \"words\" | \"lines\"): SplitResult\nsplitAll(root?: ParentNode): SplitResult[]   \u002F\u002F elements with data-k-split\n\ninterface SplitResult {\n  element: HTMLElement\n  chars: HTMLElement[]\n  words: HTMLElement[]\n  lines: HTMLElement[]\n  revert(): void\n}\n",[24,1536,1537,1568,1584,1590,1599,1609,1622,1633,1644,1655],{"__ignoreMap":34},[38,1538,1539,1542,1545,1547,1550,1552,1555,1557,1560,1562,1565],{"class":40,"line":41},[38,1540,1541],{"class":44},"splitText",[38,1543,1544],{"class":48},"(target: Element ",[38,1546,115],{"class":52},[38,1548,1549],{"class":48}," string, by",[38,1551,53],{"class":52},[38,1553,1554],{"class":230}," \"chars\"",[38,1556,234],{"class":52},[38,1558,1559],{"class":230}," \"words\"",[38,1561,234],{"class":52},[38,1563,1564],{"class":230}," \"lines\"",[38,1566,1567],{"class":48},"): SplitResult\n",[38,1569,1570,1573,1576,1578,1581],{"class":40,"line":126},[38,1571,1572],{"class":44},"splitAll",[38,1574,1575],{"class":48},"(root",[38,1577,53],{"class":52},[38,1579,1580],{"class":48}," ParentNode): SplitResult[]   ",[38,1582,1583],{"class":158},"\u002F\u002F elements with data-k-split\n",[38,1585,1586],{"class":40,"line":132},[38,1587,1589],{"emptyLinePlaceholder":1588},true,"\n",[38,1591,1592,1594,1597],{"class":40,"line":146},[38,1593,213],{"class":52},[38,1595,1596],{"class":216}," SplitResult",[38,1598,220],{"class":48},[38,1600,1601,1604,1606],{"class":40,"line":162},[38,1602,1603],{"class":216},"  element",[38,1605,65],{"class":52},[38,1607,1608],{"class":216}," HTMLElement\n",[38,1610,1611,1614,1616,1619],{"class":40,"line":173},[38,1612,1613],{"class":216},"  chars",[38,1615,65],{"class":52},[38,1617,1618],{"class":216}," HTMLElement",[38,1620,1621],{"class":48},"[]\n",[38,1623,1624,1627,1629,1631],{"class":40,"line":183},[38,1625,1626],{"class":216},"  words",[38,1628,65],{"class":52},[38,1630,1618],{"class":216},[38,1632,1621],{"class":48},[38,1634,1635,1638,1640,1642],{"class":40,"line":196},[38,1636,1637],{"class":216},"  lines",[38,1639,65],{"class":52},[38,1641,1618],{"class":216},[38,1643,1621],{"class":48},[38,1645,1646,1649,1651,1653],{"class":40,"line":557},[38,1647,1648],{"class":44},"  revert",[38,1650,62],{"class":48},[38,1652,65],{"class":52},[38,1654,1366],{"class":68},[38,1656,1657],{"class":40,"line":567},[38,1658,199],{"class":48},[10,1660,1662],{"id":1661},"amineyarmankinesisaudio","@amineyarman\u002Fkinesis\u002Faudio",[29,1664,1666],{"className":31,"code":1665,"language":33,"meta":34,"style":34},"createAudio(\n  source: HTMLMediaElement | MediaStream | AudioNode,\n  options?: { context?: AudioContext; fftSize?: number; smoothing?: number },\n): {\n  volume: Signal\n  bass: Signal\n  mid: Signal\n  treble: Signal\n  band(fromHz: number, toHz: number): Signal\n  context: AudioContext\n  resume(): Promise\u003Cvoid>\n  destroy(): void\n}\n",[24,1667,1668,1676,1691,1711,1716,1721,1726,1731,1736,1744,1749,1761,1769],{"__ignoreMap":34},[38,1669,1670,1673],{"class":40,"line":41},[38,1671,1672],{"class":44},"createAudio",[38,1674,1675],{"class":48},"(\n",[38,1677,1678,1681,1683,1686,1688],{"class":40,"line":126},[38,1679,1680],{"class":48},"  source: HTMLMediaElement ",[38,1682,115],{"class":52},[38,1684,1685],{"class":48}," MediaStream ",[38,1687,115],{"class":52},[38,1689,1690],{"class":48}," AudioNode,\n",[38,1692,1693,1696,1698,1701,1703,1706,1708],{"class":40,"line":132},[38,1694,1695],{"class":48},"  options",[38,1697,53],{"class":52},[38,1699,1700],{"class":48}," { context?: AudioContext; fftSize",[38,1702,53],{"class":52},[38,1704,1705],{"class":48}," number; smoothing",[38,1707,53],{"class":52},[38,1709,1710],{"class":48}," number },\n",[38,1712,1713],{"class":40,"line":146},[38,1714,1715],{"class":48},"): {\n",[38,1717,1718],{"class":40,"line":162},[38,1719,1720],{"class":48},"  volume: Signal\n",[38,1722,1723],{"class":40,"line":173},[38,1724,1725],{"class":48},"  bass: Signal\n",[38,1727,1728],{"class":40,"line":183},[38,1729,1730],{"class":48},"  mid: Signal\n",[38,1732,1733],{"class":40,"line":196},[38,1734,1735],{"class":48},"  treble: Signal\n",[38,1737,1738,1741],{"class":40,"line":557},[38,1739,1740],{"class":44},"  band",[38,1742,1743],{"class":48},"(fromHz: number, toHz: number): Signal\n",[38,1745,1746],{"class":40,"line":567},[38,1747,1748],{"class":48},"  context: AudioContext\n",[38,1750,1751,1753,1755,1758],{"class":40,"line":577},[38,1752,176],{"class":44},[38,1754,152],{"class":48},[38,1756,1757],{"class":68},"Promise",[38,1759,1760],{"class":52},"\u003Cvoid>\n",[38,1762,1763,1765,1767],{"class":40,"line":587},[38,1764,186],{"class":44},[38,1766,152],{"class":48},[38,1768,170],{"class":52},[38,1770,1771],{"class":40,"line":597},[38,1772,199],{"class":48},[10,1774,1776],{"id":1775},"amineyarmankinesisvue","@amineyarman\u002Fkinesis\u002Fvue",[965,1778,1779,1787],{},[968,1780,1781],{},[971,1782,1783,1785],{},[974,1784,1379],{},[974,1786,979],{},[981,1788,1789,1810],{},[971,1790,1791,1796],{},[986,1792,1793],{},[24,1794,1795],{},"KinesisPlugin",[986,1797,1798,1801,1802,1805,1806,1809],{},[24,1799,1800],{},"app.use(KinesisPlugin, options?)"," registers ",[24,1803,1804],{},"v-kinesis"," and starts discovery (pass ",[24,1807,1808],{},"{ auto: false }"," to skip)",[971,1811,1812,1817],{},[986,1813,1814],{},[24,1815,1816],{},"vKinesis",[986,1818,1819],{},"the directive, for local registration",[10,1821,1823],{"id":1822},"amineyarmankinesisauto","@amineyarman\u002Fkinesis\u002Fauto",[20,1825,1826,1827,1830,1831,1834,1835,1838,1839,274],{},"Importing it calls ",[24,1828,1829],{},"initKinesis()"," when the document is ready. The ",[24,1832,1833],{},"\u003Cscript>"," build (",[24,1836,1837],{},"dist\u002Fkinesis.global.js",") does the same and exposes everything on ",[24,1840,1841],{},"window.Kinesis",[1843,1844,1845],"style",{},"html pre.shiki code .sc3cj, html code.shiki .sc3cj{--shiki-default:#D2A8FF}html pre.shiki code .sZEs4, html code.shiki .sZEs4{--shiki-default:#E6EDF3}html pre.shiki code .suJrU, html code.shiki .suJrU{--shiki-default:#FF7B72}html pre.shiki code .sFSAA, html code.shiki .sFSAA{--shiki-default:#79C0FF}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 .sH3jZ, html code.shiki .sH3jZ{--shiki-default:#8B949E}html pre.shiki code .sQhOw, html code.shiki .sQhOw{--shiki-default:#FFA657}html pre.shiki code .s9uIt, html code.shiki .s9uIt{--shiki-default:#A5D6FF}",{"title":34,"searchDepth":132,"depth":132,"links":1847},[1848,1855,1859,1860,1861,1862,1863,1864],{"id":12,"depth":126,"text":13,"children":1849},[1850,1851,1852,1853,1854],{"id":17,"depth":132,"text":18},{"id":87,"depth":132,"text":88},{"id":202,"depth":132,"text":203},{"id":59,"depth":132,"text":265},{"id":277,"depth":132,"text":278},{"id":291,"depth":126,"text":292,"children":1856},[1857,1858],{"id":295,"depth":132,"text":296},{"id":962,"depth":132,"text":963},{"id":1149,"depth":126,"text":1150},{"id":1469,"depth":126,"text":1470},{"id":1530,"depth":126,"text":1531},{"id":1661,"depth":126,"text":1662},{"id":1775,"depth":126,"text":1776},{"id":1822,"depth":126,"text":1823},"Every export of @amineyarman\u002Fkinesis and its text, audio, and Vue modules.","md",{},"\u002Fdocs\u002Freference\u002Fjavascript","---\ntitle: JavaScript API\ndescription: Every export of @amineyarman\u002Fkinesis and its text, audio, and Vue modules.\n---\n\n## Starting Kinesis\n\n### initKinesis(options?)\n\nSets up every `[data-kinesis]` element and keeps watching the page for new ones, removed ones, theme changes, and new stylesheets. Calling it again returns the same app and refreshes it. Does nothing on the server.\n\n```ts\ninitKinesis(options?: KinesisOptions): { refresh(): void; destroy(): void }\n```\n\n### createKinesis(root, options?)\n\nMakes `root` a scope (adding `data-kinesis` if needed) and returns controls for it.\n\n```ts\ncreateKinesis(root: Element | string, options?: KinesisOptions): {\n  root: Element\n  target(element: Element, props?: KinesisProps): KinesisTarget\n  refresh(): void   \u002F\u002F re-read CSS\n  pause(): void\n  resume(): void\n  destroy(): void   \u002F\u002F restore every style Kinesis wrote\n}\n```\n\n### configure(options)\n\n```ts\ninterface KinesisOptions {\n  reducedMotion?: \"user\" | \"always\" | \"never\"   \u002F\u002F default \"user\"\n  debug?: boolean                               \u002F\u002F console diagnostics, default false\n}\n```\n\n### refresh()\n\nRe-reads CSS in every scope. Only needed after changes Kinesis can't observe. See [Working with CSS](\u002Fdocs\u002Fcss\u002F#themes-and-stylesheets).\n\n### requestOrientation()\n\nAsks for device-orientation access. Call it from a click. If granted, device tilt drives parallax and tilt on touch devices. Resolves to `true` or `false`.\n\n## Animating elements\n\n### kinesis(target, props?)\n\n```ts\nkinesis(element: Element, props?: KinesisProps): KinesisTarget\nkinesis(selector: string | Iterable\u003CElement>, props?: KinesisProps): KinesisTargets\n```\n\n`KinesisProps` has one key per [CSS property](\u002Fdocs\u002Freference\u002Fcss\u002F), in camelCase. Lengths are px, angles deg, times ms.\n\n```ts\ninterface KinesisProps {\n  motion?: \"instant\" | \"smooth\" | \"soft\" | \"snappy\" | \"bouncy\" | \"heavy\"\n         | [stiffness: number, damping: number, mass?: number]\n         | { stiffness: number; damping: number; mass?: number }\n  intensity?: number\n  perspective?: number\n  parallax?: number | [x: number, y: number]\n  tilt?: number | [x: number, y: number]\n  magnetic?: number\n  repel?: number\n  follow?: number\n  look?: number\n  point?: number | null\n  spin?: number\n  depth?: number\n  drag?: \"x\" | \"y\" | \"both\" | null\n  when?: \"near\" | \"hover\" | \"press\" | \"view\" | \"view once\" | \"scroll\" | \"page\" | null\n  x?, y?, rotate?, scale?, opacity?, blur?: number | [from: number, to: number]\n  color?, background?: string | [from: string, to: string]\n  area?: \"scope\" | \"self\" | \"viewport\"\n  radius?: number\n  limit?: number | null\n  axis?: \"both\" | \"x\" | \"y\"\n  bounds?: \"parent\" | \"scope\" | \"viewport\" | null\n  release?: \"throw\" | \"stay\" | \"return\"\n  delay?: number\n  stagger?: number\n  index?: number\n  track?: boolean\n}\n```\n\n### KinesisTarget\n\n| Member | Description |\n| --- | --- |\n| `element` | the element |\n| `set(props)` | set props; they override CSS until reset |\n| `reset(...names)` | return the named props (or all) to CSS |\n| `bind(bindings)` | drive channels or `--custom` properties from signals |\n| `unbind(...names)` | remove the named bindings (or all) |\n| `on(event, fn)` | `\"dragstart\"`, `\"drag\"`, or `\"dragend\"`; returns an unsubscribe function |\n| `progress` | the reaction progress as a signal |\n| `near` | pointer closeness as a signal: 1 at the element's center, 0 at its `radius` |\n| `pointer` | `{ x, y }` signals: the pointer's offset from the element's resting center, px |\n| `destroy()` | remove everything added from JavaScript |\n\nBindable channels: `x`, `y`, `z`, `rotate`, `rotateX`, `rotateY`, `scale`, `opacity`, `blur`, `progress`, and any `--custom-property`. Drag events receive `{ x, y, velocityX, velocityY }`.\n\n`KinesisTargets` (from a selector) has the same methods, applied to every element, plus `targets`.\n\n## Signals\n\n```ts\nabstract class Signal {\n  get(): number\n  map(from: [number, number], to: [number, number], options?: { clamp?: boolean }): Signal\n  map(fn: (value: number) => number): Signal\n  clamp(min: number, max: number): Signal\n  spring(motion?: MotionPreset | SpringOptions): Signal\n  subscribe(fn: (value: number) => void): () => void\n}\n```\n\n| Export | Description |\n| --- | --- |\n| `pointer` | `x`, `y`, `nx`, `ny`, `velocityX`, `velocityY`, `speed`, `present` |\n| `scroll` | `x`, `y`, `progress`, `velocity` |\n| `time` | seconds since load; keeps frames running while read |\n| `value(initial)` | a signal you `set()` |\n| `computed(fn)` | a signal derived from others read inside `fn` |\n\n## Other exports\n\n| Export | Description |\n| --- | --- |\n| `presets` | the motion presets as `{ stiffness, damping, mass }` |\n| `properties` | every registered property: `name`, `syntax`, `initial`, `inherits` |\n| `version` | the library version |\n\n## @amineyarman\u002Fkinesis\u002Ftext\n\n```ts\nsplitText(target: Element | string, by?: \"chars\" | \"words\" | \"lines\"): SplitResult\nsplitAll(root?: ParentNode): SplitResult[]   \u002F\u002F elements with data-k-split\n\ninterface SplitResult {\n  element: HTMLElement\n  chars: HTMLElement[]\n  words: HTMLElement[]\n  lines: HTMLElement[]\n  revert(): void\n}\n```\n\n## @amineyarman\u002Fkinesis\u002Faudio\n\n```ts\ncreateAudio(\n  source: HTMLMediaElement | MediaStream | AudioNode,\n  options?: { context?: AudioContext; fftSize?: number; smoothing?: number },\n): {\n  volume: Signal\n  bass: Signal\n  mid: Signal\n  treble: Signal\n  band(fromHz: number, toHz: number): Signal\n  context: AudioContext\n  resume(): Promise\u003Cvoid>\n  destroy(): void\n}\n```\n\n## @amineyarman\u002Fkinesis\u002Fvue\n\n| Export | Description |\n| --- | --- |\n| `KinesisPlugin` | `app.use(KinesisPlugin, options?)` registers `v-kinesis` and starts discovery (pass `{ auto: false }` to skip) |\n| `vKinesis` | the directive, for local registration |\n\n## @amineyarman\u002Fkinesis\u002Fauto\n\nImporting it calls `initKinesis()` when the document is ready. The `\u003Cscript>` build (`dist\u002Fkinesis.global.js`) does the same and exposes everything on `window.Kinesis`.\n",{"title":5,"description":1865},"docs\u002Freference\u002Fjavascript","_EFztx-wCi4HyiS0nfL6jjKrVRXuFeHIInbS5BKZUtk",1791309903159]