{"_id":"@amphore-dev/shades","_rev":"4-1ad03e577251ec105c7d0c7e08d28404","name":"@amphore-dev/shades","dist-tags":{"latest":"0.7.0"},"versions":{"0.5.0":{"name":"@amphore-dev/shades","version":"0.5.0","keywords":["canvas","animation","visualization","shapes","graphics","javascript","web","art","typescript","library"],"author":{"name":"Amphore Development Team"},"license":"MIT","_id":"@amphore-dev/shades@0.5.0","maintainers":[{"name":"shimon42","email":"contact@amphore.dev"}],"homepage":"https://github.com/Amphore-Dev/Shades#readme","bugs":{"url":"https://github.com/Amphore-Dev/Shades/issues"},"dist":{"shasum":"9d91943215eb09404b59b65c7d4a87ece843c76c","tarball":"https://registry.npmjs.org/@amphore-dev/shades/-/shades-0.5.0.tgz","fileCount":103,"integrity":"sha512-inhTawrDJl/0nnpLsN61eWIXX7hNffgwuD4zNuV8Gt7ADQqYEBGgoPpqMc9nIWIS2VT1cdankvUk0UO4IkzByg==","signatures":[{"sig":"MEQCIDDXmqly43hZnXWjku2zJkhcPfgESjeTDsaKYlKewFsKAiALlqZpIdD9JosZ3tT4MRe8FQQc2+hhNStrruEKkDLMug==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":103868},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","engines":{"node":">=16.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"4f3721ff77999eb6af6d1d579e0234d8c940b54d","scripts":{"lint":"eslint src","test":"jest","build":"tsc","clean":"rm -rf dist","format":"prettier --write .","example":"npm run build && python3 -m http.server 8000","lint:fix":"eslint src --fix","test:watch":"jest --watch","build:watch":"tsc --watch","format:check":"prettier --check .","test:coverage":"jest --coverage","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"shimon42","email":"contact@amphore.dev"},"repository":{"url":"git+https://github.com/Amphore-Dev/Shades.git","type":"git"},"_npmVersion":"10.9.3","description":"Library for creating animated shape visualizations on canvas.","directories":{},"_nodeVersion":"22.19.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","eslint":"^10.1.0","ts-jest":"^29.1.1","ts-node":"^10.9.1","prettier":"^3.8.1","@eslint/js":"^10.0.1","typescript":"^6.0.2","@types/jest":"^29.5.5","@types/node":"^25.5.0","jest-canvas-mock":"^2.5.2","typescript-eslint":"^8.58.0","eslint-config-prettier":"^10.1.8","jest-environment-jsdom":"^29.7.0","@typescript-eslint/parser":"^8.58.0","@typescript-eslint/eslint-plugin":"^8.58.0"},"_npmOperationalInternal":{"tmp":"tmp/shades_0.5.0_1775068841048_0.7856987170340357","host":"s3://npm-registry-packages-npm-production"}},"0.6.0":{"name":"@amphore-dev/shades","version":"0.6.0","keywords":["canvas","animation","visualization","shapes","graphics","javascript","web","art","typescript","library"],"author":{"name":"Amphore Development Team"},"license":"MIT","_id":"@amphore-dev/shades@0.6.0","maintainers":[{"name":"shimon42","email":"contact@amphore.dev"}],"homepage":"https://github.com/Amphore-Dev/Shades#readme","bugs":{"url":"https://github.com/Amphore-Dev/Shades/issues"},"dist":{"shasum":"b7ecd98ed0fdd001ccb8373a23f5f0d52461ea5f","tarball":"https://registry.npmjs.org/@amphore-dev/shades/-/shades-0.6.0.tgz","fileCount":103,"integrity":"sha512-W7y+CZx2FDaFr8/97l2xxif9IAGNxXP5LYCXNThGS7gpEo8SyDen9E0ZjhFBqAQxjBFKWA1vbTjUXaIApiY4NA==","signatures":[{"sig":"MEUCIQCvrMududc/GWlS7PZexhP4Ts8lvw67GvjmBCnbgZL6SAIgCA1jnMIYssO+pkUgC6LBKsMBcE6v5ckjM4c6JcOxHEE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":106156},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","engines":{"node":">=16.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"3196bc05a30948da3d514137a5ce9a9d8f5bf163","scripts":{"lint":"eslint src","test":"jest","build":"tsc","clean":"rm -rf dist","format":"prettier --write .","example":"npm run build && python3 -m http.server 8000","lint:fix":"eslint src --fix","test:watch":"jest --watch","build:watch":"tsc --watch","format:check":"prettier --check .","test:coverage":"jest --coverage","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"shimon42","email":"contact@amphore.dev"},"repository":{"url":"git+https://github.com/Amphore-Dev/Shades.git","type":"git"},"_npmVersion":"10.9.3","description":"Library for creating animated shape visualizations on canvas.","directories":{},"_nodeVersion":"22.19.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","eslint":"^10.1.0","ts-jest":"^29.1.1","ts-node":"^10.9.1","prettier":"^3.8.1","@eslint/js":"^10.0.1","typescript":"^6.0.2","@types/jest":"^29.5.5","@types/node":"^25.5.0","jest-canvas-mock":"^2.5.2","typescript-eslint":"^8.58.0","eslint-config-prettier":"^10.1.8","jest-environment-jsdom":"^29.7.0","@typescript-eslint/parser":"^8.58.0","@typescript-eslint/eslint-plugin":"^8.58.0"},"_npmOperationalInternal":{"tmp":"tmp/shades_0.6.0_1775079867010_0.610705066313808","host":"s3://npm-registry-packages-npm-production"}},"0.6.1":{"name":"@amphore-dev/shades","version":"0.6.1","keywords":["canvas","animation","visualization","shapes","graphics","javascript","web","art","typescript","library"],"author":{"name":"Amphore Development Team"},"license":"MIT","_id":"@amphore-dev/shades@0.6.1","maintainers":[{"name":"shimon42","email":"contact@amphore.dev"}],"homepage":"https://amphore-dev.github.io/Shades/","bugs":{"url":"https://github.com/Amphore-Dev/Shades/issues"},"dist":{"shasum":"4a3c4ce8e1f81e545501305de8b7171c44115534","tarball":"https://registry.npmjs.org/@amphore-dev/shades/-/shades-0.6.1.tgz","fileCount":103,"integrity":"sha512-xXabA4ALObSMt8s9Q9NusmfAqTPZuZE0cZtJpsdt5rswdisoXHmyp/DzGJZTVHcuVuDMFWw3P7L5j1ahZSZu5w==","signatures":[{"sig":"MEYCIQC56aSKrdZAZUt+xiltrHYtZJzCsGhTptz/djSvoxCEFAIhAKIKPXOkl0/m2g+akg/5vlHlgIxsWt4blcZ/rXsIMHuk","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":106286},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","engines":{"node":">=16.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"21336bce2df5004de511c5ed23e0c45bc8d8546b","scripts":{"lint":"eslint src","test":"jest","build":"tsc","clean":"rm -rf dist","format":"prettier --write .","example":"npm run build && python3 -m http.server 8000","lint:fix":"eslint src --fix","test:watch":"jest --watch","build:watch":"tsc --watch","format:check":"prettier --check .","test:coverage":"jest --coverage","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"shimon42","email":"contact@amphore.dev"},"repository":{"url":"git+https://github.com/Amphore-Dev/Shades.git","type":"git"},"_npmVersion":"10.9.3","description":"Library for creating animated shape visualizations on canvas.","directories":{},"_nodeVersion":"22.19.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","eslint":"^10.1.0","ts-jest":"^29.1.1","ts-node":"^10.9.1","prettier":"^3.8.1","@eslint/js":"^10.0.1","typescript":"^6.0.2","@types/jest":"^29.5.5","@types/node":"^25.5.0","jest-canvas-mock":"^2.5.2","typescript-eslint":"^8.58.0","eslint-config-prettier":"^10.1.8","jest-environment-jsdom":"^29.7.0","@typescript-eslint/parser":"^8.58.0","@typescript-eslint/eslint-plugin":"^8.58.0"},"_npmOperationalInternal":{"tmp":"tmp/shades_0.6.1_1775080071319_0.7972050224448735","host":"s3://npm-registry-packages-npm-production"}},"0.7.0":{"name":"@amphore-dev/shades","version":"0.7.0","description":"Library for creating animated shape visualizations on canvas.","type":"module","main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"}},"keywords":["canvas","animation","visualization","shapes","graphics","javascript","web","art","typescript","library"],"bugs":{"url":"https://github.com/Amphore-Dev/Shades/issues"},"homepage":"https://amphore-dev.github.io/Shades/","author":{"name":"Amphore Development Team"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Amphore-Dev/Shades.git"},"scripts":{"build":"tsc","build:watch":"tsc --watch","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","lint":"eslint src","lint:fix":"eslint src --fix","format":"prettier --write .","format:check":"prettier --check .","clean":"rm -rf dist","prepublishOnly":"npm run clean && npm run build","example":"npm run build && python3 -m http.server 8000"},"devDependencies":{"@eslint/js":"^10.0.1","@typescript-eslint/eslint-plugin":"^8.58.0","@typescript-eslint/parser":"^8.58.0","@types/jest":"^29.5.5","@types/node":"^25.5.0","eslint":"^10.1.0","eslint-config-prettier":"^10.1.8","jest":"^29.7.0","jest-canvas-mock":"^2.5.2","jest-environment-jsdom":"^29.7.0","prettier":"^3.8.1","ts-jest":"^29.1.1","ts-node":"^10.9.1","typescript":"^6.0.2","typescript-eslint":"^8.58.0"},"engines":{"node":">=16.0.0"},"_id":"@amphore-dev/shades@0.7.0","gitHead":"c930499beeba12b4574008a5dea151fa7e1e4893","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-3YlR2lWpiEfyNrzC7IQ8SJIW82zvh/iUamhvnMA4s9KQwxLzhbAOoP/6PaBLNJbFMXxw0xLhmaZspPMXXp6AGA==","shasum":"050366615524958787c4033d3374a02487fa9d1f","tarball":"https://registry.npmjs.org/@amphore-dev/shades/-/shades-0.7.0.tgz","fileCount":103,"unpackedSize":106202,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIH83zIDM4+GVrEbxGqcZeyQEjKZImLpjxgyORpOD/r9lAiEAx9NAxdct3GHMBvQ9ZGGQ3h7Zze4CqGRSKzarQHxrRM8="}]},"_npmUser":{"name":"shimon42","email":"contact@amphore.dev"},"directories":{},"maintainers":[{"name":"shimon42","email":"contact@amphore.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/shades_0.7.0_1775081769928_0.45369779659841125"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-01T18:40:40.959Z","modified":"2026-04-01T22:16:10.245Z","0.5.0":"2026-04-01T18:40:41.194Z","0.6.0":"2026-04-01T21:44:27.146Z","0.6.1":"2026-04-01T21:47:51.480Z","0.7.0":"2026-04-01T22:16:10.095Z"},"bugs":{"url":"https://github.com/Amphore-Dev/Shades/issues"},"author":{"name":"Amphore Development Team"},"license":"MIT","homepage":"https://amphore-dev.github.io/Shades/","keywords":["canvas","animation","visualization","shapes","graphics","javascript","web","art","typescript","library"],"repository":{"type":"git","url":"git+https://github.com/Amphore-Dev/Shades.git"},"description":"Library for creating animated shape visualizations on canvas.","maintainers":[{"name":"shimon42","email":"contact@amphore.dev"}],"readme":"# 🎨 Shades\n\nLibrary for creating animated shape visualizations on canvas.\n\n## 🚀 Live Demo\n\n[View the interactive demo](https://amphore-dev.github.io/Shades/) (deployed from the [`example/`](./example/) directory)\n\n## Features\n\n✨ **Framework-agnostic** - Works with React, Vue, Angular, Svelte, or vanilla JavaScript  \n🎯 **TypeScript** - Full type safety and IntelliSense support  \n🎨 **Multiple shapes** - Circles, squares, triangles, text, spirals, and images  \n🎭 **Smooth animations** - Buttery smooth 60fps animations  \n⚡ **Performant** - Optimized canvas rendering  \n🎮 **Interactive** - Mouse/touch controls and shades count adjustment  \n🐛 **Debug mode** - Built-in performance monitoring\n\n## Installation\n\n```bash\nnpm install @amphore-dev/shades\n# or\nyarn add @amphore-dev/shades\n```\n\n## Quick Start\n\n### Vanilla JavaScript/TypeScript\n\n```typescript\nimport { ShadesEngine } from \"@amphore-dev/shades\";\n\nconst canvas = document.getElementById(\"myCanvas\") as HTMLCanvasElement;\n\nconst shades = new ShadesEngine(canvas);\n\nshades.generate(); // Generate shapes\nshades.start(); // Start animation\n```\n\n### With React\n\n```tsx\nimport { useEffect, useRef } from \"react\";\nimport { ShadesEngine } from \"@amphore-dev/shades\";\n\nfunction ShadesComponent() {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const shadesRef = useRef<ShadesEngine>();\n\n  useEffect(() => {\n    if (canvasRef.current) {\n      shadesRef.current = new ShadesEngine(canvasRef.current);\n\n      shadesRef.current.generate();\n      shadesRef.current.start();\n    }\n\n    return () => {\n      shadesRef.current?.destroy();\n    };\n  }, []);\n\n  return <canvas ref={canvasRef} className=\"w-full h-full\" />;\n}\n```\n\n### With Vue 3\n\n```vue\n<template>\n  <canvas ref=\"canvasRef\" class=\"w-full h-full\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted } from \"vue\";\nimport { ShadesEngine } from \"@amphore-dev/shades\";\n\nconst canvasRef = ref<HTMLCanvasElement>();\nlet shades: ShadesEngine;\n\nonMounted(() => {\n  if (canvasRef.value) {\n    shades = new ShadesEngine(canvasRef.value);\n\n    shades.generate();\n    shades.start();\n  }\n});\n\nonUnmounted(() => {\n  shades?.destroy();\n});\n</script>\n```\n\n## API Reference\n\n### Constructor\n\n```typescript\nnew ShadesEngine(canvas: HTMLCanvasElement, options?: TShadesEngineOptions)\n```\n\n#### Options\n\n```typescript\ninterface TShadesEngineOptions {\n  shapes?: TShadeType[]; // Shape types to use for generation (ex: [\"circle\", \"square\"])\n  customShapes?: Record<string, TShadeTypeConstructor>; // Custom shape classes (ex: { \"star\": StarShape })\n  debug?: boolean | TShadesEngineDebugOptions; // Show debug information or options\n  fadeDuration?: number; // Fade duration in milliseconds (default: 500ms)\n}\n```\n\n### Methods\n\n| Method                          | Description                        |\n| ------------------------------- | ---------------------------------- |\n| `generate()`                    | Generate shapes and setup          |\n| `start()`                       | Start animation                    |\n| `pause()`                       | Pause animation                    |\n| `regenerate()`                  | Generate new shapes                |\n| `destroy()`                     | Cleanup and remove event listeners |\n| `setShadesCount(scale: number)` | Adjust number of shades            |\n| `setDebug(enabled: boolean)`    | Toggle debug mode                  |\n| `getShadesConfig()`             | Get current configuration          |\n| `isAnimating()`                 | Check if animation is running      |\n\n### Controls\n\n- **Click** - Regenerate shapes\n- **Mouse move** - Parallax effect\n- **Mouse wheel** - Adjust number of shades\n\n## Custom Shapes\n\nCreate your own custom shapes by extending the `ShadeItem` class:\n\n### Creating a Custom Shape\n\n```typescript\nimport {\n  ShadeItem,\n  TShadeColor,\n  TShadeConfig,\n  TShapeOptions,\n  TPoint,\n} from \"@amphore-dev/shades\";\n\nexport class StarShape extends ShadeItem {\n  constructor(\n    x: number,\n    y: number,\n    color: TShadeColor,\n    options: TShapeOptions = {}\n  ) {\n    super(x, y, color, { filled: true, rotation: true, ...options });\n    this.type = \"star\";\n  }\n\n  draw = (\n    ctx: CanvasRenderingContext2D,\n    config: TShadeConfig,\n    offset: TPoint\n  ) => {\n    const { gradRatio, nbrShades, totalWidth, totalHeight, center, width } =\n      config;\n\n    for (let i = 0; i < nbrShades; i++) {\n      this.setColors(ctx, gradRatio, i);\n      ctx.beginPath();\n\n      const x =\n        center.x +\n        (this.position.x - totalWidth / 2 + width / 2) +\n        offset.x * (1 - (gradRatio * i) / 100);\n      const y =\n        center.y +\n        (this.position.y - totalHeight / 2 + width / 2) +\n        offset.y * (1 - (gradRatio * i) / 100);\n\n      this.drawStar(ctx, x, y, width / 2, width / 4, 5);\n      this.drawPath(ctx);\n      ctx.closePath();\n\n      if (this.rotation) {\n        this.angle += ((0.5 / nbrShades) * Math.PI) / 180;\n      }\n    }\n  };\n\n  private drawStar(\n    ctx: CanvasRenderingContext2D,\n    x: number,\n    y: number,\n    outer: number,\n    inner: number,\n    points: number\n  ) {\n    const step = Math.PI / points;\n    let rot = (Math.PI / 2) * 3 + this.angle;\n\n    ctx.moveTo(x, y - outer);\n    for (let i = 0; i < points; i++) {\n      ctx.lineTo(x + Math.cos(rot) * outer, y + Math.sin(rot) * outer);\n      rot += step;\n      ctx.lineTo(x + Math.cos(rot) * inner, y + Math.sin(rot) * inner);\n      rot += step;\n    }\n    ctx.lineTo(x, y - outer);\n  }\n}\n```\n\n### Using Custom Shapes\n\n```typescript\nimport { ShadesEngine } from \"@amphore-dev/shades\";\nimport { StarShape } from \"./StarShape\";\n\nconst engine = new ShadesEngine(canvas, {\n  customShapes: {\n    star: StarShape, // Register your custom shape\n  },\n  fadeDuration: 800,\n});\n\nengine.generate();\nengine.start();\n```\n\n### Benefits\n\n- ✅ **Full extensibility** - Create any imaginable shape\n- ✅ **Seamless integration** - Mix with built-in shapes\n- ✅ **Type safety** - Complete TypeScript support\n- ✅ **Performance** - No overhead, direct compilation\n\n## Advanced Usage\n\n### Debug Mode\n\n```typescript\nimport { ShadesEngine } from \"@amphore-dev/shades\";\n\n// Simple debug mode\nconst shades = new ShadesEngine(canvas, {\n  debug: true,\n});\n\n// Debug with custom styling\nconst shadesCustom = new ShadesEngine(canvas, {\n  debug: {\n    className: \"my-debug-class\",\n  },\n});\n```\n\n### Event Handling\n\nThe engine automatically handles:\n\n- Canvas resize\n- Mouse/touch events\n- Animation frame management\n- Memory cleanup\n\n### Custom Fade Duration\n\n```typescript\nconst shades = new ShadesEngine(canvas, {\n  fadeDuration: 2000, // 2 seconds fade\n});\n```\n\n## Examples\n\n- **React Example**: See [`example/`](./example/) directory for a complete React implementation\n- **Advanced Example**: Check [`example-with-custom-shape/`](./example-with-custom-shape/) for custom shapes\n- **Vanilla JavaScript**: See [`example/example-vanilla.html`](./example/example-vanilla.html) for a pure JS example\n\n## Building From Source\n\n```bash\ngit clone <repository-url>\ncd shades\nnpm install\nnpm run build\n```\n\n## License\n\nMIT © Amphore Dev\n\n---\n\n**Framework-agnostic by design** 🚀\n","readmeFilename":"README.md"}