{"_id":"@dragonspark/hikari-effects","_rev":"4-eacc7422808185b5e85d222817febd37","name":"@dragonspark/hikari-effects","dist-tags":{"latest":"2.1.0"},"versions":{"1.0.0":{"name":"@dragonspark/hikari-effects","version":"1.0.0","keywords":["dragonspark","hikari","webgl","rendering","gradients","animation"],"license":"MIT","_id":"@dragonspark/hikari-effects@1.0.0","maintainers":[{"name":"azaeldragon","email":"azael@hey.com"}],"homepage":"https://github.com/dragonspark-tech/hikari#readme","bugs":{"url":"https://github.com/dragonspark-tech/hikari/issues"},"dist":{"shasum":"bcbb6c036e4f07ff101d420f1807c4356623b0fa","tarball":"https://registry.npmjs.org/@dragonspark/hikari-effects/-/hikari-effects-1.0.0.tgz","fileCount":21,"integrity":"sha512-q3i7wnKvmEjSwzjc45qCUvWNFUuzZ0lBSgegzbU2SP6NEdZ+TTQI/h/9NQ2qxPtLhayuECFI/HpXe+iGFMOR1A==","signatures":[{"sig":"MEUCIQCE1eHIFmLCcnCA9N2CxvKuHQV9q52/hLktFIigKsUIrgIgaHKRekztL8eEL+3KcIdm9+Fg/Uzsh1paQElTS1gp91Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":75228},"main":"./dist/index.esm.js","type":"module","_from":"file:dragonspark-hikari-effects-1.0.0.tgz","types":"./dist/index.esm.d.ts","module":"./dist/index.esm.js","exports":{".":{"types":"./dist/index.esm.d.ts","import":"./dist/index.esm.js","default":"./dist/index.esm.js","development":"./src/index.ts"},"./package.json":"./package.json"},"_npmUser":{"name":"azaeldragon","email":"azael@hey.com"},"_resolved":"/private/var/folders/_5/33k8dk8x58b4k396zh_wztnc0000gn/T/450cacdb5d5e311595a340626ca19fe3/dragonspark-hikari-effects-1.0.0.tgz","_integrity":"sha512-q3i7wnKvmEjSwzjc45qCUvWNFUuzZ0lBSgegzbU2SP6NEdZ+TTQI/h/9NQ2qxPtLhayuECFI/HpXe+iGFMOR1A==","repository":{"url":"git+https://github.com/dragonspark-tech/hikari.git","type":"git","directory":"packages/hikari-effects"},"_npmVersion":"10.9.2","description":"Ready-to-use visual effects built on top of the @dragonspark/hikari WebGL framework.","directories":{},"_nodeVersion":"22.15.0","dependencies":{},"_hasShrinkwrap":false,"peerDependencies":{"@dragonspark/hikari":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hikari-effects_1.0.0_1746061082584_0.9251322891460094","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@dragonspark/hikari-effects","version":"1.0.1","keywords":["dragonspark","hikari","webgl","rendering","gradients","animation"],"license":"MIT","_id":"@dragonspark/hikari-effects@1.0.1","maintainers":[{"name":"azaeldragon","email":"azael@hey.com"}],"homepage":"https://github.com/dragonspark-tech/hikari#readme","bugs":{"url":"https://github.com/dragonspark-tech/hikari/issues"},"dist":{"shasum":"038d00bf7a25f5dd2fcec9f32ff217ebf44fed06","tarball":"https://registry.npmjs.org/@dragonspark/hikari-effects/-/hikari-effects-1.0.1.tgz","fileCount":21,"integrity":"sha512-7m2CuC1QvsOnupgNQZPqeiwL6UdGRGq5B2DGLxceyu+Z6pQLyELGUQY9AkO81EMw3aYuVWot4NvvJJ6kZ6gTFg==","signatures":[{"sig":"MEUCIBynEccWbgK8WEnRoWKznL4YuPbs0nsbl+cQ46fQSYV1AiEA2cikpVNb2gSaFSx9lJsNRhcM5Ay244oDjiDcvUHeFpM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":75234},"main":"dist/index.esm.js","type":"module","_from":"file:dragonspark-hikari-effects-1.0.1.tgz","types":"dist/index.esm.d.ts","module":"dist/index.esm.js","exports":{".":[{"import":"./dist/index.esm.js","default":"./dist/index.esm.js","require":"./dist/index.esm.js"},"./dist/index.esm.js"],"./package.json":"./package.json"},"_npmUser":{"name":"azaeldragon","email":"azael@hey.com"},"_resolved":"/private/var/folders/_5/33k8dk8x58b4k396zh_wztnc0000gn/T/227a0b4e01869a7fb898c27d512ec6df/dragonspark-hikari-effects-1.0.1.tgz","_integrity":"sha512-7m2CuC1QvsOnupgNQZPqeiwL6UdGRGq5B2DGLxceyu+Z6pQLyELGUQY9AkO81EMw3aYuVWot4NvvJJ6kZ6gTFg==","repository":{"url":"git+https://github.com/dragonspark-tech/hikari.git","type":"git","directory":"packages/hikari-effects"},"_npmVersion":"10.9.2","description":"Ready-to-use visual effects built on top of the @dragonspark/hikari WebGL framework.","directories":{},"_nodeVersion":"22.15.0","dependencies":{},"_hasShrinkwrap":false,"peerDependencies":{"@dragonspark/hikari":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hikari-effects_1.0.1_1746062796355_0.3836270683040204","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@dragonspark/hikari-effects","version":"2.0.0","keywords":["dragonspark","hikari","webgl","rendering","gradients","animation"],"license":"MIT","_id":"@dragonspark/hikari-effects@2.0.0","maintainers":[{"name":"azaeldragon","email":"azael@hey.com"}],"homepage":"https://github.com/dragonspark-tech/hikari#readme","bugs":{"url":"https://github.com/dragonspark-tech/hikari/issues"},"dist":{"shasum":"293dbd52020c1c08c412bd7f5a9b7a47195b993d","tarball":"https://registry.npmjs.org/@dragonspark/hikari-effects/-/hikari-effects-2.0.0.tgz","fileCount":21,"integrity":"sha512-mWJu7wWB5xzwPzJ4RgwPlXvVa+fBCdDETA47vUkB4AaH/vTQNA52lmyW19LFP4tNcz0xvfhC7juSezdOynoGnw==","signatures":[{"sig":"MEYCIQDUd7mltBbWU8t+JVpg+750bqCrJHU08tnjms0eLlagoQIhAI8aGC3KhLnHU6QLypWAU+tQ8Bh6iZKswVsC7dXF/XMS","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":77955},"main":"dist/index.esm.js","type":"module","_from":"file:dragonspark-hikari-effects-2.0.0.tgz","types":"dist/index.esm.d.ts","module":"dist/index.esm.js","exports":{".":[{"import":"./dist/index.esm.js","default":"./dist/index.esm.js","require":"./dist/index.esm.js"},"./dist/index.esm.js"],"./package.json":"./package.json"},"_npmUser":{"name":"azaeldragon","email":"azael@hey.com"},"_resolved":"/private/var/folders/_5/33k8dk8x58b4k396zh_wztnc0000gn/T/b430b302ced0d0c06661990e43f62a5c/dragonspark-hikari-effects-2.0.0.tgz","_integrity":"sha512-mWJu7wWB5xzwPzJ4RgwPlXvVa+fBCdDETA47vUkB4AaH/vTQNA52lmyW19LFP4tNcz0xvfhC7juSezdOynoGnw==","repository":{"url":"git+https://github.com/dragonspark-tech/hikari.git","type":"git","directory":"packages/hikari-effects"},"_npmVersion":"10.9.2","description":"Ready-to-use visual effects built on top of the @dragonspark/hikari WebGL framework.","directories":{},"_nodeVersion":"22.15.0","dependencies":{},"_hasShrinkwrap":false,"peerDependencies":{"@dragonspark/hikari":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hikari-effects_2.0.0_1746229494292_0.19436469943011225","host":"s3://npm-registry-packages-npm-production"}},"2.1.0":{"name":"@dragonspark/hikari-effects","description":"Ready-to-use visual effects built on top of the @dragonspark/hikari WebGL framework.","version":"2.1.0","license":"MIT","repository":{"type":"git","url":"git+https://github.com/dragonspark-tech/hikari.git","directory":"packages/hikari-effects"},"bugs":{"url":"https://github.com/dragonspark-tech/hikari/issues"},"keywords":["dragonspark","hikari","webgl","rendering","gradients","animation"],"type":"module","main":"dist/index.esm.js","module":"dist/index.esm.js","types":"dist/index.esm.d.ts","exports":{".":[{"import":"./dist/index.esm.js","require":"./dist/index.esm.js","default":"./dist/index.esm.js"},"./dist/index.esm.js"],"./package.json":"./package.json"},"dependencies":{},"peerDependencies":{"@dragonspark/hikari":"^1.0.0"},"_id":"@dragonspark/hikari-effects@2.1.0","homepage":"https://github.com/dragonspark-tech/hikari#readme","_integrity":"sha512-JuIABX0Aw+jrgLlLbaE681hkgDWUiU4zRkV2bWxvHyQ4RC883FggG+eQijhHnw3kSSlGTjm7epMrdLiJiN8w2w==","_resolved":"/private/var/folders/_5/33k8dk8x58b4k396zh_wztnc0000gn/T/eb5eac5fcf05624d02a6e326698789bb/dragonspark-hikari-effects-2.1.0.tgz","_from":"file:dragonspark-hikari-effects-2.1.0.tgz","_nodeVersion":"22.15.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-JuIABX0Aw+jrgLlLbaE681hkgDWUiU4zRkV2bWxvHyQ4RC883FggG+eQijhHnw3kSSlGTjm7epMrdLiJiN8w2w==","shasum":"3123df2a1e64f7d91343ae6e2ff855064e99d19e","tarball":"https://registry.npmjs.org/@dragonspark/hikari-effects/-/hikari-effects-2.1.0.tgz","fileCount":29,"unpackedSize":113371,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDFbdb5LJWd1hmwCmw9g8QBiWqQD65r3A+PN5GZ/vqFzAIhAP9dOJWauVGjCTECY3YDVuAPT1liR0emkWmjOqL9W+W4"}]},"_npmUser":{"name":"azaeldragon","email":"azael@hey.com"},"directories":{},"maintainers":[{"name":"azaeldragon","email":"azael@hey.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/hikari-effects_2.1.0_1746759576698_0.9920318759167475"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-01T00:58:02.466Z","modified":"2025-05-09T02:59:37.076Z","1.0.0":"2025-05-01T00:58:02.760Z","1.0.1":"2025-05-01T01:26:36.560Z","2.0.0":"2025-05-02T23:44:54.476Z","2.1.0":"2025-05-09T02:59:36.892Z"},"bugs":{"url":"https://github.com/dragonspark-tech/hikari/issues"},"license":"MIT","homepage":"https://github.com/dragonspark-tech/hikari#readme","keywords":["dragonspark","hikari","webgl","rendering","gradients","animation"],"repository":{"type":"git","url":"git+https://github.com/dragonspark-tech/hikari.git","directory":"packages/hikari-effects"},"description":"Ready-to-use visual effects built on top of the @dragonspark/hikari WebGL framework.","maintainers":[{"name":"azaeldragon","email":"azael@hey.com"}],"readme":"# @dragonspark/hikari-effects\n\n> Ready-to-use visual effects built on top of the [@dragonspark/hikari](https://www.npmjs.com/package/@dragonspark/hikari) WebGL framework.\n\n[![npm version](https://img.shields.io/npm/v/@dragonspark/hikari-effects.svg?style=for-the-badge)](https://www.npmjs.com/package/@dragonspark/hikari-effects)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)\n\n## 🧩 Features\n\n- Pre-built, customizable WebGL effects\n- Seamless integration with hikari\n- Responsive and performant animations\n- Easy-to-use API\n\n## ⚙️ Installation\n\n```bash\nnpm install @dragonspark/hikari-effects @dragonspark/hikari\n# or\nyarn add @dragonspark/hikari-effects @dragonspark/hikari\n```\n\nNote: `@dragonspark/hikari` is a peer dependency and must be installed alongside this package.\n\n## ✨ Available Effects\n\n### MorphGradient\n\nA beautiful, animated gradient background effect with morphing colors and shapes.\n\n#### Basic Usage\n\n```javascript\nimport { MorphGradient } from '@dragonspark/hikari-effects';\n\n// Initialize the gradient on a canvas element\nconst gradient = new MorphGradient({\n  selector: '#canvas',\n  baseColor: '#ff0000',\n  waveColors: ['#00ff00', '#0000ff', '#ffff00']\n});\n```\n\n#### Using CSS Variables\n\nYou can define gradient colors using CSS variables:\n\n```css\n:root {\n  --gradient-color-1: #ff0000;\n  --gradient-color-2: #00ff00;\n  --gradient-color-3: #0000ff;\n  --gradient-color-4: #ffff00;\n}\n```\n\n```javascript\nconst gradient = new MorphGradient({\n  selector: '#canvas'\n});\n```\n\nYou can also pass CSS variables directly:\n\n```javascript\nconst gradient = new MorphGradient({\n  selector: '#canvas',\n  baseColor: 'var(--gradient-color-1)',\n  waveColors: [\n    'var(--gradient-color-2)',\n    'var(--gradient-color-3)',\n    'var(--gradient-color-4)'\n  ]\n});\n```\n\nIf CSS variables are not available or parsing fails, the component will fall back to these default values:\n\n```javascript\n// Default base color\nconst defaultBaseColor = '#a960ee'; // Purple\n\n// Default wave colors\nconst defaultWaveColors = [\n  '#ff333d', // Red\n  '#90e0ff', // Light blue\n  '#ffcb57'  // Yellow\n];\n```\n\n#### Customizing the Gradient\n\n```javascript\nconst gradient = new MorphGradient({\n  selector: '#canvas',\n  amplitude: 320,       // Wave amplitude\n  seed: 5,              // Random seed\n  freqX: 14e-5,         // X-axis frequency\n  freqY: 29e-5,         // Y-axis frequency\n  freqDelta: 1e-5,      // Frequency change rate\n  darkenTop: true       // Darken the top of the gradient\n});\n```\n\n#### Controlling Animation\n\n```javascript\n// Pause animation\ngradient.pause();\n\n// Resume animation\ngradient.play();\n\n// Update frequency\ngradient.updateFrequency(0.001);\n\n// Toggle specific color\ngradient.toggleColor(0); // Toggle first color\n\n// Change zoom\ngradient.setZoom(1);\n\n// Change rotation\ngradient.setRotation(45);\n\n// Change density\ngradient.setDensity([0.1, 0.2])\n```\n\n## 📖 API Reference\n\n### MorphGradient\n\n#### Constructor Options\n\n```javascript\nnew MorphGradient(options)\n```\n\n- `options.selector`: string - CSS selector for the canvas element\n- `options.baseColor`: string (optional) - Base color for the gradient. Can be:\n  - Hex color code (e.g., '#ff0000')\n  - CSS variable name (e.g., '--gradient-color-1')\n  - CSS variable reference (e.g., 'var(--gradient-color-1)')\n  - If not provided, falls back to CSS variables or default base color ('#a960ee')\n- `options.waveColors`: string[] (optional) - Array of wave colors for the gradient. Can be:\n  - Hex color codes (e.g., '#ff0000')\n  - CSS variable names (e.g., '--gradient-color-1')\n  - CSS variable references (e.g., 'var(--gradient-color-1)')\n  - At least one color is required\n  - If not provided, falls back to CSS variables or default wave colors\n- `options.amplitude`: number (optional) - Wave amplitude\n- `options.seed`: number (optional) - Random seed\n- `options.freqX`: number (optional) - X-axis frequency\n- `options.freqY`: number (optional) - Y-axis frequency\n- `options.freqDelta`: number (optional) - Frequency change rate\n- `options.darkenTop`: boolean (optional) - Darken the top of the gradient\n\n#### Methods\n\n- `play()`: Start/resume the animation\n- `pause()`: Pause the animation\n- `updateFrequency(delta)`: Update the frequency by the specified delta\n- `toggleColor(index)`: Toggle the visibility of a color by index\n- `resize()`: Resize the gradient to fit the container\n- `setZoom(zoom)`: Set the zoom level of the gradient\n- `setRotation(rotation)`: Set the rotation angle in degrees\n- `setDensity(density)`: Set the density of the mesh as [x, y] values\n\n## 💡 Examples\n\n### Responsive Gradient Background\n\n```javascript\nimport { MorphGradient } from '@dragonspark/hikari-effects';\n\n// Create canvas element\nconst canvas = document.createElement('canvas');\ncanvas.id = 'gradient-bg';\ndocument.body.appendChild(canvas);\n\n// Initialize gradient\nconst gradient = new MorphGradient({\n  selector: '#gradient-bg',\n  baseColor: '#3498db',\n  waveColors: ['#9b59b6', '#e74c3c', '#f1c40f']\n});\n\n// Handle window resize\nwindow.addEventListener('resize', () => {\n  gradient.resize();\n});\n```\n\n### Interactive Gradient\n\n```javascript\nimport { MorphGradient } from '@dragonspark/hikari-effects';\n\nconst gradient = new MorphGradient({\n  selector: '#interactive-gradient'\n});\n\n// Toggle colors on click\ndocument.querySelectorAll('.color-toggle').forEach((button, index) => {\n  button.addEventListener('click', () => {\n    gradient.toggleColor(index);\n  });\n});\n\n// Pause/play on button click\ndocument.querySelector('#play-pause').addEventListener('click', () => {\n  if (gradient.conf.playing) {\n    gradient.pause();\n  } else {\n    gradient.play();\n  }\n});\n```\n\n## 📝 License\n\nMIT © DragonSpark\n","readmeFilename":"README.md"}