Canvas Text

text

Dynamic canvas pixel particle text with physics based mouse interaction.

#text#canvas#particles#interactive

Live Interactive Preview

Interactive Canvas Particle Text

Component Source Code

Select language in the dropdown

CanvasText.tsx

1'use client';
2
3import React, { useEffect, useRef } from 'react';
4
5export default function CanvasText() {
6  const canvasRef = useRef<HTMLCanvasElement>(null);
7
8  useEffect(() => {
9    const canvas = canvasRef.current;
10    if (!canvas) return;
11    const ctx = canvas.getContext('2d');
12    if (!ctx) return;
13
14    let animId: number;
15    let particles: { x: number; y: number; originX: number; originY: number; vx: number; vy: number; color: string }[] = [];
16
17    const text = 'AURENZA';
18    canvas.width = 320;
19    canvas.height = 120;
20
21    ctx.font = 'bold 44px sans-serif';
22    ctx.textAlign = 'center';
23    ctx.textBaseline = 'middle';
24    ctx.fillStyle = '#ffffff';
25    ctx.fillText(text, canvas.width / 2, canvas.height / 2);
26
27    const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
28    const data = imgData.data;
29    particles = [];
30
31    for (let y = 0; y < canvas.height; y += 4) {
32      for (let x = 0; x < canvas.width; x += 4) {
33        const idx = (y * canvas.width + x) * 4;
34        if (data[idx + 3] > 128) {
35          const colors = ['#38bdf8', '#818cf8', '#c084fc', '#f472b6'];
36          particles.push({
37            x: Math.random() * canvas.width,
38            y: Math.random() * canvas.height,
39            originX: x,
40            originY: y,
41            vx: 0,
42            vy: 0,
43            color: colors[Math.floor(Math.random() * colors.length)]
44          });
45        }
46      }
47    }
48
49    const animate = () => {
50      ctx.clearRect(0, 0, canvas.width, canvas.height);
51      particles.forEach((p) => {
52        const dx = p.originX - p.x;
53        const dy = p.originY - p.y;
54        p.vx += dx * 0.04;
55        p.vy += dy * 0.04;
56        p.vx *= 0.85;
57        p.vy *= 0.85;
58        p.x += p.vx;
59        p.y += p.vy;
60
61        ctx.fillStyle = p.color;
62        ctx.fillRect(p.x, p.y, 2.5, 2.5);
63      });
64      animId = requestAnimationFrame(animate);
65    };
66
67    animate();
68
69    return () => cancelAnimationFrame(animId);
70  }, []);
71
72  return (
73    <div className="flex flex-col items-center justify-center p-4">
74      <canvas ref={canvasRef} className="max-w-full rounded-xl bg-slate-950 shadow-inner" />
75      <span className="mt-2 text-[11px] font-mono text-slate-400">Interactive Canvas Particle Text</span>
76    </div>
77  );
78}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/text/CanvasText.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import CanvasText from '@/components/text/CanvasText';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <CanvasText />
7    </main>
8  );
9}