{"_id":"@crazygl/hero-carousel-of-product-toys","_rev":"2-d695a25fd1f13814b0ecc4c87f648c39","name":"@crazygl/hero-carousel-of-product-toys","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@crazygl/hero-carousel-of-product-toys","version":"0.1.0","author":{"name":"ybouane"},"license":"Apache-2.0","_id":"@crazygl/hero-carousel-of-product-toys@0.1.0","maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"homepage":"https://crazygl.com/hero/carousel-of-product-toys","bugs":{"url":"https://github.com/crazygl-com/hero-carousel-of-product-toys/issues"},"dist":{"shasum":"8a0ecb844227aced43ff5a6571faf29f183b735b","tarball":"https://registry.npmjs.org/@crazygl/hero-carousel-of-product-toys/-/hero-carousel-of-product-toys-0.1.0.tgz","fileCount":11,"integrity":"sha512-BYxZLWstMkajjDfDgBbjsr6RgamV4iR9WEheFAClalHJIwZ0CuaEP9HbC+JTOaYvuHRgAu733FDJCdojFhkYHA==","signatures":[{"sig":"MEUCIQC/ToX5XcgXVGNLcVIQ2nqKvhhcvr67nDb5LzAy2URLYAIgfBOjc15AwdywB3vJrYd2P3rXJQVNJ+6eaXJgBmecTmU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":109843},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./style.css","./metadata.json":"./metadata.json"},"gitHead":"d81a65c09ceab5a880de2d3e5c22f51f43954dbe","_npmUser":{"name":"ybouane","email":"ybouane@ybouane.com"},"repository":{"url":"git+https://github.com/crazygl-com/hero-carousel-of-product-toys.git","type":"git"},"_npmVersion":"11.12.0","description":"Carousel of Product Toys — a slowly turning toy shelf where 5–8 chunky 3D product mascots rotate around the headline. Hover a toy to focus it; click to navigate.","directories":{},"_nodeVersion":"24.14.0","dependencies":{"three":"^0.184.0","@crazygl/core":"^0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/hero-carousel-of-product-toys_0.1.0_1782870621274_0.7542791589890747","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@crazygl/hero-carousel-of-product-toys","version":"0.1.1","description":"Carousel of Product Toys — A slowly turning toy shelf — 5–8 chunky plastic-toy product icons rotate around the headline like collectibles on a display stand. Hover a toy to bring it forward; click to navigate. A customizable CrazyGL animated hero section ","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/carousel-of-product-toys","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-carousel-of-product-toys.git"},"publishConfig":{"access":"public"},"keywords":["three","3d","carousel","toys","products","playful","marketplace","saas","shelf","interactive","carousel-of-product-toys","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","frontend","component","canvas"],"bugs":{"url":"https://github.com/crazygl-com/hero-carousel-of-product-toys/issues"},"gitHead":"f63a655e7a831543b7ce0aaa4ed86839dca10fdd","_id":"@crazygl/hero-carousel-of-product-toys@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-uxyDKKT/0xqjmJbUyzm8G5I+paFUyI45/JzytNmXum3521ocS+9juhEhG+gX42oxNW3z6x670aGhL+5G9onumA==","shasum":"bfce9477038a58b2688096c6d9920aa26a1d85b2","tarball":"https://registry.npmjs.org/@crazygl/hero-carousel-of-product-toys/-/hero-carousel-of-product-toys-0.1.1.tgz","fileCount":11,"unpackedSize":110427,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGFOfhrfLUrKHdvRRV3AMbYqBIL7KvJWNR/UyR6C3wFtAiBxHqUzD0c/9+x8kpvJ6k5CzAx3f6Zrkxe2Dunxpxv6/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-carousel-of-product-toys_0.1.1_1782922274182_0.7787846195722401"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T01:50:21.141Z","modified":"2026-07-01T16:11:14.474Z","0.1.0":"2026-07-01T01:50:21.404Z","0.1.1":"2026-07-01T16:11:14.324Z"},"bugs":{"url":"https://github.com/crazygl-com/hero-carousel-of-product-toys/issues"},"author":{"name":"ybouane"},"license":"Apache-2.0","homepage":"https://crazygl.com/hero/carousel-of-product-toys","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-carousel-of-product-toys.git"},"description":"Carousel of Product Toys — A slowly turning toy shelf — 5–8 chunky plastic-toy product icons rotate around the headline like collectibles on a display stand. Hover a toy to bring it forward; click to navigate. A customizable CrazyGL animated hero section ","maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"readme":"<sub>*Hero made by [@ybouane](https://x.com/ybouane).*</sub>\n<p align=\"center\">\n  <img src=\"https://crazygl.com/heroes/hero-carousel-of-product-toys/banner-full.png\" alt=\"Carousel of Product Toys\" width=\"640\">\n</p>\n\n# @crazygl/hero-carousel-of-product-toys\n\nA slowly turning toy shelf — 5–8 chunky plastic-toy product icons rotate around the headline like collectibles on a display stand. Hover a toy to bring it forward; click to navigate.\n\n## Demo\n[Carousel of Product Toys](https://crazygl.com/hero/carousel-of-product-toys)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-carousel-of-product-toys\n```\n\n## Usage\n\n```tsx\nimport CarouselOfProductToys from '@crazygl/hero-carousel-of-product-toys';\n\nexport default function Hero() {\n\treturn (\n\t\t<CarouselOfProductToys\n\t\t\theading={\"All your\\nfavourite tools.\"}\n\t\t\tsubheading=\"Hover one of the toys to bring it forward.\"\n\t\t\ttoy1Label=\"Inbox\"\n\t\t\ttoy1Emoji=\"💌\"\n\t\t\tonToy1Click=\"/inbox\"\n\t\t\tonToy2Click={(e) => console.log('Tasks clicked', e)}\n\t\t/>\n\t);\n}\n```\n\n## Customise\n\n- **Carousel** — `toyCount` (3–8), `rotationSpeed` (auto-drift, pauses on hover), `hoverScale`, `turntableTilt`, `pointerParallax`.\n- **Per toy (1–8)** — `toy{N}Label`, `toy{N}Color`, `toy{N}Emoji`, `toy{N}Shape` (cylinder / capsule / cone / box), and `onToy{N}Click` — one prop that takes either a URL string (from the customizer) or a function (in code), type-detected at runtime.\n- **Confetti** — `confettiCount` drifting sparkle particles (0 disables).\n- **Background** — `bgTop` / `bgBottom` pastel gradient, `transparentBackground` to drop the backdrop.\n\n## Best for\n\n- Multi-product brands and SaaS suites that need to show several sub-tools with equal billing.\n- Marketplaces and app directories — each toy is a clickable destination.\n- Productivity / playful product launches that want a tactile, collectible feel.\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","keywords":["three","3d","carousel","toys","products","playful","marketplace","saas","shelf","interactive","carousel-of-product-toys","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","frontend","component","canvas"]}