VORTEX is a free, copy-paste ready interactive canvas JavaScript project built with
pure vanilla HTML, CSS, and the native Canvas API — no frameworks, no libraries, no npm.
It features 800 reactive particles that respond to your cursor position in real time,
3 liquid metaballs with organic morphing shapes that chase your mouse,
a custom neon cursor with CSS mix-blend-mode: difference glow inversion,
gradient glow text using CSS -webkit-background-clip, and neon sweep-effect buttons —
all running at 60fps via requestAnimationFrame.
This is one of the most advanced free frontend canvas projects on Coodeverse. The JavaScript demonstrates real-world Canvas API patterns: a particle system with physics-based cursor interaction, blob morphing via sine wave deformation, force-vector calculations, motion blur with semi-transparent fill layers, and a resize-responsive canvas. Perfect for learning Canvas API, impressing in portfolio interviews, or dropping directly into a production website hero section.
Each Particle object stores position, velocity, and size. On every animation frame,
it calculates its distance from the mouse using Math.sqrt(dx*dx + dy*dy). When within
100px, a force proportional to 80 / distance accelerates the particle toward the cursor.
Velocity decays at 98% per frame (speedX *= 0.98) giving a natural friction feel.
Particles bounce off canvas edges by inverting velocity. The Blob class uses the same
force system but adds a Math.sin(i * 8 + angle) offset to each point of its circular
path, creating the organic liquid morphing shape.
Change the color scheme by editing the CSS variables: --accent: #00ffff for the
cyan particle/cursor/button color and --purple: #9d4edd for the particle fill and
glow gradient. Adjust particle count by changing 800 in the init loop. Change
blob count by modifying the 3 in for (let i = 0; i < 3; i++).
Increase force range by changing 100 in the if (distance < 100) check.
VORTEX is ideal as a website hero section background, a portfolio project showcase, a tech startup landing page, a developer interview project, a creative agency website effect, a game menu background, or a Canvas API learning exercise. The futuristic neon-on-dark aesthetic fits AI products, SaaS dashboards, fintech, gaming, and cybersecurity brands especially well.
Released under Creative Commons Attribution 4.0 International (CC BY 4.0). Free for personal and commercial use with attribution to Coodeverse.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>VORTEX — Interactive Canvas Landing</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0a0619;
--accent: #00ffff;
--purple: #9d4edd;
--text: #e0d4ff;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
font-family: 'Inter', sans-serif;
background: var(--bg);
color: var(--text);
overflow-x: hidden;
cursor: none;
}
canvas {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 1;
pointer-events: none;
}
.cursor {
position: fixed;
width: 30px; height: 30px;
border: 2px solid var(--accent);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: all 0.1s ease;
mix-blend-mode: difference;
}
.cursor::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 8px; height: 8px;
background: var(--accent);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.hero {
position: relative;
z-index: 10;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 2rem;
}
h1 {
font-family: 'Orbitron', sans-serif;
font-size: 8vw;
font-weight: 900;
letter-spacing: 6px;
background: linear-gradient(90deg, #fff, var(--accent), var(--purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 40px rgba(0,255,255,0.5);
}
p {
font-size: 1.6rem;
max-width: 700px;
margin: 2rem auto;
opacity: 0.9;
}
.btn {
padding: 18px 50px;
margin: 1rem;
font-size: 1.3rem;
font-weight: 700;
border-radius: 50px;
background: transparent;
color: var(--accent);
border: 2px solid var(--accent);
cursor: none;
transition: all 0.4s;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(0,255,255,0.2), transparent);
transition: 0.7s;
}
.btn:hover::before { left: 100%; }
.btn:hover {
background: var(--accent);
color: #000;
box-shadow: 0 0 40px rgba(0,255,255,0.6);
}
.section {
padding: 150px 5%;
text-align: center;
position: relative;
z-index: 10;
}
.glow-text {
font-size: 4rem;
font-weight: 700;
background: linear-gradient(45deg, var(--accent), var(--purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (max-width: 768px) {
h1 { font-size: 12vw; }
.btn { display: block; width: 80%; margin: 1rem auto; }
}
</style>
</head>
<body>
<div class="cursor"></div>
<canvas id="canvas"></canvas>
<section class="hero">
<div>
<h1>VORTEX</h1>
<p>Move your cursor. Feel the future.</p>
<div>
<button class="btn">Enter Experience</button>
<button class="btn">Watch Demo</button>
</div>
</div>
</section>
<section class="section">
<h2 class="glow-text">Liquid Metal Physics</h2>
<p>The blob follows your every move — powered by real-time canvas metaballs.</p>
</section>
<section class="section" style="background:#000;">
<h2 class="glow-text">Particle Universe</h2>
<p>10,000+ particles react to your cursor in real time.</p>
</section>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const cursor = document.querySelector('.cursor');
let mouse = { x: canvas.width / 2, y: canvas.height / 2 };
let particles = [];
let blobs = [];
// Custom cursor
document.addEventListener('mousemove', (e) => {
mouse.x = e.clientX;
mouse.y = e.clientY;
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
});
// Liquid Blob Class
class Blob {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.radius = 80 + Math.random() * 60;
this.speed = 0.01 + Math.random() * 0.02;
this.angle = Math.random() * Math.PI * 2;
}
update() {
const dx = mouse.x - this.x;
const dy = mouse.y - this.y;
const distance = Math.sqrt(dx*dx + dy*dy);
const force = Math.min(300 / (distance * distance), 1);
this.x += dx * force * 0.5;
this.y += dy * force * 0.5;
this.angle += this.speed;
}
draw() {
ctx.beginPath();
for (let i = 0; i < Math.PI * 2; i += 0.1) {
const offset = Math.sin(i * 8 + this.angle) * 20;
const x = this.x + Math.cos(i) * (this.radius + offset);
const y = this.y + Math.sin(i) * (this.radius + offset);
i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
}
ctx.fillStyle = 'rgba(0, 255, 255, 0.15)';
ctx.fill();
ctx.strokeStyle = 'rgba(0, 255, 255, 0.6)';
ctx.lineWidth = 3;
ctx.stroke();
}
}
// Particle Class
class Particle {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 3 + 1;
this.speedX = Math.random() * 2 - 1;
this.speedY = Math.random() * 2 - 1;
}
update() {
const dx = mouse.x - this.x;
const dy = mouse.y - this.y;
const distance = Math.sqrt(dx*dx + dy*dy);
const force = 80 / distance;
if (distance < 100) {
this.speedX += dx * force * 0.02;
this.speedY += dy * force * 0.02;
}
this.x += this.speedX;
this.y += this.speedY;
this.speedX *= 0.98;
this.speedY *= 0.98;
if (this.x < 0 || this.x > canvas.width) this.speedX *= -1;
if (this.y < 0 || this.y > canvas.height) this.speedY *= -1;
}
draw() {
ctx.fillStyle = `rgba(157, 78, 221, 0.8)`;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
// Init
for (let i = 0; i < 3; i++) blobs.push(new Blob());
for (let i = 0; i < 800; i++) particles.push(new Particle());
// Animation Loop
function animate() {
ctx.fillStyle = 'rgba(10, 6, 25, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
blobs.forEach(blob => { blob.update(); blob.draw(); });
particles.forEach(p => { p.update(); p.draw(); });
requestAnimationFrame(animate);
}
animate();
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
</script>
</body>
</html>
Common questions about VORTEX — the free interactive canvas particles JavaScript project.
Yes — 100% free under Creative Commons Attribution 4.0. No sign-up, no payment. Click Download Project and use it in any personal or commercial project with attribution to Coodeverse.
VORTEX uses the HTML5 Canvas API with vanilla JavaScript. 800 Particle objects track mouse position — when within 100px, a force vector accelerates each particle toward the cursor. Three Blob objects use Math.sin deformation on their circular path for liquid morphing. The requestAnimationFrame loop runs at 60fps with semi-transparent fill layers creating motion blur trails.
Download the VORTEX project. Copy the canvas element, the Particle and Blob classes, and the animate() function into your HTML file. Add the mousemove event listener to track coordinates. Set the canvas to position:fixed; z-index:1; pointer-events:none so it becomes a background layer. No npm or frameworks required.
The .cursor div uses position:fixed and follows the mouse via JavaScript mousemove. mix-blend-mode: difference inverts colors beneath the cursor, creating a neon glow effect on any background. The inner dot is a ::after pseudo-element. The transition: 0.1s adds a smooth trailing lag effect.
Edit the CSS variables: --accent: #00ffff for the cyan color and --purple: #9d4edd for the particle fill. Change the particle count by editing 800 in the init loop. Modify blob count by changing 3 in its init loop. Adjust cursor interaction range by editing 100 in if (distance < 100).
All modern browsers: Chrome, Firefox, Safari, Edge, and Opera. The requestAnimationFrame API is universally supported. VORTEX works without any polyfills, build tools, or transpilation — just open the HTML file and it runs.
Browse the full collection at coodeverse.com/projects — Cosmos Star Animation, Particle Fireworks, 3D Portfolio Globe, Holographic Login, Gold Circuit Background, Luxury Business Card and more. All 100% free with complete source code.