{"_id":"@amineyarman/kinesis","_rev":"6-84ede385188967117d081fbf35d49442","name":"@amineyarman/kinesis","dist-tags":{"latest":"1.0.6"},"versions":{"1.0.0":{"name":"@amineyarman/kinesis","version":"1.0.0","keywords":["kinesis","animation","interactive","transformations"],"author":{"name":"Amine Bouyarmane"},"license":"MIT","_id":"@amineyarman/kinesis@1.0.0","maintainers":[{"name":"aminerman","email":"amine.bouyarmane@gmail.com"}],"homepage":"https://github.com/amineyarman/kinesis#readme","bugs":{"url":"https://github.com/amineyarman/kinesis/issues"},"dist":{"shasum":"0ce3deb059464c1ed0a1b6385b477006728b7a4e","tarball":"https://registry.npmjs.org/@amineyarman/kinesis/-/kinesis-1.0.0.tgz","fileCount":20,"integrity":"sha512-FZ+VsZfWsI/N8qZ0PAtkrIsQ1JtgG33X/nWfXXvISq8cmi6QrN001DsCcGpxery+RO12yegzgy0h8yQ87gNzHw==","signatures":[{"sig":"MEQCICgJ345JDXs/PiaxAqfB3noH51F31HO8bxSHtYaem5RfAiABAfP0s6DYzgy1PHDqINkDgqmeSYVdEtWzkFOFOPlg3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86267},"main":"dist/kinesis.umd.js","types":"dist/index.d.ts","module":"dist/kinesis.es.js","gitHead":"a464b7a4b8c2b4ffd3f7e21b7364558422bab2f4","scripts":{"dev":"vite","test":"echo \"Error: no test specified\" && exit 1","build":"vite build && tsc","preview":"vite preview"},"_npmUser":{"name":"aminerman","email":"amine.bouyarmane@gmail.com"},"repository":{"url":"git+https://github.com/amineyarman/kinesis.git","type":"git"},"_npmVersion":"9.6.2","description":"Easily create complex interactive animations.","directories":{},"_nodeVersion":"20.16.0","_hasShrinkwrap":false,"devDependencies":{"path":"^0.12.7","vite":"^5.4.1","typescript":"^5.5.3","@types/node":"^22.5.5"},"_npmOperationalInternal":{"tmp":"tmp/kinesis_1.0.0_1727715028422_0.07530998480262618","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@amineyarman/kinesis","version":"1.0.1","keywords":["kinesis","animation","interactive","transformations"],"author":{"name":"Amine Bouyarmane"},"license":"MIT","_id":"@amineyarman/kinesis@1.0.1","maintainers":[{"name":"aminerman","email":"amine.bouyarmane@gmail.com"}],"homepage":"https://github.com/amineyarman/kinesis#readme","bugs":{"url":"https://github.com/amineyarman/kinesis/issues"},"dist":{"shasum":"4c6a86f200aa67072442f87703a645af3cff4f50","tarball":"https://registry.npmjs.org/@amineyarman/kinesis/-/kinesis-1.0.1.tgz","fileCount":20,"integrity":"sha512-y/A3Jd/b/jxTYbTPyfoIkDXwSZz37Y/kFt46BpfDtUQlGLSbHhEW13DsIwLicZ1sn3SCrzjMMrwk+x1az6fTWg==","signatures":[{"sig":"MEYCIQCVKKlqs8d6DBP/tOBq/1a1fhraRxCbY9prgsu2L15/yAIhANrhbnu5lBMTyRhuu4vcmUwD4pkGJN1tv5M740lVJDwz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":91772},"main":"dist/kinesis.umd.js","types":"dist/index.d.ts","module":"dist/kinesis.es.js","gitHead":"6ad17f6eda6c88c914a0d7ce00b1790e61e8eb2c","scripts":{"dev":"vite","test":"echo \"Error: no test specified\" && exit 1","build":"vite build && tsc","preview":"vite preview"},"_npmUser":{"name":"aminerman","email":"amine.bouyarmane@gmail.com"},"repository":{"url":"git+https://github.com/amineyarman/kinesis.git","type":"git"},"_npmVersion":"9.6.2","description":"Easily create complex interactive animations.","directories":{},"_nodeVersion":"20.16.0","_hasShrinkwrap":false,"devDependencies":{"path":"^0.12.7","vite":"^5.4.1","typescript":"^5.5.3","@types/node":"^22.5.5"},"_npmOperationalInternal":{"tmp":"tmp/kinesis_1.0.1_1727964985067_0.8141049553707049","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@amineyarman/kinesis","version":"1.0.2","keywords":["kinesis","animation","interactive","transformations"],"author":{"name":"Amine Bouyarmane"},"license":"MIT","_id":"@amineyarman/kinesis@1.0.2","maintainers":[{"name":"aminerman","email":"amine.bouyarmane@gmail.com"}],"homepage":"https://github.com/amineyarman/kinesis#readme","bugs":{"url":"https://github.com/amineyarman/kinesis/issues"},"dist":{"shasum":"bbf57db4738b915b6968623870ea1a990abd46b4","tarball":"https://registry.npmjs.org/@amineyarman/kinesis/-/kinesis-1.0.2.tgz","fileCount":20,"integrity":"sha512-0CAaYVY3hN3uIjg8YzCpKmTjlGXe0fftip98sTRRGJ5l8X4TVyzNqukCQE6tzCSM/UlLPjrDTFehnM9r4BJqgg==","signatures":[{"sig":"MEUCIDirg0KWj8J0K3rcYr4ZVNsWfwxJIQkvIOAoN+JnMneJAiEA2nQPXxmA0uogK/4Vxx3JggIOV3s5iN9ovu4vsM8E0SU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":102231},"main":"dist/kinesis.umd.js","types":"dist/index.d.ts","module":"dist/kinesis.es.js","gitHead":"adac6866e35b429cc5eace8628cb2a5079c1f53d","scripts":{"dev":"vite","test":"echo \"Error: no test specified\" && exit 1","build":"vite build && tsc","preview":"vite preview"},"_npmUser":{"name":"aminerman","email":"amine.bouyarmane@gmail.com"},"repository":{"url":"git+https://github.com/amineyarman/kinesis.git","type":"git"},"_npmVersion":"9.6.2","description":"Easily create complex interactive animations.","directories":{},"_nodeVersion":"20.16.0","_hasShrinkwrap":false,"devDependencies":{"path":"^0.12.7","vite":"^5.4.1","typescript":"^5.5.3","@types/node":"^22.5.5"},"_npmOperationalInternal":{"tmp":"tmp/kinesis_1.0.2_1728054201620_0.01693559258279942","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"@amineyarman/kinesis","version":"1.0.3","keywords":["kinesis","animation","interactive","transformations"],"author":{"name":"Amine Bouyarmane"},"license":"MIT","_id":"@amineyarman/kinesis@1.0.3","maintainers":[{"name":"aminerman","email":"amine.bouyarmane@gmail.com"}],"homepage":"https://github.com/amineyarman/kinesis#readme","bugs":{"url":"https://github.com/amineyarman/kinesis/issues"},"dist":{"shasum":"7d1967dd9759768688c4eb7b8a831123c3abf57a","tarball":"https://registry.npmjs.org/@amineyarman/kinesis/-/kinesis-1.0.3.tgz","fileCount":20,"integrity":"sha512-JjCcBobyxdyOMlesfnkpmQKhtHgxX6dO/qOXHQ4top3idr6Uswc76NU1qMm26P6CDPuEfL6czSlaCaiLHLLuiA==","signatures":[{"sig":"MEUCID5ymdLvtsbpUgYA/HTf2JCPtHGbX7yNwoglCI2TDo49AiEAtAEDJ4ZmrfUACotCF199QR4mngQdK/JHoE6+e4b5Omg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":102231},"main":"dist/kinesis.umd.js","types":"dist/index.d.ts","module":"dist/kinesis.es.js","gitHead":"e4f0eb25c7a570c21b199a3c75082cf4ce96f407","scripts":{"dev":"vite","test":"echo \"Error: no test specified\" && exit 1","build":"vite build && tsc","preview":"vite preview"},"_npmUser":{"name":"aminerman","email":"amine.bouyarmane@gmail.com"},"repository":{"url":"git+https://github.com/amineyarman/kinesis.git","type":"git"},"_npmVersion":"9.6.2","description":"Easily create complex interactive animations.","directories":{},"_nodeVersion":"20.16.0","_hasShrinkwrap":false,"devDependencies":{"path":"^0.12.7","vite":"^5.4.1","typescript":"^5.5.3","@types/node":"^22.5.5"},"_npmOperationalInternal":{"tmp":"tmp/kinesis_1.0.3_1728054759504_0.8986019163026813","host":"s3://npm-registry-packages"}},"1.0.4":{"name":"@amineyarman/kinesis","version":"1.0.4","keywords":["kinesis","animation","interactive","transformations"],"author":{"name":"Amine Bouyarmane"},"license":"MIT","_id":"@amineyarman/kinesis@1.0.4","maintainers":[{"name":"aminerman","email":"amine.bouyarmane@gmail.com"}],"homepage":"https://github.com/amineyarman/kinesis#readme","bugs":{"url":"https://github.com/amineyarman/kinesis/issues"},"dist":{"shasum":"615c7b4288eba770a3007b207ab34e5f166ef5ba","tarball":"https://registry.npmjs.org/@amineyarman/kinesis/-/kinesis-1.0.4.tgz","fileCount":19,"integrity":"sha512-ORk8Fa1PZ9aQMw5dvQHIXDIsNwiJMDARR9xtTrek8ClURcGHJYrquBUw6dJyhYlt4430YeIeEVzOkCklH/8LxQ==","signatures":[{"sig":"MEYCIQDuv9eRUMTYAsPBvZ9CSduhLU1CvlRjAWBVBwjh4GagKQIhALF/ZBAjrXk1Zp4SRByp4J0FQoslNO2JLKmlERIT90u3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":102220},"main":"dist/kinesis.umd.js","types":"dist/index.d.ts","module":"dist/kinesis.es.js","gitHead":"3ed239885cd9c9e4817cfe1cf9698dc9aff13676","scripts":{"dev":"vite","test":"echo \"Error: no test specified\" && exit 1","build":"vite build && tsc","preview":"vite preview"},"_npmUser":{"name":"aminerman","email":"amine.bouyarmane@gmail.com"},"repository":{"url":"git+https://github.com/amineyarman/kinesis.git","type":"git"},"_npmVersion":"9.6.2","description":"Easily create complex interactive animations.","directories":{},"_nodeVersion":"20.16.0","_hasShrinkwrap":false,"devDependencies":{"path":"^0.12.7","vite":"^5.4.1","typescript":"^5.5.3","@types/node":"^22.5.5"},"_npmOperationalInternal":{"tmp":"tmp/kinesis_1.0.4_1728058733187_0.819692555242064","host":"s3://npm-registry-packages"}},"1.0.5":{"name":"@amineyarman/kinesis","version":"1.0.5","keywords":["kinesis","animation","interactive","transformations"],"author":{"name":"Amine Bouyarmane"},"license":"MIT","_id":"@amineyarman/kinesis@1.0.5","maintainers":[{"name":"aminerman","email":"amine.bouyarmane@gmail.com"}],"homepage":"https://github.com/amineyarman/kinesis#readme","bugs":{"url":"https://github.com/amineyarman/kinesis/issues"},"dist":{"shasum":"e643ba714d069c2e8db34471c4f012aa4010d5c3","tarball":"https://registry.npmjs.org/@amineyarman/kinesis/-/kinesis-1.0.5.tgz","fileCount":19,"integrity":"sha512-xtnRcZHzlX/n9MA9efz7lsAxvxccmi6lsNW3bpNTyUJPKHYuU0SwbnlZDTt9ZzXrep56MPgPwq0li5JHQ0lLzw==","signatures":[{"sig":"MEYCIQCjkcQ3t538fIqBHFL7EZVa4wJRSVDA7V0QzYGPQHTeLAIhALyPI12XFukObGGrmL/BfOrDVquUngEoAGnRHkCQ3LvC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":102337},"main":"dist/kinesis.umd.js","types":"dist/index.d.ts","module":"dist/kinesis.es.js","gitHead":"d6c6e01517c1c4888f3aeaf5b31207f5f472ec78","scripts":{"dev":"vite","test":"echo \"Error: no test specified\" && exit 1","build":"vite build && tsc","preview":"vite preview"},"_npmUser":{"name":"aminerman","email":"amine.bouyarmane@gmail.com"},"repository":{"url":"git+https://github.com/amineyarman/kinesis.git","type":"git"},"_npmVersion":"10.8.2","description":"Easily create complex interactive animations.","directories":{},"_nodeVersion":"20.18.0","_hasShrinkwrap":false,"devDependencies":{"path":"^0.12.7","vite":"^5.4.1","typescript":"^5.5.3","@types/node":"^22.5.5"},"_npmOperationalInternal":{"tmp":"tmp/kinesis_1.0.5_1731927498315_0.46816720010479096","host":"s3://npm-registry-packages"}},"1.0.6":{"name":"@amineyarman/kinesis","version":"1.0.6","description":"Easily create complex interactive animations.","main":"dist/kinesis.umd.js","module":"dist/kinesis.es.js","types":"dist/index.d.ts","keywords":["kinesis","animation","interactive","transformations"],"author":{"name":"Amine Bouyarmane"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/amineyarman/kinesis.git"},"scripts":{"dev":"vite","build":"vite build && tsc","preview":"vite preview","test":"echo \"Error: no test specified\" && exit 1"},"devDependencies":{"@types/node":"^22.5.5","typescript":"^5.5.3","vite":"^5.4.1","path":"^0.12.7"},"gitHead":"4e675f618cdd6a6dd60dee6201cb714a34b6b571","bugs":{"url":"https://github.com/amineyarman/kinesis/issues"},"homepage":"https://github.com/amineyarman/kinesis#readme","_id":"@amineyarman/kinesis@1.0.6","_nodeVersion":"20.16.0","_npmVersion":"9.6.2","dist":{"integrity":"sha512-NEI/JB0ELBM93qEZudw3KJV+I1zu6wpXvfjjQCz/I8di4HQv22ORyv9GEMGde8FbfdAKEg/dIfiRjq9MFy4tvA==","shasum":"2813adf42d7d782792fb498494c964dc914b5caf","tarball":"https://registry.npmjs.org/@amineyarman/kinesis/-/kinesis-1.0.6.tgz","fileCount":19,"unpackedSize":101734,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDYA2Eza7x2SfRZ0f6fQnbgqOTOvQreICjKuHSjzUl8gIgHlt4n74Ukfu6MVNw/s3787Pygg+B8ZvQ7/jKm4tKPWM="}]},"_npmUser":{"name":"aminerman","email":"amine.bouyarmane@gmail.com"},"directories":{},"maintainers":[{"name":"aminerman","email":"amine.bouyarmane@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/kinesis_1.0.6_1733099164759_0.37264265127222695"},"_hasShrinkwrap":false}},"time":{"created":"2024-09-30T16:50:28.332Z","modified":"2024-12-02T00:26:05.211Z","1.0.0":"2024-09-30T16:50:28.643Z","1.0.1":"2024-10-03T14:16:25.305Z","1.0.2":"2024-10-04T15:03:21.822Z","1.0.3":"2024-10-04T15:12:39.707Z","1.0.4":"2024-10-04T16:18:53.365Z","1.0.5":"2024-11-18T10:58:18.474Z","1.0.6":"2024-12-02T00:26:04.998Z"},"bugs":{"url":"https://github.com/amineyarman/kinesis/issues"},"author":{"name":"Amine Bouyarmane"},"license":"MIT","homepage":"https://github.com/amineyarman/kinesis#readme","keywords":["kinesis","animation","interactive","transformations"],"repository":{"type":"git","url":"git+https://github.com/amineyarman/kinesis.git"},"description":"Easily create complex interactive animations.","maintainers":[{"name":"aminerman","email":"amine.bouyarmane@gmail.com"}],"readme":"# Kinesis.js\r\n\r\n`@amineyarman/kinesis` is a versatile library for adding dynamic, interactive, and physics-based animations to your web components. It includes features like transforming elements based on mouse movement, scroll events, and even audio frequency data.\r\n\r\n## Installation\r\n\r\nYou can install `kinesis` via npm:\r\n\r\n```bash\r\nnpm install @amineyarman/kinesis\r\n```\r\n\r\n## Usage\r\n\r\n### Basic Initialization\r\n\r\nTo initialize the library, import the `initializeKinesis` function and call it after your DOM elements are loaded:\r\n\r\n```javascript\r\nimport { initializeKinesis } from \"@amineyarman/kinesis\";\r\n\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  initializeKinesis();\r\n});\r\n```\r\n\r\nThis will automatically find and initialize all elements that use the Kinesis attributes.\r\n\r\n## Components\r\n\r\n### KinesisTransformer\r\n\r\nThe `KinesisTransformer` class applies transformations such as translations, rotations, or scaling to child elements based on mouse movements or scroll events.\r\n\r\n#### Example\r\n\r\n```html\r\n<div data-kinesistransformer data-ks-duration=\"1000\" data-ks-perspective=\"800\">\r\n  <div data-kinesistransformer-element data-ks-strength=\"20\"></div>\r\n</div>\r\n```\r\n\r\n#### Attributes\r\n\r\n| Attribute | Type | Default Value | Description | \r\n| --- | --- | --- | --- | \r\n| data-kinesistransformer | Boolean (presence) | Required | Marks the element as a Kinesis Transformer container. Must be present to enable transformer effects. | \r\n| data-ks-active | Boolean | true | Enables or disables the transformer. Set to false to deactivate without removing the component. | \r\n| data-ks-duration | Number | 1000 | Duration of the transformation transition in milliseconds. | \r\n| data-ks-easing | String | cubic-bezier(0.23, 1, 0.32, 1) | CSS easing function for the transformation transition. | \r\n| data-ks-interaction | Enum (mouse or scroll) | mouse | Defines the interaction mode. Use mouse for mouse movements or scroll for scroll-based interactions. | \r\n| data-ks-perspective | Number | 1000 | Sets the CSS perspective for 3D transformations in pixels. | \r\n| data-ks-preserve3d | Boolean | true | Determines whether the container should preserve 3D transformations across child elements. Set to false to disable. | \r\n| data-ks-scroll-element | String (CSS Selector) | window | (For scroll interaction) Specifies the scroll container element. Use a CSS selector to target a specific scrollable element. Defaults to window. |\r\n\r\n### KinesisTransformerElement\r\n\r\nThe `KinesisTransformerElement` class is a child element within the `KinesisTransformer` container. It applies the specified transformations (e.g., translate, rotate) when the container’s interaction (mouse or scroll) is triggered.\r\n\r\n#### Attributes\r\n\r\n| Attribute                       | Type                                            | Default Value          | Description                                                                                                                                   |\r\n| ------------------------------- | ----------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| data-kinesistransformer-element | Boolean (presence)                              | Required               | Marks the element as a transformer element. Must be present to apply transformations.                                                         |\r\n| data-ks-strength                | Number                                          | 10                     | Determines the intensity of the transformation effect. Higher values result in more pronounced transformations.                               |\r\n| data-ks-transform               | Enum (translate, rotate, scale, tilt, tilt_inv) | translate              | Specifies the type of transformation to apply.                                                                                                |\r\n| data-ks-transformaxis           | String                                          | X, Y (or Z for rotate) | Defines the axes along which the transformation is applied. Use a comma-separated list (e.g., X, Y, Z).                                       |\r\n| data-ks-interactionaxis         | Enum (X, Y) or null                             | null                   | Restricts the interaction to a specific axis. Set to X or Y to limit transformations to that axis. If not set, interactions affect both axes. |\r\n| data-ks-transformorigin         | String                                          | center center          | Sets the CSS transform-origin property, defining the point around which transformations are applied (e.g., top left, 50% 50%).                |\r\n\r\n### KinesisDepth\r\n\r\nThe `KinesisDepth` class applies 3D depth transformations to child elements based on mouse movement, making them move along the Z-axis.\r\n\r\n#### Example\r\n\r\n```html\r\n<div data-kinesisdepth data-ks-perspective=\"1200\" data-ks-sensitivity=\"15\">\r\n  <div data-kinesisdepth-element data-ks-depth=\"5\"></div>\r\n</div>\r\n```\r\n\r\n#### Attributes\r\n\r\n| Attribute           | Type               | Default Value                  | Description                                                                                                        |\r\n| ------------------- | ------------------ | ------------------------------ | ------------------------------------------------------------------------------------------------------------------ |\r\n| data-kinesisdepth   | Boolean (presence) | Required                       | Marks the element as a Kinesis Depth container. Must be present to enable depth effects.                           |\r\n| data-ks-active      | Boolean            | true                           | Enables or disables the depth effects. Set to false to deactivate without removing the component.                  |\r\n| data-ks-duration    | Number             | 1000                           | Duration of the transformation transition in milliseconds.                                                         |\r\n| data-ks-easing      | String             | cubic-bezier(0.23, 1, 0.32, 1) | CSS easing function for the transformation transition.                                                             |\r\n| data-ks-perspective | Number             | 1000                           | Sets the CSS perspective for 3D transformations in pixels.                                                         |\r\n| data-ks-sensitivity | Number             | 40                             | Determines the sensitivity of rotation based on mouse position. Higher values result in more pronounced rotations. |\r\n| data-ks-inverted    | Boolean            | false                          | Inverts the direction of rotation. Set to true to reverse the rotation effects.                                    |\r\n| data-ks-throttle    | Number             | 100                            | Throttling duration in milliseconds for mousemove events to optimize performance. Default is 100ms.                |\r\n\r\n### KinesisDepthElement\r\n\r\nA child element inside the `KinesisDepth` container. It moves along the Z-axis based on the depth.\r\n\r\n#### Attributes\r\n\r\n| Attribute                 | Type               | Default Value | Description                                                                                                     |\r\n| ------------------------- | ------------------ | ------------- | --------------------------------------------------------------------------------------------------------------- |\r\n| data-kinesisdepth-element | Boolean (presence) | Required      | Marks the element as a depth-enabled child. Must be present to apply depth translations.                        |\r\n| data-ks-depth             | Number             | 10            | Determines the depth translation along the Z-axis. Higher values move the element further away from the viewer. |\r\n| data-ks-transformorigin   | String             | center center | Sets the CSS transform-origin property, defining the point around which transformations are applied.            |\r\n\r\n### KinesisAudio\r\n\r\nTransforms elements based on audio data. Elements move or scale according to audio frequency values.\r\n\r\n#### Example\r\n\r\n```html\r\n<div data-kinesisaudio data-ks-audio=\"audiofile.mp3\" data-ks-playaudio=\"true\">\r\n  <div data-kinesisaudio-element data-ks-strength=\"30\"></div>\r\n</div>\r\n```\r\n\r\n#### Attributes\r\n\r\n| Attribute           | Type               | Default Value                  | Description                                                                                         |\r\n| ------------------- | ------------------ | ------------------------------ | --------------------------------------------------------------------------------------------------- |\r\n| data-kinesisaudio   | Boolean (presence) | Required                       | Marks the element as a Kinesis Audio container. Must be present to enable audio-responsive effects. |\r\n| data-ks-active      | Boolean            | true                           | Enables or disables the audio effects. Set to false to deactivate without removing the component.   |\r\n| data-ks-duration    | Number             | 1000                           | Duration of the transformation transition in milliseconds.                                          |\r\n| data-ks-easing      | String             | cubic-bezier(0.23, 1, 0.32, 1) | CSS easing function for the transformation transition.                                              |\r\n| data-ks-perspective | Number             | 1000                           | Sets the CSS perspective for 3D transformations in pixels.                                          |\r\n| data-ks-audio       | String (URL)       | Required                       | Specifies the source URL of the audio file to be analyzed and played.                               |\r\n| data-ks-playaudio   | Boolean            | false                          | Determines whether the audio should play automatically. Set to true to enable auto-play.            |\r\n| data-ks-throttle    | Number             | 100                            | Throttling duration in milliseconds for mousemove events to optimize performance. Default is 100ms. |\r\n\r\n### KinesisAudioElement\r\n\r\nA child element inside the `KinesisAudio` container. It responds to audio frequency data to animate transformations like scaling or translation.\r\n\r\n#### Attributes\r\n\r\n| Attribute                 | Type                            | Default Value          | Description                                                                                                                 |\r\n| ------------------------- | ------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------- |\r\n| data-kinesisaudio-element | Boolean (presence)              | Required               | Marks the element as an audio-responsive child. Must be present to apply audio-based transformations.                       |\r\n| data-ks-audioindex        | Number                          | 50                     | Specifies the frequency bin index to be used for transforming the element. Higher indices correspond to higher frequencies. |\r\n| data-ks-strength          | Number                          | 10                     | Determines the intensity of the transformation effect. Higher values result in more pronounced transformations.             |\r\n| data-ks-transform         | Enum (translate, rotate, scale) | translate              | Specifies the type of transformation to apply based on audio data.                                                          |\r\n| data-ks-transformaxis     | String                          | X, Y (or Z for rotate) | Defines the axes along which the transformation is applied. Use a comma-separated list (e.g., X, Y, Z).                     |\r\n| data-ks-transformorigin   | String                          | center                 | Sets the CSS transform-origin property, defining the point around which transformations are applied (e.g., top left).       |\r\n\r\n### KinesisScrollItem\r\n\r\nTransforms elements based on scroll position. Ideal for parallax effects. This is a standalone component. It doesn't need to be wrapped by one of the containers.\r\n\r\n#### Example\r\n\r\n```html\r\n<div\r\n  data-kinesisscroll-item\r\n  data-ks-transform=\"scale\"\r\n  data-ks-strength=\"15\"\r\n></div>\r\n```\r\n\r\n#### Attributes\r\n\r\n| Attribute               | Type                            | Default Value                  | Description                                                                                                     |\r\n| ----------------------- | ------------------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------- |\r\n| data-kinesisscroll-item | Boolean (presence)              | Required                       | Marks the element as a Kinesis Scroll Item. Must be present to enable scroll-based transformations.             |\r\n| data-ks-active          | Boolean                         | true                           | Enables or disables the scroll effects. Set to false to deactivate without removing the component.              |\r\n| data-ks-duration        | Number                          | 1000                           | Duration of the transformation transition in milliseconds.                                                      |\r\n| data-ks-easing          | String                          | cubic-bezier(0.23, 1, 0.32, 1) | CSS easing function for the transformation transition.                                                          |\r\n| data-ks-transform       | Enum (translate, rotate, scale) | translate                      | Specifies the type of transformation to apply based on scroll progress.                                         |\r\n| data-ks-transformaxis   | String                          | X, Y (or Z for rotate)         | Defines the axes along which the transformation is applied. Use a comma-separated list (e.g., X, Y, Z).         |\r\n| data-ks-strength        | Number                          | 10                             | Determines the intensity of the transformation effect. Higher values result in more pronounced transformations. |\r\n| data-ks-throttle        | Number                          | 100                            | Throttling duration in milliseconds for scroll event handling to optimize performance. Default is 100ms.        |\r\n\r\n### KinesisPath\r\n\r\nMoves elements along an SVG path based on mouse movement or scroll events.\r\n\r\n#### Example\r\n\r\n```html\r\n<div data-kinesispath data-ks-path=\"M10,10 C20,20 40,20 50,10\">\r\n  <div data-kinesispath-element></div>\r\n</div>\r\n```\r\n\r\n#### Attributes\r\n\r\n| Attribute           | Type                   | Default Value                  | Description                                                                                          |\r\n| ------------------- | ---------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------- |\r\n| data-kinesispath    | Boolean (presence)     | Required                       | Marks the element as a Kinesis Path container. Must be present to enable path-based animations.      |\r\n| data-ks-active      | Boolean                | true                           | Enables or disables the path effects. Set to false to deactivate without removing the component.     |\r\n| data-ks-duration    | Number                 | 800                            | Duration of the transformation transition in milliseconds.                                           |\r\n| data-ks-easing      | String                 | cubic-bezier(0.23, 1, 0.32, 1) | CSS easing function for the transformation transition.                                               |\r\n| data-ks-path        | String (SVG Path Data) | Required                       | Specifies the global SVG path data that child elements will follow.                                  |\r\n| data-ks-interaction | Enum (mouse or scroll) | mouse                          | Defines the interaction mode. Use mouse for mouse movements or scroll for scroll-based interactions. |\r\n| data-ks-throttle    | Number                 | 100                            | Throttling duration in milliseconds for event handling to optimize performance. Default is 100ms.    |\r\n\r\n### KinesisPathElement\r\n\r\nA child element inside the `KinesisPath` container. It moves along the specified SVG path.\r\n\r\n#### Attributes\r\n\r\n| Attribute                | Type                            | Default Value                  | Description                                                                                                              |\r\n| ------------------------ | ------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------ |\r\n| data-kinesispath-element | Boolean (presence)              | Required                       | Marks the element as a path-enabled child. Must be present to apply path-based transformations.                          |\r\n| data-ks-strength         | Number                          | 1                              | Determines the strength or speed of the transformation effect. Higher values result in faster or more intense movements. |\r\n| data-ks-offset           | Number                          | 0                              | Sets the initial offset distance along the path in percentage.                                                           |\r\n| data-ks-duration         | Number                          | 1000                           | Duration of the transformation transition in milliseconds.                                                               |\r\n| data-ks-easing           | String                          | cubic-bezier(0.23, 1, 0.32, 1) | CSS easing function for the transformation transition.                                                                   |\r\n| data-ks-transform        | Enum (translate, rotate, scale) | translate                      | Specifies the type of transformation to apply based on path data.                                                        |\r\n| data-ks-transformaxis    | String                          | X, Y (or Z for rotate)         | Defines the axes along which the transformation is applied. Use a comma-separated list (e.g., X, Y, Z).                  |\r\n| data-ks-transformorigin  | String                          | center                         | Sets the CSS transform-origin property, defining the point around which transformations are applied (e.g., top left).    |\r\n\r\n### KinesisDistanceItem\r\n\r\nTransforms elements based on the distance between the mouse pointer and the element. This is a standalone component. It doesn't need to be wrapped in one of the containers.\r\n\r\n#### Example\r\n\r\n```html\r\n<div\r\n  data-kinesisdistance-item\r\n  data-ks-strength=\"15\"\r\n  data-ks-startdistance=\"200\"\r\n></div>\r\n```\r\n\r\n#### Attributes\r\n\r\n| Attribute                 | Type                                 | Default Value                  | Description                                                                                                                                                             |\r\n| ------------------------- | ------------------------------------ | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| data-kinesisdistance-item | Boolean (presence)                   | Required                       | Marks the element as a Kinesis Distance item. Must be present to enable distance-based transformations.                                                                 |\r\n| data-ks-active            | Boolean                              | true                           | Enables or disables the distance effects. Set to false to deactivate without removing the component.                                                                    |\r\n| data-ks-strength          | Number                               | 20                             | Determines the intensity of the transformation effect. Higher values result in more pronounced transformations.                                                         |\r\n| data-ks-transformorigin   | String                               | center                         | Sets the CSS transform-origin property, defining the point around which transformations are applied (e.g., top left).                                                   |\r\n| data-ks-startdistance     | Number                               | 100                            | Defines the distance threshold (in pixels) at which transformations begin to take effect.                                                                               |\r\n| data-ks-interaction       | Enum (linear, attraction, repulsion) | linear                         | Specifies the interaction type. linear applies transformations based purely on distance, attraction pulls the element towards the cursor, and repulsion pushes it away. |\r\n| data-ks-transform         | Enum (translate, rotate, scale)      | translate                      | Specifies the type of transformation to apply based on cursor distance.                                                                                                 |\r\n| data-ks-easing            | String                               | cubic-bezier(0.23, 1, 0.32, 1) | CSS easing function for the transformation transition.                                                                                                                  |\r\n| data-ks-duration          | Number                               | 1000                           | Duration of the transformation transition in milliseconds.                                                                                                              |\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License.\r\n","readmeFilename":"README.md"}