{"_id":"@dragonspark/hikari-preact","_rev":"2-167c746b1967e41cd2e4bcc1534a65cc","name":"@dragonspark/hikari-preact","dist-tags":{"latest":"2.1.0"},"versions":{"2.0.0":{"name":"@dragonspark/hikari-preact","version":"2.0.0","keywords":["dragonspark","hikari","webgl","rendering","gradients","animation","preact","components"],"license":"MIT","_id":"@dragonspark/hikari-preact@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":"f2a4fb0b29231e9e343e9375605eb5da0ed5ef60","tarball":"https://registry.npmjs.org/@dragonspark/hikari-preact/-/hikari-preact-2.0.0.tgz","fileCount":16,"integrity":"sha512-/xUovhlq3o291Jv5URGkL/pI2a1DWVzE5dKtelYf0N3hi0DNcN2lvcSSRP648qqKZQ+/kMbxy15rxH4e8etJcw==","signatures":[{"sig":"MEYCIQCWv2wokSASH2bBLFXKXJVHbhekIVJbdKO++uMZz9spXwIhAJpW36tzBb0YQdQPK+ku669qz0JsVIiatEVHfrmMy1Sg","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27702},"main":"dist/index.esm.js","type":"module","_from":"file:dragonspark-hikari-preact-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/7f70de05df6733f671b92c75eb5951ec/dragonspark-hikari-preact-2.0.0.tgz","_integrity":"sha512-/xUovhlq3o291Jv5URGkL/pI2a1DWVzE5dKtelYf0N3hi0DNcN2lvcSSRP648qqKZQ+/kMbxy15rxH4e8etJcw==","repository":{"url":"git+https://github.com/dragonspark-tech/hikari.git","type":"git","directory":"packages/hikari-preact"},"_npmVersion":"10.9.2","description":"Preact components and hooks for the @dragonspark/hikari WebGL framework.","directories":{},"_nodeVersion":"22.15.0","_hasShrinkwrap":false,"peerDependencies":{"preact":"^10.0.0","@dragonspark/hikari":"2.0.0","@dragonspark/hikari-effects":"2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hikari-preact_2.0.0_1746229529054_0.7724061354362934","host":"s3://npm-registry-packages-npm-production"}},"2.1.0":{"name":"@dragonspark/hikari-preact","description":"Preact components and hooks for 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-preact"},"bugs":{"url":"https://github.com/dragonspark-tech/hikari/issues"},"keywords":["dragonspark","hikari","webgl","rendering","gradients","animation","preact","components"],"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"},"peerDependencies":{"preact":"^10.0.0","@dragonspark/hikari":"2.1.0","@dragonspark/hikari-effects":"2.1.0"},"_id":"@dragonspark/hikari-preact@2.1.0","homepage":"https://github.com/dragonspark-tech/hikari#readme","_integrity":"sha512-GPhFp53PLSsDOno0v9HBBnuEdJ5NlaRuyx47rdfmYYnD+dmR0/aIfT6fI3GFOjj0Qknq1Tkr0dkOQ7fhp93NKg==","_resolved":"/private/var/folders/_5/33k8dk8x58b4k396zh_wztnc0000gn/T/7639edcc00a0d517985c0e783970922b/dragonspark-hikari-preact-2.1.0.tgz","_from":"file:dragonspark-hikari-preact-2.1.0.tgz","_nodeVersion":"22.15.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-GPhFp53PLSsDOno0v9HBBnuEdJ5NlaRuyx47rdfmYYnD+dmR0/aIfT6fI3GFOjj0Qknq1Tkr0dkOQ7fhp93NKg==","shasum":"50260471700a2be6cc664a01ca0099728c9ea2a3","tarball":"https://registry.npmjs.org/@dragonspark/hikari-preact/-/hikari-preact-2.1.0.tgz","fileCount":22,"unpackedSize":47185,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIF313zg4/FeBy7oYbrCgk2xcL7Hye8gpZHNGthXKKH7vAiBc0Mmnr+N3NGCFO5zqAX6Vk9VDJCg8anU6e2LA5GvWiA=="}]},"_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-preact_2.1.0_1746759600324_0.30427795673057423"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-02T23:45:28.984Z","modified":"2025-05-09T03:00:00.706Z","2.0.0":"2025-05-02T23:45:29.251Z","2.1.0":"2025-05-09T03:00:00.545Z"},"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","preact","components"],"repository":{"type":"git","url":"git+https://github.com/dragonspark-tech/hikari.git","directory":"packages/hikari-preact"},"description":"Preact components and hooks for the @dragonspark/hikari WebGL framework.","maintainers":[{"name":"azaeldragon","email":"azael@hey.com"}],"readme":"# @dragonspark/hikari-preact\n\n> Preact components and hooks for the [@dragonspark/hikari](https://www.npmjs.com/package/@dragonspark/hikari) WebGL framework.\n\n[![npm version](https://img.shields.io/npm/v/@dragonspark/hikari-preact.svg?style=for-the-badge)](https://www.npmjs.com/package/@dragonspark/hikari-preact)\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- Preact components for hikari effects, free of the compat layer\n- Custom hooks for easy integration\n- TypeScript support\n- Responsive and performant animations\n\n## ⚙️ Installation\n\n```bash\nnpm install @dragonspark/hikari-preact @dragonspark/hikari-effects @dragonspark/hikari\n# or\nyarn add @dragonspark/hikari-preact @dragonspark/hikari-effects @dragonspark/hikari\n```\n\nNote: `@dragonspark/hikari` and `@dragonspark/hikari-effects` are peer dependencies and must be installed alongside this package.\n\n## ✨ Available Components\n\n### MorphGradientCanvas\n\nA Preact component wrapper for the MorphGradient effect from hikari-effects.\n\n#### Basic Usage\n\n```jsx\nimport { MorphGradientCanvas } from '@dragonspark/hikari-preact';\n\nfunction App() {\n  return (\n    <div className=\"app\">\n      <MorphGradientCanvas \n        class=\"gradient-background\"\n        baseColor=\"#ff0000\"\n        waveColors={['#00ff00', '#0000ff', '#ffff00']}\n      />\n      <div className=\"content\">\n        <h1>Hello, World!</h1>\n      </div>\n    </div>\n  );\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```jsx\n// The gradient will automatically use the CSS variables\n<MorphGradientCanvas class=\"gradient-background\" />\n```\n\nYou can also pass CSS variables directly:\n\n```jsx\n<MorphGradientCanvas \n  class=\"gradient-background\"\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#### Props\n\n- `class`: string (optional) - CSS class name for the canvas element\n- `style`: CSSProperties (optional) - Inline styles for the canvas element\n- `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- `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- `amplitude`: number (optional) - Wave amplitude\n- `seed`: number (optional) - Random seed\n- `freqX`: number (optional) - X-axis frequency\n- `freqY`: number (optional) - Y-axis frequency\n- `freqDelta`: number (optional) - Frequency change rate\n- `darkenTop`: boolean (optional) - Darken the top of the gradient\n- `onInit`: (gradient: MorphGradient) => void (optional) - Callback when gradient is initialized\n\n## 🪝 Custom Hooks\n\n### useMorphGradient\n\nA custom hook for using the MorphGradient effect in Preact components.\n\n```jsx\nimport { useRef, useEffect } from 'preact/hooks';\nimport { useMorphGradient } from '@dragonspark/hikari-preact';\n\nfunction GradientComponent() {\n  // 1) Generate a stable canvas ID once\n  const idRef = useRef(`gradient-canvas-${Math.random().toString(36).slice(2, 9)}`);\n\n  // 2) Initialize the gradient on that ID\n  const { gradient, isInitialized, pause } = useMorphGradient({\n    canvasId: idRef.current,\n    baseColor: '#3498db',\n    waveColors: ['#9b59b6', '#e74c3c', '#f1c40f'],\n    amplitude: 320\n    // autoPlay defaults to true\n  });\n\n  // 3) Pause after 5s once it’s running\n  useEffect(() => {\n    if (!isInitialized) return;\n    const timer = setTimeout(() => pause(), 5000);\n    return () => clearTimeout(timer);\n  }, [isInitialized, pause]);\n\n  return (\n    <div class=\"gradient-container\">\n      <canvas\n        id={idRef.current}\n        class=\"gradient-canvas\"\n        style={{ width: '100%', height: '100%' }}\n      />\n    </div>\n  );\n}\n```\n\n## 📝 License\n\nMIT © DragonSpark\n","readmeFilename":"README.md"}