Hero made by @ybouane.

@crazygl/hero-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.

Demo

Carousel of Product Toys

Install

npm install @crazygl/hero-carousel-of-product-toys

Usage

import CarouselOfProductToys from '@crazygl/hero-carousel-of-product-toys';

export default function Hero() {
	return (
		<CarouselOfProductToys
			heading={"All your\nfavourite tools."}
			subheading="Hover one of the toys to bring it forward."
			toy1Label="Inbox"
			toy1Emoji="💌"
			onToy1Click="/inbox"
			onToy2Click={(e) => console.log('Tasks clicked', e)}
		/>
	);
}

Customise

• Carousel — toyCount (3–8), rotationSpeed (auto-drift, pauses on hover), hoverScale, turntableTilt, pointerParallax.
• 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.
• Confetti — confettiCount drifting sparkle particles (0 disables).
• Background — bgTop / bgBottom pastel gradient, transparentBackground to drop the backdrop.

Best for

• Multi-product brands and SaaS suites that need to show several sub-tools with equal billing.
• Marketplaces and app directories — each toy is a clickable destination.
• Productivity / playful product launches that want a tactile, collectible feel.

This hero is part of CrazyGL, 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.