do animation of function as it assembling itself line by line from left/right gliding from top to bottom to in original random function to/in formattings initial:


"""
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stylish Animated Code Particles Background for Textarea</title>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* Center the container vertically */
            background-color: #fff; /* White background for the body */
            font-family: 'Courier New', monospace;
        }

        .container {
            position: relative;
            width: 500px;
            height: 300px;
            border: 2px solid #00aaff; /* Blue border */
            border-radius: 10px; /* Rounded corners */
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Soft shadow */
            overflow: hidden; /* Prevent overflow */
            background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white background */
        }

        .codeParticle {
            position: absolute;
            white-space: pre; /* Preserve formatting */
            pointer-events: none; /* Prevent interactions */
            opacity: 0; /* Start hidden */
            transition: opacity 0.5s ease; /* Smooth opacity transition */
            z-index: 1; /* Default z-index */
            transform: scale(1); /* Default scale */
        }

        /* Syntax highlighting */
        .keyword {
            color: hsl(340, 100%, 50%); /* Red for keywords */
        }
        .variable {
            color: hsl(120, 100%, 50%); /* Green for variables */
        }
        .number {
            color: hsl(240, 100%, 50%); /* Blue for numbers */
        }
        .operator {
            color: hsl(60, 100%, 50%); /* Yellow for operators */
        }
        .string {
            color: hsl(0, 100%, 75%); /* Pink for strings */
        }

        textarea {
            width: 100%;
            height: 100%;
            border: none; /* No border for seamless look */
            background: transparent; /* Transparent background */
            color: #333; /* Dark text color for better contrast */
            font-size: 16px; /* Font size */
            padding: 10px;
            resize: none; /* Disable resizing */
            outline: none; /* Remove outline */
            position: relative;
            z-index: 10; /* Place above particles */
            border-radius: 10px; /* Rounded corners for the textarea */
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1); /* Inner shadow for depth */
        }

        textarea::placeholder {
            color: #888; /* Placeholder color */
            opacity: 0.8; /* Slight opacity for placeholder */
        }
    </style>
</head>
<body>
    <div class="container">
        <textarea placeholder="Type your code here..."></textarea>
    </div>

    <script>
        const variableWords = [
            "alpha", "beta", "gamma", "delta",
            "epsilon", "zeta", "eta", "theta",
            "iota", "kappa", "lambda", "mu",
            "nu", "xi", "omicron", "pi"
        ];

        const maxParticles = 5; // Limit to 5 particles on the screen
        const particleLifetime = 3000; // Lifetime of each particle in milliseconds

        // Generate a random function with lines stored in an array
        function generateRandomFunction() {
            const functionName = `func${Math.floor(Math.random() * 10000)}`;
            const lines = Math.floor(Math.random() * 5) + 3; // Random number of lines
            const codeLines = [`<span class='keyword'>function</span> ${functionName}() {`];

            for (let i = 0; i < lines; i++) {
                const varName = `<span class='variable'>${variableWords[Math.floor(Math.random() * variableWords.length)]}_${Math.floor(Math.random() * 1000)}</span>`;
                const value = `<span class='number'>${Math.floor(Math.random() * 100)}</span>`;
                const logMessage = `<span class='string'>'${varName} is positive'</span>`;
                codeLines.push(`    <span class='keyword'>let</span> ${varName} = ${value};`);
                codeLines.push(`    <span class='keyword'>if</span> (${varName} > 0) {<br>        <span class='keyword'>console</span>.log(${logMessage});<br>    }`);
            }
            codeLines.push(`    <span class='keyword'>return</span> '<span class='string'>Execution of ${functionName} completed</span>';`);
            codeLines.push(`}`);

            return codeLines; // Return an array of lines
        }

        // Create a particle to assemble the function line by line
        function createCodeParticle() {
            const codeLines = generateRandomFunction();
            const particleDiv = document.createElement('div'); // Create a div for the particle
            particleDiv.className = 'codeParticle';
            document.querySelector('.container').appendChild(particleDiv); // Add to the container

            // Set random start position within the container
            const startX = Math.random() < 0.5 ? -200 : 500; // Start from left/right relative to the textarea width
            const startY = Math.random() * 300; // Random Y position within textarea height

            // Set random scale, opacity ≤ 0.5, and z-index
            const scale = Math.random() * 1.5 + 0.5; // Scale between 0.5 and 2.0
            const opacity = Math.random() * 0.5; // Opacity between 0 and 0.5
            const zIndex = Math.floor(Math.random() * 10); // Random z-index

            // Set initial style for animation
            particleDiv.style.left = `${startX}px`;
            particleDiv.style.top = `${startY}px`;
            particleDiv.style.opacity = opacity; // Apply random opacity (<= 0.5)
            particleDiv.style.zIndex = zIndex; // Apply random z-index
            particleDiv.style.transform = `scale(${scale})`; // Apply random scale

            // Slide into the viewport
            requestAnimationFrame(() => {
                particleDiv.style.transition = 'transform 0.5s ease, opacity 0.5s ease';
                particleDiv.style.transform = `translate(${(250 - startX)}px, 0) scale(${scale})`; // Slide to the center of the textarea
                particleDiv.innerHTML = ''; // Clear the HTML

                // Display all code lines, appending them line by line
                codeLines.forEach((line, index) => {
                    setTimeout(() => {
                        particleDiv.innerHTML += `${line}<br>`;
                    }, index * 200); // Timing for display
                });
            });

            // Fade out after a lifetime
            setTimeout(() => {
                particleDiv.style.opacity = '0'; // Fade out
                setTimeout(() => {
                    particleDiv.remove(); // Remove from DOM
                }, 500); // Wait for fade-out to complete
            }, particleLifetime); // Lifetime before removal
        }

        // Create a new particle every 500 milliseconds without exceeding the maximum allowed particles
        setInterval(() => {
            if (document.querySelectorAll('.codeParticle').length < maxParticles) {
                createCodeParticle(); // Spawn a new particle
            }
        }, 500); // Spawn a new particle every 500 milliseconds
    </script>
</body>
</html>

```
""".