{"_id":"@crazygl/hero-magazine-cover-product","name":"@crazygl/hero-magazine-cover-product","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-magazine-cover-product","version":"0.1.1","description":"Magazine Cover Product Hero — A product visual plays like a moving magazine cover, with large type sharing the frame and layered imagery adding subtle editorial depth. A customizable CrazyGL animated hero section — WebGL, React, drop-in.","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./metadata.json":"./metadata.json","./style.css":"./style.css"},"dependencies":{"@crazygl/core":"^0.1.1","three":"^0.184.0"},"peerDependencies":{"react":">=18","react-dom":">=18"},"license":"Apache-2.0","author":{"name":"ybouane"},"homepage":"https://crazygl.com/hero/magazine-cover-product","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-magazine-cover-product.git"},"publishConfig":{"access":"public"},"keywords":["three","3d","layers","screenshot","depth","parallax","design","editorial","portfolio","magazine-cover-product","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas"],"bugs":{"url":"https://github.com/crazygl-com/hero-magazine-cover-product/issues"},"gitHead":"c042c1b36c5373afbc6c7a2bc4fe464280eb346e","_id":"@crazygl/hero-magazine-cover-product@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-zSy2rEDtoN/T/M8r5EceR8GRZmIqq9gsmmiq0ifcZXY75zV80ma6CNGj+O7z1CQydKtoP1STjHf0Mbdm0+UjhA==","shasum":"59a9b52aadb89ffe559a910c39bfae06e66468bb","tarball":"https://registry.npmjs.org/@crazygl/hero-magazine-cover-product/-/hero-magazine-cover-product-0.1.1.tgz","fileCount":11,"unpackedSize":67386,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD1yXTiyzUAa5W3tFRg1koQD2iLzu+FJNhCGHTO+0sAigIgP/JZZAiqAOuTZBLYXN+DZHvMNTcNM72uhaPMRW0do/Q="}]},"_npmUser":{"name":"ybouane","email":"ybouane@ybouane.com"},"directories":{},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/hero-magazine-cover-product_0.1.1_1782922409276_0.18067597197242313"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:13:29.064Z","0.1.1":"2026-07-01T16:13:29.418Z","modified":"2026-07-01T16:13:29.700Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Magazine Cover Product Hero — A product visual plays like a moving magazine cover, with large type sharing the frame and layered imagery adding subtle editorial depth. A customizable CrazyGL animated hero section — WebGL, React, drop-in.","homepage":"https://crazygl.com/hero/magazine-cover-product","keywords":["three","3d","layers","screenshot","depth","parallax","design","editorial","portfolio","magazine-cover-product","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas"],"repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-magazine-cover-product.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-magazine-cover-product/issues"},"license":"Apache-2.0","readme":"<sub>*Hero made by [@ybouane](https://x.com/ybouane).*</sub>\n<p align=\"center\">\n  <img src=\"https://crazygl.com/heroes/hero-magazine-cover-product/banner-full.png\" alt=\"Magazine Cover Product Hero\" width=\"640\">\n</p>\n\n# @crazygl/hero-magazine-cover-product\n\nA product visual plays like a moving magazine cover, with large type sharing the frame and layered imagery adding subtle editorial depth.\n\n## Demo\n[Magazine Cover Product Hero](https://crazygl.com/hero/magazine-cover-product)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-magazine-cover-product\n```\n\n## Usage\n\n```tsx\nimport MagazineCoverProductHero from '@crazygl/hero-magazine-cover-product';\n\nexport default function Page() {\n  return (\n    <MagazineCoverProductHero\n      heading={\"Issue\\nNo. 01\"}\n      backgroundImage=\"https://example.com/cover.jpg\"\n      layer1Image=\"https://example.com/cutout.png\"\n      overallRotation={4}\n    />\n  );\n}\n```\n\nProvide a **background image** (full-frame base) and up to three **layer images** (Layer 1–3; a transparent PNG lets cut-out subjects float cleanly). Leave a layer's image empty to hide it.\n\n## Customise\n\n- **Layers** — per layer `X` / `Y` / `Z (depth)` / `Scale`. Spread the three `Z` values across ~0–1 for clear front-to-back depth.\n- **Overall** — `overallOffsetX`/`Y`, `overallScale`, `overallRotation` (tilt the whole set; default 4°).\n- **Motion** — `loadDelay` (entrance cascade), `hoverSpread` (pop on hover), `cameraParallax` (pointer-driven camera sweep).\n- **Layout** — `contentAlign`, `paddingX`/`Y`, heading font.\n\n## Best for\n\n- Fashion and beauty launches where typography should feel as important as the product.\n- Studio and agency portfolios, campaign pages, and print-inspired editorial sites.\n- App and SaaS pages that want to show screenshots with depth instead of a flat mockup.\n\n\n\nThis hero is part of [CrazyGL](https://crazygl.com), a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready `SKILL.md` file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.\n","readmeFilename":"README.md","_rev":"1-db429a4b3c0058d7368a574b56787669"}