Interactive Canvas animations: particles, 3D, WebGL for high-performance websites

Interactive backgrounds, particles, and 3D scenes are a trend, but implementing them through DOM or SVG hits a performance ceiling: 60 FPS holds only up to a hundred objects. Canvas, on the other hand, can render thousands of particles without lag — but only with the right architecture. For example, a client wanted a background of 3000 particles on React — DOM dropped FPS to 5. We rewrote it on Canvas with a particle pool and got stable 60 FPS on mobile.

We implement Canvas animations turnkey: from simple particles to WebGL scenes with shaders. Transparent development cost is calculated based on complexity. We'll estimate your project in one day — contact us for a consultation.

What problems we solve

Low performance with many objects

DOM animations start lagging at 100–200 elements. Canvas redraws everything in one pass, but requires manual memory management and object reuse. We optimize particle pools, avoid garbage collection, and fight N+1 drawing. We guarantee that after optimization the animation will run at 60 FPS on all target devices.

Blurry pixels on Retina displays

Standard canvas draws in CSS pixels — on Retina the image appears blurry. We multiply the size by devicePixelRatio and scale the context.

Complexity of integration with React/Vue

Simply using canvas causes hydration mismatch and state loss. We've wrapped the engine in useCanvas hooks with proper lifecycle management.

Uncontrolled memory in animations

Without proper object management, memory grows causing GC freezes. We use object pools and avoid allocations in the render loop.

What performance Canvas delivers

Canvas is 10–50 times faster than SVG on thousands of objects due to the absence of DOM overhead. We achieve stable 60 FPS through:

• requestAnimationFrame with auto-pause on inactive tabs
• Delta-time clamping (cap at 100 ms)
• Forced GC reduction through object reuse

Comparison Canvas vs SVG vs DOM animation:

Optimization for Retina and mobile devices is included in the cost.

How we do it: stack and examples

We use TypeScript, React 18, Three.js r150. Key patterns: Repository, BFF for particles, render loop with update/draw separation. The engine code is tree-shake-ready, allowing only needed modules in the final bundle.

Basic Canvas engine

// lib/canvas-engine.ts export interface AnimationContext { canvas: HTMLCanvasElement ctx: CanvasRenderingContext2D width: number height: number dpr: number // device pixel ratio dt: number // delta time in seconds } export type RenderFn = (context: AnimationContext) => void export class CanvasEngine { private canvas: HTMLCanvasElement private ctx: CanvasRenderingContext2D private dpr: number private rafId: number | null = null private lastTime: number = 0 private renderFn: RenderFn constructor(canvas: HTMLCanvasElement, renderFn: RenderFn) { this.canvas = canvas this.ctx = canvas.getContext('2d')! this.dpr = window.devicePixelRatio || 1 this.renderFn = renderFn this.resize() } resize() { const { canvas, dpr } = this const rect = canvas.getBoundingClientRect() canvas.width = rect.width * dpr canvas.height = rect.height * dpr this.ctx.scale(dpr, dpr) } start() { this.lastTime = performance.now() this.tick(this.lastTime) } stop() { if (this.rafId !== null) { cancelAnimationFrame(this.rafId) this.rafId = null } } private tick = (timestamp: number) => { const dt = Math.min((timestamp - this.lastTime) / 1000, 0.1) this.lastTime = timestamp const rect = this.canvas.getBoundingClientRect() this.renderFn({ canvas: this.canvas, ctx: this.ctx, width: rect.width, height: rect.height, dpr: this.dpr, dt, }) this.rafId = requestAnimationFrame(this.tick) } } 

React hook useCanvas

// hooks/useCanvas.ts import { useEffect, useRef } from 'react' import { CanvasEngine, RenderFn } from '../lib/canvas-engine' export function useCanvas(renderFn: RenderFn) { const canvasRef = useRef<HTMLCanvasElement>(null) const engineRef = useRef<CanvasEngine | null>(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const engine = new CanvasEngine(canvas, renderFn) engineRef.current = engine engine.start() const handleResize = () => engine.resize() window.addEventListener('resize', handleResize) return () => { engine.stop() window.removeEventListener('resize', handleResize) } }, [renderFn]) return canvasRef } 

Particle system with physics

