I Built an Interactive 3D Tilt Card with Canvas Particles (No Libraries)

I wanted a small, self-contained demo for my dev profile that actually
shows some interactive skill — not just another static card. So I
built one combining three techniques, all in vanilla JS with zero
dependencies:

1. A canvas-based particle network background
2. A glassmorphic card that tilts in 3D based on mouse position
3. A typewriter effect cycling through role text

Here's how each piece works.

1. The particle network

The background is a <canvas> with ~70 particles drifting slowly
across the screen. Each particle bounces off the edges, and any two
particles within 120px of each other get a connecting line, with
opacity fading based on distance:

​

if (dist < 120) {
  ctx.strokeStyle = `rgba(91,140,255,${1 - dist / 120})`;
  ctx.beginPath();
  ctx.moveTo(a.x, a.y);
  ctx.lineTo(b.x, b.y);
  ctx.stroke();
}
​```



Nothing fancy — just `requestAnimationFrame` and basic distance checks — 
but it reads as a lot more polished than it is to build.

   2. The 3D tilt effect

This is pure CSS `transform: rotateX/rotateY`, driven by mouse position:

​

```javascript
document.addEventListener('mousemove', e => {
  const rx = (e.clientY / window.innerHeight - 0.5) * -14;
  const ry = (e.clientX / window.innerWidth - 0.5) * 14;
  card.style.transform = `rotateX(${rx}deg) rotateY(${ry}deg)`;
});
​```



The key CSS property making this look 3D (not just skewed) is 
`transform-style: preserve-3d` on the card, plus a `perspective` value 
on its parent container. Without perspective set on the parent, the 
rotation just looks flat and wrong.

   3. The typewriter effect

A small state machine that types out a string, pauses, deletes it, 
and moves to the next one in a list — no library, just `setTimeout` 
and two counters (`charIndex`, `roleIndex`) tracking position and 
direction.

## Why build this instead of just... not

Small interactive demos like this are genuinely useful to have on hand 
— for a portfolio, a personal site hero section, or just proving to 
yourself you understand the fundamentals (canvas rendering, CSS 3D 
transforms, animation timing) without pulling in GSAP or Three.js for 
something this simple.

Total size: one HTML file, ~60 lines of CSS, ~60 lines of JS. No 
dependencies.



I'm a full-stack developer based in Lagos, Nigeria, building products 
under the Easywise brand — you can see more of my work at 
[easywise.com.ng](https://easywise.com.ng).

Comments

[Frank]

This looks fantastic without any libraries! Did you implement a custom physics loop for the particle movement, or was