{"_id":"@adi1816/genie-effect","_rev":"3-34722b4885d4257b18bef335bd77e18b","name":"@adi1816/genie-effect","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@adi1816/genie-effect","version":"0.1.0","keywords":["react","genie","macos","animation","minimize","window","dock","ui","effect"],"author":{"name":"Aditya Srivastava"},"license":"MIT","_id":"@adi1816/genie-effect@0.1.0","maintainers":[{"name":"adi1816","email":"sriaditya16@gmail.com"}],"homepage":"https://github.com/Adi1816/genie-effect#readme","bugs":{"url":"https://github.com/Adi1816/genie-effect/issues"},"dist":{"shasum":"ae120b65d085981a7e1f6fffe56c5a44f618c96c","tarball":"https://registry.npmjs.org/@adi1816/genie-effect/-/genie-effect-0.1.0.tgz","fileCount":11,"integrity":"sha512-CFio2POfGLZPyKNHpoxPpwWuPxAIMo2JxHFK5Cr6FElupBfEhc9C9lBUtde4fdVApD6zTcL72UM/UiKbDCRkuA==","signatures":[{"sig":"MEQCIG7h+/DKEdVdwiw1/B8X+VHcX1Nz4NpfMkCXdnwiPiqpAiA/+OXr6vYtkT7D3GazO6a8Ctg9qeiiRAky1k6zTgz9ag==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30507},"type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js"},"./styles.css":"./dist/styles.css"},"gitHead":"d9c02b1c98f8bd9be0454cd7e9df1d8f192cca44","scripts":{"demo":"npm --prefix examples/react-demo run dev","build":"tsc -p tsconfig.build.json && node scripts/copy-css.mjs","pack:dry":"npm pack --dry-run","typecheck":"tsc --noEmit","prepublishOnly":"npm run typecheck && npm run build"},"_npmUser":{"name":"adi1816","email":"sriaditya16@gmail.com"},"repository":{"url":"git+https://github.com/Adi1816/genie-effect.git","type":"git"},"_npmVersion":"11.12.1","description":"A fast macOS-style genie minimize effect for React and vanilla DOM apps.","directories":{},"sideEffects":["./dist/styles.css"],"_nodeVersion":"25.9.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.0","typescript":"^5.8.0","@types/react":"^19.0.0"},"peerDependencies":{"react":">=18.0.0"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/genie-effect_0.1.0_1777876242729_0.49080525598422486","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@adi1816/genie-effect","version":"0.1.1","keywords":["react","genie","macos","animation","minimize","window","dock","ui","effect"],"author":{"name":"Aditya Srivastava"},"license":"MIT","_id":"@adi1816/genie-effect@0.1.1","maintainers":[{"name":"adi1816","email":"sriaditya16@gmail.com"}],"homepage":"https://github.com/Adi1816/genie-effect#readme","bugs":{"url":"https://github.com/Adi1816/genie-effect/issues"},"dist":{"shasum":"17fd0e98d3d03bbb5be2e9545b15a7aeb6f34d9d","tarball":"https://registry.npmjs.org/@adi1816/genie-effect/-/genie-effect-0.1.1.tgz","fileCount":20,"integrity":"sha512-MtbxWaLS+KFlmbnnhxU7tstM8Gpc06cXaWI3aZlRDxAjn7knWpxuFAOzbkwFRNEZGfOkJM1h1puFd7yzVP/n5g==","signatures":[{"sig":"MEUCIDnjVYAzcK+S9oSQVLsWs+c83kvV+hzFUVrCroYaoOcIAiEA2sQRHl9cfYHiKPKoGWRMvQcdcEqueDAaEYusAD/juuo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":45884},"type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js"},"./styles.css":"./dist/styles.css"},"gitHead":"a10a7be25e1255ed0ccff6a3f0a5de0ffe587b00","scripts":{"demo":"npm --prefix examples/react-demo run dev","build":"tsc -p tsconfig.build.json && node scripts/copy-css.mjs","pack:dry":"npm pack --dry-run","typecheck":"tsc --noEmit","prepublishOnly":"npm run typecheck && npm run build"},"_npmUser":{"name":"adi1816","email":"sriaditya16@gmail.com"},"repository":{"url":"git+https://github.com/Adi1816/genie-effect.git","type":"git"},"_npmVersion":"11.12.1","description":"A fast macOS-style genie minimize effect for React and vanilla DOM apps.","directories":{},"sideEffects":["./dist/styles.css"],"_nodeVersion":"25.9.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.0","typescript":"^5.8.0","@types/react":"^19.0.0"},"peerDependencies":{"react":">=18.0.0"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/genie-effect_0.1.1_1777878082169_0.04795075814799388","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@adi1816/genie-effect","version":"0.1.2","description":"A fast macOS-style genie minimize effect for React and vanilla DOM apps.","type":"module","license":"MIT","author":{"name":"Aditya Srivastava"},"homepage":"https://github.com/Adi1816/genie-effect#readme","repository":{"type":"git","url":"git+https://github.com/Adi1816/genie-effect.git"},"bugs":{"url":"https://github.com/Adi1816/genie-effect/issues"},"keywords":["react","genie","macos","animation","minimize","window","dock","ui","effect"],"sideEffects":["./dist/styles.css"],"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./react":{"types":"./dist/react.d.ts","import":"./dist/react.js"},"./styles.css":"./dist/styles.css"},"types":"./dist/index.d.ts","peerDependencies":{"react":">=18.0.0"},"peerDependenciesMeta":{"react":{"optional":true}},"devDependencies":{"@types/react":"^19.0.0","typescript":"^5.8.0","vite":"^7.0.0"},"scripts":{"build":"tsc -p tsconfig.build.json && node scripts/copy-css.mjs","demo":"npm --prefix examples/react-demo run dev","pack:dry":"npm pack --dry-run","prepublishOnly":"npm run typecheck && npm run build","typecheck":"tsc --noEmit"},"gitHead":"33b77d5b3723bbc384337d6277d57c4a1533d771","_id":"@adi1816/genie-effect@0.1.2","_nodeVersion":"25.9.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-U2+DjVsannsaTN0VoWe5XNKDhO1YrcBkyNPjWLiAgk2AfQ73UNd8wR+iolVsQIW5rFGJWGa0feKze9GZo0YubA==","shasum":"ef7fca3f8b44d142742ee816d3c0792475052627","tarball":"https://registry.npmjs.org/@adi1816/genie-effect/-/genie-effect-0.1.2.tgz","fileCount":20,"unpackedSize":47605,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCID7jnfNOKccwq3XyFBkugtskUal+h+05d0ThCz0aWLb5AiEAucrGm4p+Kxmovf+Qg1fgRIk9VWXxbbO9mQU4TEJdaXg="}]},"_npmUser":{"name":"adi1816","email":"sriaditya16@gmail.com"},"directories":{},"maintainers":[{"name":"adi1816","email":"sriaditya16@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/genie-effect_0.1.2_1777895944116_0.8677251058690547"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-04T06:30:42.637Z","modified":"2026-05-04T11:59:04.373Z","0.1.0":"2026-05-04T06:30:42.873Z","0.1.1":"2026-05-04T07:01:22.359Z","0.1.2":"2026-05-04T11:59:04.267Z"},"bugs":{"url":"https://github.com/Adi1816/genie-effect/issues"},"author":{"name":"Aditya Srivastava"},"license":"MIT","homepage":"https://github.com/Adi1816/genie-effect#readme","keywords":["react","genie","macos","animation","minimize","window","dock","ui","effect"],"repository":{"type":"git","url":"git+https://github.com/Adi1816/genie-effect.git"},"description":"A fast macOS-style genie minimize effect for React and vanilla DOM apps.","maintainers":[{"name":"adi1816","email":"sriaditya16@gmail.com"}],"readme":"# Genie Effect\n\nA fast macOS-style genie minimize effect for React and vanilla DOM apps.\n\nGenie Effect was born inside a browser-based operating system UI, where windows\nneeded to minimize into dock buttons with a premium pull while staying smooth\naround dashboards, iframes, glass panels, and rich React components.\n\n## Highlights\n\n- macOS-like genie minimize motion\n- React hook and vanilla DOM API\n- One lightweight cloned visual panel, not heavy slice cloning\n- Curved `clip-path` silhouette\n- Works with dock icons, nav buttons, floating controls, or custom target rects\n- Respects `prefers-reduced-motion`\n- TypeScript definitions included\n- No runtime dependency for the core DOM API\n\n## Install\n\n```bash\nnpm install @adi1816/genie-effect\n```\n\nImport the styles once in your app:\n\n```ts\nimport \"@adi1816/genie-effect/styles.css\";\n```\n\n## Quick React Usage\n\n```tsx\nimport { useRef, useState } from \"react\";\nimport { useGenieEffect } from \"@adi1816/genie-effect/react\";\nimport \"@adi1816/genie-effect/styles.css\";\n\nexport function DemoWindow() {\n  const [isVisible, setIsVisible] = useState(true);\n  const windowRef = useRef<HTMLDivElement>(null);\n  const dockRef = useRef<HTMLButtonElement>(null);\n  const genie = useGenieEffect({ duration: 860 });\n\n  function minimize() {\n    genie.run(windowRef, dockRef, {\n      restoreSourceOnComplete: false,\n      onComplete: () => setIsVisible(false),\n    });\n  }\n\n  return (\n    <main data-genie-root>\n      {isVisible ? (\n        <section ref={windowRef} className=\"window\">\n          <button onClick={minimize}>Minimize</button>\n          <h1>Workspace</h1>\n        </section>\n      ) : null}\n\n      <button ref={dockRef} onClick={() => setIsVisible(true)}>\n        App\n      </button>\n    </main>\n  );\n}\n```\n\n## Quick Vanilla Usage\n\n```ts\nimport { runGenieEffect } from \"@adi1816/genie-effect\";\nimport \"@adi1816/genie-effect/styles.css\";\n\nconst source = document.querySelector(\"#window\") as HTMLElement;\nconst target = document.querySelector(\"#dock-icon\") as HTMLElement;\n\nconst controls = runGenieEffect(source, target, {\n  duration: 860,\n  restoreSourceOnComplete: false,\n  onComplete: () => {\n    source.hidden = true;\n  },\n});\n\nawait controls.finished;\n```\n\n## Documentation\n\n- [Getting Started](./docs/getting-started.md)\n- [React Guide](./docs/react.md)\n- [Vanilla DOM Guide](./docs/vanilla.md)\n- [API Reference](./docs/api-reference.md)\n- [Examples](./docs/examples.md)\n- [Performance Notes](./docs/performance.md)\n- [Troubleshooting](./docs/troubleshooting.md)\n- [Contributing](./CONTRIBUTING.md)\n- [Changelog](./CHANGELOG.md)\n\n## Demo App\n\nThe repo includes a small Vite demo:\n\n```bash\nnpm install\nnpm run demo\n```\n\n## How It Works\n\nThe effect creates one temporary visual layer, clones the source element once,\nthen animates a curved `clip-path` polygon and panel transform with\n`requestAnimationFrame`. This avoids the lag caused by cloning many horizontal\nDOM slices while still giving the minimize motion a real genie-like pull.\n\nIf your source element depends on CSS variables from a shell, wrap the UI with\n`data-genie-root`. The temporary layer will mount there and inherit your theme.\n\n```tsx\n<div data-genie-root className=\"app-shell\">\n  <YourWindow />\n</div>\n```\n\n## Maintainer Release Checklist\n\n```bash\nnpm install\nnpm run typecheck\nnpm run build\nnpm pack --dry-run\nnpm publish --access public\n```\n\nFor future releases:\n\n```bash\nnpm version patch\nnpm publish --access public\ngit push --follow-tags\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}