Розробка Canvas-анімацій для сайту: частинки, 3D, WebGL

Інтерактивні фони, частинки та 3D-сцени — тренд, але реалізація через DOM або SVG впирається у продуктивність: 60 FPS тримаються лише до сотні об'єктів. Canvas же дозволяє рендерити тисячі частинок без лагів — але лише за правильної архітектури. Наприклад, клієнт хотів фон із 3000 частинок на React — DOM знизив FPS до 5. Переписали на Canvas з пулом частинок — отримали стабільні 60 FPS на мобільному.

Ми реалізуємо Canvas-анімації під ключ: від простих частинок до WebGL-сцен з шейдерами. Прозора вартість розробки розраховується виходячи зі складності. Оцінимо ваш проект за 1 день — зв'яжіться з нами для консультації.

Які проблеми вирішуємо

Низька продуктивність при великій кількості об'єктів

DOM-анімації гальмують вже на 100–200 елементах. Canvas перемальовує все за один прохід, але вимагає ручного управління пам'яттю та перевикористання об'єктів. Ми оптимізуємо пули частинок, уникаємо gc і боремося з N+1 відмальовкою. Гарантуємо, що після оптимізації анімація працюватиме на 60 FPS на всіх цільових пристроях.

Розмиті пікселі на Retina-дисплеях

Стандартний canvas малює в CSS-пікселях — на Retina зображення виходить розмитим. Ми множимо розмір на devicePixelRatio і масштабуємо контекст.

Складність інтеграції з React/Vue

Просте використання canvas викликає 'hydration mismatch' і втрату стану. Ми обгорнули двигун у хуки useCanvas з коректним управлінням життєвим циклом.

Неконтрольована пам'ять в анімаціях

Без грамотного управління об'єктами пам'ять зростає, викликаючи GC-фризи. Ми використовуємо об'єктні пули та уникаємо алокацій у render loop.

Яку продуктивність дає Canvas

Canvas у 10–50 разів швидше SVG на тисячах об'єктів завдяки відсутності DOM-накладних витрат. Ми досягаємо стабільних 60 FPS за рахунок:

• requestAnimationFrame з автоматичною паузою при неактивній вкладці
• Обмеження delta-time (кап 100 ms)
• Примусового скидання gc через перевикористання об'єктів

Порівняння Canvas vs SVG vs DOM-анімації:

Оптимізація під Retina та мобільні пристрої включена у вартість.

Як ми це робимо: стек та приклади

Використовуємо TypeScript, React 18, Three.js r150. Ключові патерни: Repository, BFF для частинок, render loop з розділенням на update/draw. Код двигуна tree-shake-ready, що дозволяє включати лише потрібні модулі у фінальний бандл.

Базовий Canvas-двигун

// lib/canvas-engine.ts export interface AnimationContext { canvas: HTMLCanvasElement ctx: CanvasRenderingContext2D width: number height: number dpr: number // device pixel ratio dt: number // delta time в секундах } 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-хук 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 } 

Система частинок з фізикою

// 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() } } } 

Приклад компонента: ParticleCanvas — інтерактивна система частинок з гравітацією, автоматичною емісією та кліком миші.

Чому Three.js — стандарт для 3D-анімацій на сайті?

Для складних 3D-сцен на фоні сайту використовуємо Three.js — він дає готові шейдери, постпроцесинг і сумісність з WebGL 2.0. Ми пишемо кастомні матеріали та анімації, контролюючи пам'ять через 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" /> } 

Як Canvas-анімації впливають на Core Web Vitals?

Правильно спроектована Canvas-анімація не погіршує LCP, CLS та INP. Ми використовуємо requestAnimationFrame і Suspense для лінивого завантаження, щоб не блокувати основний потік. В результаті анімація стартує лише після інтерактиву сторінки, не сповільнюючи перший рендер.

Процес роботи

1. Аналітика — вивчаємо дизайн, вимоги до продуктивності, цільові пристрої.
2. Прототипування — створюємо MVP анімації з базовими параметрами.
3. Реалізація — пишемо двигун з патернами Repository, підключаємо React-обв'язку.
4. Оптимізація — ріжемо draw calls, додаємо LOD, перевіряємо Core Web Vitals.
5. Деплой — налаштовуємо CI/CD, тести на реальних пристроях.

Терміни орієнтовно

Що входить у послугу

• Вихідний код (TS/React-компоненти, документація JSDoc)
• Оптимізація під 60 FPS на цільових пристроях
• Адаптація під мобільні та Retina
• Інтеграція з вашим додатком (Next.js, Nuxt, CRA)
• Технічна підтримка 2 тижні після здачі

Сертифіковані спеціалісти Three.js та WebGL. Гарантія продуктивності 60 FPS. Замовте розробку Canvas-анімації у насі отримайте стабільні 60 FPS на будь-яких пристроях.