Interactive Hero with Animated Canvas Background

<section class="bg-slate-50 text-slate-900 font-sans antialiased min-h-screen flex flex-col relative overflow-hidden selection:bg-fuchsia-200 selection:text-fuchsia-900" style="font-family: 'Inter', sans-serif;">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&amp;display=swap" rel="stylesheet">

<canvas id="flow-canvas" class="absolute inset-0 z-0 w-full h-full"></canvas>

<main class="relative z-10 flex flex-col justify-between min-h-screen p-8 md:p-16 lg:p-24 max-w-[1800px] mx-auto w-full pointer-events-none">
        
        <!-- Top Section -->
        <div class="pointer-events-auto max-w-4xl mt-4 md:mt-12">
            <h1 class="text-3xl md:text-5xl lg:text-5xl leading-tight md:leading-tight lg:leading-tight tracking-tight">
                <span class="font-normal text-slate-900 flex items-center gap-3">
                    <iconify-icon icon="solar:server-square-linear" class="text-fuchsia-500 text-4xl" style="stroke-width: 1.5px;"></iconify-icon>
                    Scale beyond boundaries.
                </span>
                <span class="font-light text-slate-500 block mt-2">Handle massive data streams in real-time with absolute reliability, even during unexpected traffic spikes.</span>
            </h1>
        </div>

        <!-- Bottom Stats Section -->
        <div class="pointer-events-auto grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-8 mt-32 md:mt-auto pb-8">
            
            <div class="flex flex-col">
                <div class="text-5xl md:text-6xl lg:text-7xl font-normal tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500 w-fit">
                    2B+
                </div>
                <div class="text-sm md:text-base font-light text-slate-500 mt-3">
                    Records processed daily
                </div>
            </div>

            <div class="flex flex-col">
                <div class="text-5xl md:text-6xl lg:text-7xl font-normal tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500 w-fit">
                    100K+
                </div>
                <div class="text-sm md:text-base font-light text-slate-500 mt-3">
                    Active sessions
                </div>
            </div>

            <div class="flex flex-col">
                <div class="text-5xl md:text-6xl lg:text-7xl font-normal tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500 w-fit">
                    99.999%
                </div>
                <div class="text-sm md:text-base font-light text-slate-500 mt-3">
                    Reliability SLA
                </div>
            </div>

        </div>
    </main>

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script>
        const canvas = document.getElementById('flow-canvas');
        const ctx = canvas.getContext('2d');
        let width, height;
        let time = 0;
        
        // Interaction variables
        let mouseX = -1000;
        let mouseY = -1000;
        let targetMouseX = -1000;
        let targetMouseY = -1000;

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

        window.addEventListener('resize', resize);
        
        // Track mouse movement for interaction
        window.addEventListener('mousemove', (e) => {
            targetMouseX = e.clientX;
            targetMouseY = e.clientY;
        });
        
        // Reset when mouse leaves
        window.addEventListener('mouseleave', () => {
            targetMouseX = -1000;
            targetMouseY = -1000;
        });

        resize();

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

            // Smooth mouse interpolation
            mouseX += (targetMouseX - mouseX) * 0.08;
            mouseY += (targetMouseY - mouseY) * 0.08;

            // Light mode gradient
            const gradient = ctx.createLinearGradient(0, 0, width, 0);
            gradient.addColorStop(0, 'rgba(251, 113, 133, 0.5)'); // rose-400
            gradient.addColorStop(0.5, 'rgba(217, 70, 239, 0.5)'); // fuchsia-500
            gradient.addColorStop(1, 'rgba(99, 102, 241, 0.5)'); // indigo-500

            ctx.strokeStyle = gradient;
            ctx.globalCompositeOperation = 'multiply';

            const numLines = 85;
            const centerY = height * 0.65;

            for (let i = 0; i < numLines; i++) {
                ctx.beginPath();
                
                const z = Math.sin(i * 0.1 + time) * 0.5 + 0.5;
                ctx.lineWidth = 0.5 + z * 1.5;
                ctx.globalAlpha = 0.15 + z * 0.3;

                for (let x = 0; x <= width; x += 15) {
                    const nx = x / width;
                    
                    const wave1 = Math.sin(nx * 4 - time * 1.5 + i * 0.04) * 60 * nx;
                    const wave2 = Math.cos(nx * 2.5 + time * 0.8 - i * 0.06) * 120 * (1 - nx);
                    
                    const pinch = Math.pow(nx - 0.35, 2) * 3; 
                    const spread = 180 * pinch + 10;

                    const yOffset = wave1 + wave2;
                    let y = centerY + yOffset + (i - numLines / 2) * spread * 0.025;

                    // Interactive displacement logic
                    const dx = x - mouseX;
                    const dy = y - mouseY;
                    const distance = Math.sqrt(dx * dx + dy * dy);
                    const interactionRadius = 250;
                    
                    if (distance < interactionRadius) {
                        const force = Math.pow((interactionRadius - distance) / interactionRadius, 2);
                        y += (dy / distance) * force * 60; // Repel waves from cursor
                    }

                    if (x === 0) {
                        ctx.moveTo(x, y);
                    } else {
                        ctx.lineTo(x, y);
                    }
                }
                ctx.stroke();
            }

            requestAnimationFrame(draw);
        }

        draw();
    </script>
</section>