Gravitational Vortex — 3D Mesh Warp Animation

The Gravitational Vortex is a high-performance visual displacement effect that simulates the gravitational pull of a black hole on a geometric grid. Ideal for futuristic and scientific web interfaces, it creates a tactile sense of depth and distortion.

How It Works

This animation uses a dynamic mesh grid on an HTML5 Canvas. Each node in the grid has a “base” position and a set of displacement coordinates. As the mouse moves, nodes within the gravitational well calculate their distance from the center and apply an exponential warp force. We draw connecting lines between these nodes to create a warped wireframe mesh that stays fluid at 60FPS.

Use Cases

• Space and astrophysics-themed landing pages
• Interactive backgrounds for hi-tech admin panels
• High-concept hero sections for creative agencies
• Visualizations for gravitational physics or AI data models

How to Customize

• Warp Intensity: Modify the force * 150 multiplier in the Node.update() method to make the distortion deeper or shallower.
• Grid Density: Change the spacing variable (currently 40) to create a tighter or looser wireframe.
• Color Theme: Update ctx.strokeStyle to change the grid color to neon orange, deep blue, or glowing white.

Frequently Asked Questions

Is it responsive?

Yes. The simulation automatically detects window resizing and re-initializes the node grid to ensure the content stays full-bleed and perfectly aligned.

Can I add “matter” particles?

Yes! You can add a second array of “star” particles that get pulled into the center and “deleted” (reset) to simulate a complete accretion disk.

Does it use WebGL?

No. This implementation uses standard 2D Canvas context and highly optimized JS loops, ensuring maximum compatibility even on devices without full WebGL support.