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

Easywise — Sun, 19 Jul 2026 04:14:31 +0000

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:

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

Here's how each piece works.

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).

Hey DEV, I'm Easywise, building full-stack products solo out of Lagos 👋

Easywise — Mon, 13 Jul 2026 08:20:20 +0000

I'm a self-taught full-stack developer based in Lagos, Nigeria, building
products under the Easywise brand — handling everything from backend
and database design to polished frontend UI, solo, end to end.

What I work with: React, React Native, Supabase, PostgreSQL, Expo, Next.js

A few things I've built recently:

🛒 EasyGet — a multi-role marketplace app (customers, shop owners, riders) with real-time orders, chat, and even a diaspora feature so Nigerians abroad can send groceries home
🏠 EasyHomes — a property discovery platform for Lagos, with an interactive map and agent dashboards
💱 EasyRates — a live currency tracker comparing official vs black market exchange rates

I also take on freelance web and mobile work. You can check out
everything I'm building at easywise.com.ng.

Would love to connect with other devs building in Nigeria/Africa, or
anyone working on marketplace/fintech products. Say hi! 👋

DEV Community: Easywise

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

Hey DEV, I'm Easywise, building full-stack products solo out of Lagos 👋