Hype AI Interactive Illustration

by oktaviardi pratama

HTML

<canvas id="fluidCanvas"></canvas>

CSS

body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #0d0d11;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        canvas {
            display: block;
            filter: blur(40px) contrast(20); /* Pure CSS Gooey/Liquid Meta-ball Effect */
        }body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #0d0d11;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        canvas {
            display: block;
            filter: blur(40px) contrast(20); /* Pure CSS Gooey/Liquid Meta-ball Effect */
        }

JavaScript

const canvas = document.getElementById('fluidCanvas');
        const ctx = canvas.getContext('2d');

        let width = canvas.width = window.innerWidth;
        let height = canvas.height = window.innerHeight;

        const points = [];
        const numPoints = 8;
        const baseRadius = Math.min(width, height) * 0.15;

        // Initialize organic moving nodes
        for (let i = 0; i < numPoints; i++) {
            points.push({
                x: Math.random() * width,
                y: Math.random() * height,
                vx: (Math.random() - 0.5) * 4,
                vy: (Math.random() - 0.5) * 4,
                radius: baseRadius * (0.8 + Math.random() * 0.5)
            });
        }

        // Interactive mouse node
        const mouse = { x: width / 2, y: height / 2, radius: baseRadius * 1.2 };
        window.addEventListener('mousemove', (e) => {
            mouse.x = e.clientX;
            mouse.y = e.clientY;
        });

        window.addEventListener('resize', () => {
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
        });

        function animate() {
            ctx.fillStyle = '#0d0d11';
            ctx.fillRect(0, 0, width, height);

            // Draw and blend AI gradients
            points.forEach((p, index) => {
                p.x += p.vx;
                p.y += p.vy;

                // Bounce boundaries
                if (p.x < 0 || p.x > width) p.vx *= -1;
                if (p.y < 0 || p.y > height) p.vy *= -1;

                // Create a trending fluid iridescent mesh look via radial gradients
                let gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.radius);
                if (index % 2 === 0) {
                    gradient.addColorStop(0, '#ff2a5f'); // Neon Pink
                    gradient.addColorStop(1, 'rgba(13, 13, 17, 0)');
                } else {
                  ...