// lib/particle-system.ts interface Particle { x: number y: number vx: number vy: number radius: number color: string life: number maxLife: number } export class ParticleSystem { private particles: Particle[] = [] private readonly maxParticles: number constructor(maxParticles = 500) { this.maxParticles = maxParticles } emit(x: number, y: number, count = 5) { for (let i = 0; i < count; i++) { if (this.particles.length >= this.maxParticles) break const angle = Math.random() * Math.PI * 2 const speed = 50 + Math.random() * 150 this.particles.push({ x, y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed - 100, radius: 2 + Math.random() * 4, color: `hsl(${200 + Math.random() * 60}, 80%, 60%)`, life: 1, maxLife: 0.8 + Math.random() * 0.8, }) } } update(dt: number) { const gravity = 300 this.particles = this.particles.filter(p => { p.x += p.vx * dt p.y += p.vy * dt p.vy += gravity * dt p.vx *= 0.99 p.life -= dt / p.maxLife return p.life > 0 }) } draw(ctx: CanvasRenderingContext2D) { for (const p of this.particles) { ctx.save() ctx.globalAlpha = p.life * p.life ctx.fillStyle = p.color ctx.beginPath() ctx.arc(p.x, p.y, p.radius * p.life, 0, Math.PI * 2) ctx.fill() ctx.restore() } } } 

Example component: ParticleCanvas — an interactive particle system with gravity, auto-emission, and mouse click.

Why Three.js is the standard for 3D animations on a website?

For complex 3D scenes on a website background, we use Three.js — it provides ready shaders, post-processing, and WebGL 2.0 compatibility. We write custom materials and animations, controlling memory through BufferGeometry.

// components/ThreeBackground.tsx 'use client' import { useEffect, useRef } from 'react' import * as THREE from 'three' export function ThreeBackground() { const mountRef = useRef<HTMLDivElement>(null) useEffect(() => { const mount = mountRef.current! const width = mount.clientWidth const height = mount.clientHeight const scene = new THREE.Scene() const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000) camera.position.z = 50 const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }) renderer.setSize(width, height) renderer.setPixelRatio(window.devicePixelRatio) mount.appendChild(renderer.domElement) const count = 3000 const positions = new Float32Array(count * 3) for (let i = 0; i < count * 3; i++) { positions[i] = (Math.random() - 0.5) * 200 } const geometry = new THREE.BufferGeometry() geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)) const material = new THREE.PointsMaterial({ size: 0.3, color: 0x3b82f6, transparent: true, opacity: 0.7, }) const points = new THREE.Points(geometry, material) scene.add(points) let rafId: number const animate = () => { rafId = requestAnimationFrame(animate) points.rotation.x += 0.0003 points.rotation.y += 0.0005 renderer.render(scene, camera) } animate() const handleResize = () => { const w = mount.clientWidth const h = mount.clientHeight camera.aspect = w / h camera.updateProjectionMatrix() renderer.setSize(w, h) } window.addEventListener('resize', handleResize) return () => { cancelAnimationFrame(rafId) window.removeEventListener('resize', handleResize) renderer.dispose() mount.removeChild(renderer.domElement) } }, []) return <div ref={mountRef} className="absolute inset-0 -z-10" /> } 

How do Canvas animations affect Core Web Vitals?

A properly designed Canvas animation does not degrade LCP, CLS, or INP. We use requestAnimationFrame and Suspense for lazy loading, so the animation starts only after the page becomes interactive, without slowing down the first render.

Process

1. Analysis — we study the design, performance requirements, and target devices.
2. Prototyping — create an MVP of the animation with basic parameters.
3. Implementation — write the engine with Repository patterns, integrate React bindings.
4. Optimization — reduce draw calls, add LOD, check Core Web Vitals.
5. Deployment — set up CI/CD, test on real devices.

Estimated timelines

What's included

• Source code (TS/React components, JSDoc documentation)
• Optimization for 60 FPS on target devices
• Adaptation for mobile and Retina
• Integration with your application (Next.js, Nuxt, CRA)
• Technical support for 2 weeks after delivery

Certified Three.js and WebGL specialists. Performance guarantee of 60 FPS. Order Canvas animation development at TrueTech and get stable 60 FPS on any device.