actually that sheet is a discoball if you mirror-greyefy all colors and rectangulate paricles and do that ?transitioning? animation on a constant basis animating:

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Flexible Flower Animation</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #010501; 
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        let width, height, particles = [];

        const gridSize = 15;  
        const baseRadius = 150;  
        const maxPetalSize = 10; 
        const minPetalSize = 5; 
        const particleCount = gridSize * gridSize;

        let rotationY = 0; 
        let rotationX = 0; 
        let time = 0; 

        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        function resizeCanvas() {
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
            generateFlowerSphere();
        }

        function generateFlowerSphere() {
            particles = [];
            for (let i = 0; i < particleCount; i++) {
                const phi = Math.acos(-1 + (2 * i) / (particleCount - 1));
                const theta = Math.sqrt(particleCount * Math.PI) * phi;
                const x = baseRadius * Math.sin(phi) * Math.cos(theta);
                const y = baseRadius * Math.sin(phi) * Math.sin(theta);
                const z = baseRadius * Math.cos(phi);
                particles.push({ x, y, z });
            }
        }

        function shuffleParticles() {
            for (let i = particles.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [particles[i], particles[j]] = [particles[j], particles[i]];
            }
        }

        function draw() {
            ctx.clearRect(0, 0, width, height);
            time += 0.05; 

            particles.forEach((p, index) => {
                const xRotated = p.x * Math.cos(rotationY) - p.z * Math.sin(rotationY);
                const zRotated = p.x * Math.sin(rotationY) + p.z * Math.cos(rotationY);
                const yRotated = p.y * Math.cos(rotationX) - zRotated * Math.sin(rotationX);
                const newZ = p.y * Math.sin(rotationX) + zRotated * Math.cos(rotationX);

                const perspective = 300 / (300 + newZ);
                const x2d = xRotated * perspective + width / 2;
                const y2d = yRotated * perspective + height / 2;

                const petalSize = minPetalSize + (maxPetalSize - minPetalSize) * (Math.sin(time + index) * 0.5 + 0.5) * perspective;

                const hue = (index / particleCount) * 360; 
                ctx.fillStyle = `hsl(${hue + time * 10}, 100%, 50%)`;
                ctx.beginPath();
                ctx.arc(x2d, y2d, petalSize, 0, 2 * Math.PI);
                ctx.fill();
            });

            rotationY += 0.01; 
            rotationX += 0.005; 

            if (Math.floor(time) % 7 === 0) { 
                shuffleParticles(); 
            }
        }

        function animate() {
            draw();
            requestAnimationFrame(animate);
        }

        generateFlowerSphere();
        animate();
    </script>
</body>
</html>
```