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:
-
requestAnimationFramewith 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:
| Characteristic | Canvas | SVG | DOM animation |
|---|---|---|---|
| Max objects | 50,000+ | 1,000 | 500 |
| Interactivity | Custom system | Event-based | Event-based |
| Transformations | Custom | CSS properties | CSS properties |
| Retina support | Via DPR | Automatic | Automatic |
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.
More on shaders
For non-standard effects (glow, masks, waves) we write custom GLSL shaders. They run on the GPU, saving CPU resources and boosting FPS. Shaders are integrated via Three.js ShaderMaterial or native WebGL.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
- Analysis — we study the design, performance requirements, and target devices.
- Prototyping — create an MVP of the animation with basic parameters.
- Implementation — write the engine with Repository patterns, integrate React bindings.
- Optimization — reduce draw calls, add LOD, check Core Web Vitals.
- Deployment — set up CI/CD, test on real devices.
Estimated timelines
| Animation type | Timeline |
|---|---|
| Simple particles / waves | 1–2 days |
| Interactive system (physics) | 3–5 days |
| 3D scene with shaders | 1–2 weeks |
| Complex project (animation + business logic) | 2–3 weeks |
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.