{"_id":"@crazygl/hero-gallery-slider","name":"@crazygl/hero-gallery-slider","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-gallery-slider","version":"0.1.1","description":"Gallery Slider — A full-bleed image gallery where each slide carries its own picture and copy. Image and text transition independently — fade, Ken-Burns zoom, push-slide, clip wipe or blur-morph for the image; fade,… A customizable CrazyGL animated hero s","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"},"peerDependencies":{"react":">=18","react-dom":">=18"},"keywords":["slider","gallery","carousel","transitions","images","slideshow","fade","morph","gallery-slider","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"license":"Apache-2.0","author":{"name":"ybouane"},"homepage":"https://crazygl.com/hero/gallery-slider","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-gallery-slider.git"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/crazygl-com/hero-gallery-slider/issues"},"gitHead":"d72feeeddb7088d232a6adae8e97a04c5d899892","_id":"@crazygl/hero-gallery-slider@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-XFoTlUfWg0Inf7c1B9lyMoIVN2hVPBBt1YaB8i8cqQjm2B805tiEhn+wJmZKsILHy/59c0wkDiNkb4Aaay8LIg==","shasum":"82a1e10881845ea1972150c9a4b706760027b016","tarball":"https://registry.npmjs.org/@crazygl/hero-gallery-slider/-/hero-gallery-slider-0.1.1.tgz","fileCount":9,"unpackedSize":86120,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDsuV5GcVtMbYH3z6JnQuNPK23QEL5jGBJx0apqkpXkLwIhAOI0NkJcUUt9X+P3V7wTI5sIRiIYwu1ITuF4hFqUCH1s"}]},"_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-gallery-slider_0.1.1_1782922332704_0.677151142465714"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:12:12.532Z","0.1.1":"2026-07-01T16:12:12.874Z","modified":"2026-07-01T16:12:13.144Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Gallery Slider — A full-bleed image gallery where each slide carries its own picture and copy. Image and text transition independently — fade, Ken-Burns zoom, push-slide, clip wipe or blur-morph for the image; fade,… A customizable CrazyGL animated hero s","homepage":"https://crazygl.com/hero/gallery-slider","keywords":["slider","gallery","carousel","transitions","images","slideshow","fade","morph","gallery-slider","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas","three"],"repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-gallery-slider.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-gallery-slider/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-gallery-slider/banner-full.png\" alt=\"Gallery Slider\" width=\"640\">\n</p>\n\n# @crazygl/hero-gallery-slider\n\nA full-bleed image gallery where each slide carries its own picture and copy. Image and text transition independently — fade, Ken-Burns zoom, push-slide, clip wipe or blur-morph for the image; fade, rise, clip-reveal or blur for the text. Autoplay, arrows, dots, counter, swipe.\n\n## Demo\n[Gallery Slider](https://crazygl.com/hero/gallery-slider)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-gallery-slider\n```\n\n## Usage\n\n```tsx\nimport GallerySlider from '@crazygl/hero-gallery-slider';\n\nexport default function Page() {\n  return (\n    <GallerySlider\n      slideCount={3}\n      imageTransition=\"blur\"\n      textTransition=\"clip\"\n      slide1Image=\"/img/one.jpg\"\n      slide1Heading=\"Tiered in white sugar\"\n      slide1CtaLabel=\"Discover\"\n      slide1CtaHref=\"/products\"\n    />\n  );\n}\n```\n\n## Customise\n\n- **Slides** — `slideCount` (1–5) and per-slide `slideNImage`, `slideNEyebrow`, `slideNHeading`, `slideNSubtext`, `slideNCtaLabel`, `slideNCtaHref`.\n- **Transitions** — `imageTransition`, `textTransition`, `duration`, `easing`, and ambient `kenBurns`.\n- **Playback** — `autoplay`, `interval`, and toggles for `showArrows`, `showDots`, `showCounter`, `showProgress`.\n- **Style** — `textPosition`, `textColor`, `accentColor`, `scrim`, `headingFont`/`bodyFont`, and CTA `ctaColor`/`ctaTextColor`/`ctaShape`.\n\n## Best for\n\n- Hospitality, fashion, and luxury-brand landing pages that lead with photography.\n- Product showcases and editorial \"chapters\" where each slide tells one beat of a story.\n- Portfolios and case-study reels that need cinematic image-to-image transitions.\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-6ad58b49769c96c7de12511366e89373"}