Interactive Vector Flow Field: Dynamic Magnetic Grid Animation

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Vector Flow Field</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
        }

body {
            background-color: #050507;
            color: #ffffff;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
        }

#vectorCanvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

.interface {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 30px;
        }

.top-bar {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

.brand-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }

.logo-mark {
            width: 30px;
            height: 30px;
            border: 2px solid #00f0ff;
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

.logo-mark::after {
            content: '';
            width: 10px;
            height: 10px;
            background-color: #ff003c;
            border-radius: 50%;
            box-shadow: 0 0 10px #ff003c;
        }

.title-block h1 {
            font-size: 1.2rem;
            font-weight: 700;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: #ffffff;
            margin-bottom: 4px;
        }

.title-block p {
            font-size: 0.7rem;
            color: #00f0ff;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

.status-panel {
            background: rgba(10, 10, 15, 0.7);
            border: 1px solid rgba(0, 240, 255, 0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 20px;
            border-radius: 8px;
            min-width: 250px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

.status-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

.status-row:last-child {
            margin-bottom: 0;
        }

.status-label {
            font-size: 0.75rem;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.status-value {
            font-size: 0.9rem;
            color: #e5e7eb;
            font-weight: 600;
        }

.highlight {
            color: #00f0ff;
            text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
        }

.bottom-bar {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }

.coord-display {
            font-size: 0.85rem;
            color: #4b5563;
            letter-spacing: 2px;
        }

.coord-display span {
            color: #ff003c;
        }

.scale-bar {
            width: 200px;
            height: 2px;
            background: linear-gradient(90deg, #00f0ff, transparent, #ff003c);
            position: relative;
        }

.scale-bar::before, .scale-bar::after {
            content: '';
            position: absolute;
            top: -4px;
            width: 2px;
            height: 10px;
            background: #ffffff;
        }

.scale-bar::before { left: 0; }
        .scale-bar::after { right: 0; }

</style>
</head>
<body>

<div class="interface">
        <div class="top-bar">
            <div class="brand-container">
                <div class="logo-mark"></div>
                <div class="title-block">
                    <h1>Vector Flow</h1>
                    <p>Magnetic Grid Topology</p>
                </div>
            </div>
            
            <div class="status-panel">
                <div class="status-row">
                    <span class="status-label">Grid Density</span>
                    <span class="status-value" id="density-val">0</span>
                </div>
                <div class="status-row">
                    <span class="status-label">Field Tension</span>
                    <span class="status-value highlight" id="tension-val">0.00%</span>
                </div>
                <div class="status-row">
                    <span class="status-label">Alignment</span>
                    <span class="status-value" id="align-val">0.00°</span>
                </div>
            </div>
        </div>

let width, height;
        let points = [];
        const spacing = 35;
        
        let mouse = { x: -1000, y: -1000, targetX: -1000, targetY: -1000 };
        let time = 0;
        let globalTension = 0;
        let globalAlignment = 0;

function init() {
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
            points = [];

for (let x = spacing / 2; x < width; x += spacing) {
                for (let y = spacing / 2; y < height; y += spacing) {
                    points.push({ x, y, baseX: x, baseY: y });
                }
            }
            densityVal.textContent = points.length;
        }

window.addEventListener('resize', init);

window.addEventListener('mousemove', (e) => {
            mouse.targetX = e.clientX;
            mouse.targetY = e.clientY;
        });

window.addEventListener('mouseleave', () => {
            mouse.targetX = width / 2;
            mouse.targetY = height / 2;
        });

init();
        mouse.targetX = width / 2;
        mouse.targetY = height / 2;
        mouse.x = width / 2;
        mouse.y = height / 2;

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

mouse.x += (mouse.targetX - mouse.x) * 0.15;
            mouse.y += (mouse.targetY - mouse.y) * 0.15;
            
            time += 0.02;
            let totalTension = 0;
            let totalAngle = 0;

for (let i = 0; i < points.length; i++) {
                const p = points[i];
                
                const dx = mouse.x - p.x;
                const dy = mouse.y - p.y;
                const dist = Math.sqrt(dx * dx + dy * dy);
                
                const ambientAngle = Math.sin(time + p.x * 0.005 + p.y * 0.005) * Math.PI;
                let angle = ambientAngle;
                
                let lineLength = 6;
                let strokeAlpha = 0.2;
                let hue = 220;
                let lightness = 30;

if (dist < 400) {
                    const influence = 1 - (dist / 400);
                    const mouseAngle = Math.atan2(dy, dx);
                    
                    angle = ambientAngle * (1 - influence) + mouseAngle * influence;
                    lineLength = 6 + (influence * 24);
                    strokeAlpha = 0.2 + (influence * 0.8);
                    
                    hue = 190 - (influence * 190);
                    if (hue < 0) hue += 360; 
                    
                    lightness = 30 + (influence * 40);
                    totalTension += influence;
                }

totalAngle += angle;

ctx.save();
                ctx.translate(p.x, p.y);
                ctx.rotate(angle);
                
                ctx.beginPath();
                ctx.moveTo(-lineLength / 2, 0);
                ctx.lineTo(lineLength / 2, 0);
                
                ctx.strokeStyle = `hsla(${hue}, 100%, ${lightness}%, ${strokeAlpha})`;
                ctx.lineWidth = 2;
                ctx.lineCap = 'round';
                ctx.stroke();
                
                ctx.beginPath();
                ctx.arc(lineLength / 2, 0, 1.5, 0, Math.PI * 2);
                ctx.fillStyle = `hsla(${hue}, 100%, ${lightness + 20}%, ${strokeAlpha})`;
                ctx.fill();

ctx.restore();
            }

if (points.length > 0) {
                globalTension += ((totalTension / points.length) * 100 - globalTension) * 0.1;
                globalAlignment += ((totalAngle / points.length) - globalAlignment) * 0.1;

tensionVal.textContent = `${globalTension.toFixed(2)}%`;
                alignVal.textContent = `${(globalAlignment * (180 / Math.PI)).toFixed(2)}°`;
                displayX.textContent = mouse.x.toFixed(0).padStart(4, '0');
                displayY.textContent = mouse.y.toFixed(0).padStart(4, '0');
            }

requestAnimationFrame(animate);
        }

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

Interactive Vector Flow Field: Dynamic Magnetic Grid Animation

You may like these posts :

Write Your Comment