sincethestudy/MacOSGenieEffect.html

## MacOSGenieEffect.html
<!DOCTYPE html>
<html>
<head>
    <title>Genie Effect</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #target {
            position: absolute;
            top: 50px;
            left: 50px;
            transform-style: preserve-3d;
            perspective: 500px;
        }

        .slice {
            position: absolute;
            left: 50px;
            transform-style: preserve-3d;
            perspective: 500px;
        }
    </style>

</head>
<body>
    <div id="target">
        <img src="yourimage.png" width="500px" alt="Your Image"> <!-- Your image here -->
    </div>

    <div id="slices"></div>

    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <script>
        const target = document.getElementById('target');
        const slicesContainer = document.getElementById('slices');
        const numSlices = 50;
        // const dpr = window.devicePixelRatio || 1;
        const dpr = 4
        const overlap = 2;

        html2canvas(target, { scale: dpr, backgroundColor: 'rgba(0,0,0,0)' }).then((canvas) => {
            const { width, height } = canvas;
            const sliceHeight = height / numSlices;

            for (let i = 0; i < numSlices; i++) {
                const sliceCanvas = document.createElement('canvas');
                sliceCanvas.width = width;
                sliceCanvas.height = sliceHeight + overlap;
                sliceCanvas.style.width = `${width / dpr}px`;
                sliceCanvas.style.height = `${(sliceHeight + overlap) / dpr}px`;
                sliceCanvas.style.position = 'absolute';
                sliceCanvas.style.top = `${i * sliceHeight}px`;

                const sliceContext = sliceCanvas.getContext('2d');
                sliceContext.drawImage(canvas, 0, i * sliceHeight, width, sliceHeight, 0, 0, width, sliceHeight + overlap);

                slicesContainer.appendChild(sliceCanvas);

                gsap.set(sliceCanvas, {
                    x: '500px',
                    top: window.innerHeight,
                    scaleX: 0,
                    scaleY: 0,
                    rotationY: '90deg',
                    translateX: 0,
                    transformOrigin: 'center center'
                });

                gsap.to(sliceCanvas, {
                    x: '100px',
                    duration: 1.5 + i * 0.006 ,
                    scaleX: 1,
                    ease: "power4.inOut",
                });

                gsap.to(sliceCanvas, {
                    top: (i * sliceHeight + 100)/4,
                    scaleY: 1,
                    duration: 1.5,
                    ease: "power2.inOut",
                    rotationY: '0deg',
                });
            }
            target.style.display = 'none';
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Genie Effect</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	#target {
	position: absolute;
	top: 50px;
	left: 50px;
	transform-style: preserve-3d;
	perspective: 500px;
	}

	.slice {
	position: absolute;
	left: 50px;
	transform-style: preserve-3d;
	perspective: 500px;
	}
	</style>

	</head>
	<body>
	<div id="target">
	<img src="yourimage.png" width="500px" alt="Your Image"> <!-- Your image here -->
	</div>

	<div id="slices"></div>

	<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
	<script>
	const target = document.getElementById('target');
	const slicesContainer = document.getElementById('slices');
	const numSlices = 50;
	// const dpr = window.devicePixelRatio \|\| 1;
	const dpr = 4
	const overlap = 2;

	html2canvas(target, { scale: dpr, backgroundColor: 'rgba(0,0,0,0)' }).then((canvas) => {
	const { width, height } = canvas;
	const sliceHeight = height / numSlices;

	for (let i = 0; i < numSlices; i++) {
	const sliceCanvas = document.createElement('canvas');
	sliceCanvas.width = width;
	sliceCanvas.height = sliceHeight + overlap;
	sliceCanvas.style.width = `${width / dpr}px`;
	sliceCanvas.style.height = `${(sliceHeight + overlap) / dpr}px`;
	sliceCanvas.style.position = 'absolute';
	sliceCanvas.style.top = `${i * sliceHeight}px`;

	const sliceContext = sliceCanvas.getContext('2d');
	sliceContext.drawImage(canvas, 0, i * sliceHeight, width, sliceHeight, 0, 0, width, sliceHeight + overlap);

	slicesContainer.appendChild(sliceCanvas);

	gsap.set(sliceCanvas, {
	x: '500px',
	top: window.innerHeight,
	scaleX: 0,
	scaleY: 0,
	rotationY: '90deg',
	translateX: 0,
	transformOrigin: 'center center'
	});

	gsap.to(sliceCanvas, {
	x: '100px',
	duration: 1.5 + i * 0.006 ,
	scaleX: 1,
	ease: "power4.inOut",
	});

	gsap.to(sliceCanvas, {
	top: (i * sliceHeight + 100)/4,
	scaleY: 1,
	duration: 1.5,
	ease: "power2.inOut",
	rotationY: '0deg',
	});
	}
	target.style.display = 'none';
	});
	</script>
	</body>
	</html>