{"_id":"@blur-ui/mesh-gradient","_rev":"3-443deea180d11d7eb2abd3ce9cbaf34e","name":"@blur-ui/mesh-gradient","dist-tags":{"latest":"1.0.13"},"versions":{"1.0.10":{"name":"@blur-ui/mesh-gradient","version":"1.0.10","keywords":["mesh-gradient","react","ui","component"],"author":{"name":"Mikhail Mogilnikov"},"license":"MIT","_id":"@blur-ui/mesh-gradient@1.0.10","maintainers":[{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"}],"homepage":"https://github.com/mikhailmogilnikov/blur/tree/master/packages/standalone/mesh-gradient","bugs":{"url":"https://github.com/mikhailmogilnikov/blur/issues"},"dist":{"shasum":"94cd3885ee56082198905e67b6876da02f6b610d","tarball":"https://registry.npmjs.org/@blur-ui/mesh-gradient/-/mesh-gradient-1.0.10.tgz","fileCount":6,"integrity":"sha512-SVxD1qDFn0a/QJ5V4+ge3nvkEEtiQYSl6S/OJqQgBLHWbFoJ5AYWRihfH4LmouaofpVrjERl8vEa1M+Pq7zMqA==","signatures":[{"sig":"MEUCIQDQAsgV7Kb/cazeiZ9RMFFe+OGBVHDOT5MLztpqc6g8VQIgeUKKWzrSZtL7I8qto1OmJ5ppTV6vgnTJnVigOdSsiEk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75323},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"gitHead":"eabf050c956df75f15387a726acc2afd6312eb89","private":false,"scripts":{"lint":"eslint .","build":"tsup src/index.ts --format cjs,esm --dts","lint:fix":"eslint . --fix"},"_npmUser":{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"},"repository":{"url":"git+https://github.com/mikhailmogilnikov/blur.git","type":"git","directory":"packages/standalone/mesh-gradient"},"_npmVersion":"10.8.2","description":"The Mesh Gradient component for React","directories":{},"sideEffects":false,"_nodeVersion":"20.17.0","dependencies":{"@blur-ui/react-utils":"*","react-intersection-observer":"^9.15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","react":"^19.0.0","eslint":"^9","react-dom":"^19.0.0","@blur-ui/tsup-config":"workspace:*","@blur-ui/eslint-config":"workspace:*","@blur-ui/typescript-config":"workspace:*"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mesh-gradient_1.0.10_1737157659360_0.7822806176959154","host":"s3://npm-registry-packages-npm-production"}},"1.0.11":{"name":"@blur-ui/mesh-gradient","version":"1.0.11","keywords":["mesh-gradient","react","ui","component"],"author":{"name":"Mikhail Mogilnikov"},"license":"MIT","_id":"@blur-ui/mesh-gradient@1.0.11","maintainers":[{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"}],"homepage":"https://github.com/mikhailmogilnikov/blur/tree/master/packages/standalone/mesh-gradient","bugs":{"url":"https://github.com/mikhailmogilnikov/blur/issues"},"dist":{"shasum":"9a23caa8553e336ffef345efd4889c8cfe9ce05a","tarball":"https://registry.npmjs.org/@blur-ui/mesh-gradient/-/mesh-gradient-1.0.11.tgz","fileCount":6,"integrity":"sha512-7nuxcAbePOsvfLhWk5zc08+MkyZpupYF4urw2hOwPS1Ojp5UFBSCCIZo0CyPG3NIUIjuudRFJckNyMsw5BgHUg==","signatures":[{"sig":"MEUCIHsP3Nhwadid/UGoAHGQIXOCapq+g8uRFEl7mUBpmDmXAiEAwXD481IyrfnK+MA8+9vnNFXeAJly/ovz9AMYkx05K2s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75323},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"gitHead":"1f37b05794ec928fc6be1ab01aedae7ef73d53a8","private":false,"scripts":{"lint":"eslint .","build":"tsup src/index.ts --format cjs,esm --dts","lint:fix":"eslint . --fix"},"_npmUser":{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"},"repository":{"url":"git+https://github.com/mikhailmogilnikov/blur.git","type":"git","directory":"packages/standalone/mesh-gradient"},"_npmVersion":"10.8.2","description":"The Mesh Gradient component for React","directories":{},"sideEffects":false,"_nodeVersion":"20.17.0","dependencies":{"@blur-ui/react-utils":"*","react-intersection-observer":"^9.15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","react":"^19.0.0","eslint":"^9","react-dom":"^19.0.0","@blur-ui/tsup-config":"workspace:*","@blur-ui/eslint-config":"workspace:*","@blur-ui/typescript-config":"workspace:*"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mesh-gradient_1.0.11_1737295490721_0.3623093083952944","host":"s3://npm-registry-packages-npm-production"}},"1.0.12":{"name":"@blur-ui/mesh-gradient","version":"1.0.12","keywords":["mesh-gradient","react","ui","component"],"author":{"name":"Mikhail Mogilnikov"},"license":"MIT","_id":"@blur-ui/mesh-gradient@1.0.12","maintainers":[{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"}],"homepage":"https://github.com/mikhailmogilnikov/blur/tree/master/packages/standalone/mesh-gradient","bugs":{"url":"https://github.com/mikhailmogilnikov/blur/issues"},"dist":{"shasum":"11bf15479784f54d64a43279e29cd3d3d6dbc896","tarball":"https://registry.npmjs.org/@blur-ui/mesh-gradient/-/mesh-gradient-1.0.12.tgz","fileCount":6,"integrity":"sha512-bXiuk7JGngEjbixHeDZvy4l5wvzvTdaCoAsR62cTY8VyNn2weDo2IsxrxyJNdMMN2xB48IMURh0S/wRFXddVGA==","signatures":[{"sig":"MEUCIHQLa85MZVarClZtKlCjYkLSckNx7ZqESyMIN3b1nXdTAiEApwJLTOVwz12PlAdhqkiwGSeNA+6cnpZHfJCsYRpA/d4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":75427},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"gitHead":"b94b222903bde9dd5207903e402c64292924ff87","private":false,"scripts":{"lint":"eslint .","build":"tsup src/index.ts --format cjs,esm --dts","lint:fix":"eslint . --fix"},"_npmUser":{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"},"repository":{"url":"git+https://github.com/mikhailmogilnikov/blur.git","type":"git","directory":"packages/standalone/mesh-gradient"},"_npmVersion":"10.8.2","description":"The Mesh Gradient component for React","directories":{},"sideEffects":false,"_nodeVersion":"20.17.0","dependencies":{"@blur-ui/react-utils":"*","react-intersection-observer":"^9.15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","react":"^19.0.0","eslint":"^9","react-dom":"^19.0.0","@blur-ui/tsup-config":"workspace:*","@blur-ui/eslint-config":"workspace:*","@blur-ui/typescript-config":"workspace:*"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mesh-gradient_1.0.12_1737494017646_0.938081584960212","host":"s3://npm-registry-packages-npm-production"}},"1.0.13":{"name":"@blur-ui/mesh-gradient","description":"The Mesh Gradient component for React","keywords":["mesh-gradient","react","ui","component"],"author":{"name":"Mikhail Mogilnikov"},"version":"1.0.13","license":"MIT","private":false,"publishConfig":{"access":"public"},"exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/mikhailmogilnikov/blur.git","directory":"packages/standalone/mesh-gradient"},"homepage":"https://github.com/mikhailmogilnikov/blur/tree/master/packages/standalone/mesh-gradient","bugs":{"url":"https://github.com/mikhailmogilnikov/blur/issues"},"scripts":{"lint":"eslint .","lint:fix":"eslint . --fix","build":"tsup src/index.ts --format cjs,esm --dts"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"dependencies":{"@blur-ui/react-utils":"*","react-intersection-observer":"^9.15.0"},"devDependencies":{"@blur-ui/typescript-config":"workspace:*","@blur-ui/eslint-config":"workspace:*","@blur-ui/tsup-config":"workspace:*","eslint":"^9","tsup":"^8.3.5","react":"^19.0.0","react-dom":"^19.0.0"},"_id":"@blur-ui/mesh-gradient@1.0.13","gitHead":"d31da65a86a6193ebd9840afd73d2b8ec55fcc3b","_nodeVersion":"20.17.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-wl8njm/dHiTmEM0YZnjms+9l6gpPnt4TGB2a9CVFUqJuzGOVFysWlypMOHMsljh9D13IWy5AtaV8CoMLxfLUCw==","shasum":"ec7b9de35bdbed8d6e7f93eb116520093001371c","tarball":"https://registry.npmjs.org/@blur-ui/mesh-gradient/-/mesh-gradient-1.0.13.tgz","fileCount":6,"unpackedSize":75751,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCSO+35Y8o+3bcnsPTtwNqxT5kux9D7r1GfemNor2v0EwIhANpHHSHpVOfscgpGZSRawXhnWBHTpJc+a0VXybGy0JYV"}]},"_npmUser":{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"},"directories":{},"maintainers":[{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mesh-gradient_1.0.13_1739132863153_0.9368105935533"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-17T23:47:39.299Z","modified":"2025-02-09T20:27:43.560Z","1.0.10":"2025-01-17T23:47:39.553Z","1.0.11":"2025-01-19T14:04:50.910Z","1.0.12":"2025-01-21T21:13:37.858Z","1.0.13":"2025-02-09T20:27:43.342Z"},"bugs":{"url":"https://github.com/mikhailmogilnikov/blur/issues"},"author":{"name":"Mikhail Mogilnikov"},"license":"MIT","homepage":"https://github.com/mikhailmogilnikov/blur/tree/master/packages/standalone/mesh-gradient","keywords":["mesh-gradient","react","ui","component"],"repository":{"type":"git","url":"git+https://github.com/mikhailmogilnikov/blur.git","directory":"packages/standalone/mesh-gradient"},"description":"The Mesh Gradient component for React","maintainers":[{"name":"mikhailmogilnikov","email":"mikhail.mogilnikov02@gmail.com"}],"readme":"# Mesh Gradient\n\nThe `MeshGradient` component is designed to render a Apple-like mesh gradient for React apps. It offers flexible customization options through various props.\n\n<b>[Live examples](https://blur-ui-storybook.vercel.app/?path=/docs/components-meshgradient--docs)</b>\n\n## Features\n\n- Supports both horizontal and vertical orientations.\n- Provides smooth animations for track movement and stretch effects.\n- Fully unstyled and customizable.\n- RTL support.\n- Keyboard support.\n\n## Installation\n\n```bash\nnpm install @blur-ui/mesh-gradient\n```\n\nor\n\n```bash\nyarn add @blur-ui/mesh-gradient\n```\n\n## Usage\n\n```tsx\n<MeshGradient theme='peach' />\n```\n\n## Props\n\n### `ref` (optional)\n\n- **Type:** `Ref<HTMLCanvasElement> | null`\n- **Description:** A reference to the `<canvas>` element used for rendering the gradient.\n\n### `colors` (optional)\n\n- **Type:** `GradientPalette`\n- **Description:** An object containing four colors for the gradient. If not specified, the color palette defined by the `color` prop is used.\n\n### `theme` (optional)\n\n- **Type:** `GradientColors`\n- **Description:** The name of a predefined color palette.\n\n### `darken` (optional)\n\n- **Type:** `boolean`\n- **Description:** If `true`, the gradient will be darkened.\n\n### `isPaused` (optional)\n\n- **Type:** `boolean`\n- **Description:** If `true`, the gradient animation will be paused.\n\n### `opacity` (optional)\n\n- **Type:** `number`\n- **Description:** The opacity level of the gradient. Default: `1`.\n\n### `animationDuration` (optional)\n\n- **Type:** `number`\n- **Description:** The duration of the opacity transition animation in milliseconds. Default: `150`.\n\n### Other Props\n\n- **Type:** `ComponentPropsWithoutRef<'canvas'>`\n- **Description:** Any other props that can be passed to a `<canvas>` element.\n\n### `GradientPalette`\n\n- **Type:** `{ color1: string; color2: string; color3: string; color4: string }`\n- **Description:** An object defining four colors used in the gradient.\n\n## Example\n\n```tsx\n<MeshGradient theme='sky' darken={true} isPaused={false} opacity={0.8} animationDuration={300} />\n```\n\nThis example creates a gradient with the `sky` color palette, darkened, with continuous animation and an opacity of 0.8. The opacity transition animation lasts 300 milliseconds.\n\n### Example with `colors`\n\n```tsx\nconst colors: GradientPalette = {\n  color1: '#FF5733',\n  color2: '#33FF57',\n  color3: '#3357FF',\n  color4: '#F3FF33'\n}\n\n<MeshGradient\n  colors={colors}\n  animationDuration={200}\n/>\n```\n\nThis example uses a custom color palette defined by the `colors` prop, with no darkening, continuous animation, full opacity, and an opacity transition animation lasting 200 milliseconds.\n\n## Credits\n\nThis component was inspired by [Stripe's mesh gradient](https://github.com/jordienr/whatamesh/blob/master/lib/Gradient.js).\n","readmeFilename":"README.md"}