Particle Text Animation: The Ultimate Guide for 2025

				
					    <script type="module">
        // Initialize Firebase variables (required by the environment, even if not used for this app)
        const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
        const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
        const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;

        // --- Canvas and Particle Logic ---
        const canvas = document.getElementById('particleCanvas');
        const ctx = canvas.getContext('2d');
        const textInput = document.getElementById('textInput');
        const animationTypeSelect = document.getElementById('animationType');
        const animateButton = document.getElementById('animateButton');
        const messageBox = document.getElementById('messageBox');

        let particles = [];
        const particleDensity = 5; // Reduced from 10 to 5 for more particles, improving clarity
        const particleColor = 'rgba(255, 0, 255, 0.9)'; // Slightly increased alpha for more solid look
        const particleGlow = 10; // Slightly reduced glow to make individual particles sharper
        const attractionStrength = 0.05; // How strongly particles move towards target
        const friction = 0.9; // Dampens particle velocity
        const maxVelocity = 10; // Max speed for explosion

        // Hidden canvas for text rendering
        const hiddenCanvas = document.createElement('canvas');
        const hiddenCtx = hiddenCanvas.getContext('2d');
        const FONT_SIZE = 120; // Base font size for text
        const LINE_HEIGHT = FONT_SIZE * 1.2; // Line height for wrapped text

        function showMessage(message, duration = 2000) {
            messageBox.textContent = message;
            messageBox.style.display = 'block';
            setTimeout(() => {
                messageBox.style.display = 'none';
            }, duration);
        }

        function resizeCanvas() {
            // Set canvas size dynamically based on container or fixed size
            const containerWidth = canvas.parentElement.clientWidth;
            canvas.width = Math.min(containerWidth, 700); // Max width 700px
            // Canvas height will be adjusted based on text content in createParticlesFromText
            // For now, keep a default height or calculate based on expected lines
            canvas.height = 200; // This will be adjusted later based on wrapped text height

            // Re-create particles on resize to adjust to new canvas dimensions
            if (textInput.value) {
                particles = createParticlesFromText(textInput.value, animationTypeSelect.value);
            }
        }

        class Particle {
            constructor(x, y, targetX, targetY, animationMode) {
                this.x = x;
                this.y = y;
                this.targetX = targetX;
                this.targetY = targetY;
                this.vx = 0;
                this.vy = 0;
                this.radius = Math.random() * 1.8 + 0.7; // Slightly larger particles for better visibility
                this.alpha = 0; // Start invisible for fade-in
                this.color = particleColor; // Current color

                // Initial setup based on animation mode
                if (animationMode === 'wave') {
                    this.x = -Math.random() * canvas.width; // Start far left
                    this.y = Math.random() * canvas.height;
                    this.vx = Math.random() * 5 + 1; // Initial rightward push
                    this.vy = (Math.random() - 0.5) * 2; // Slight vertical drift
                } else if (animationMode === 'swirl') {
                    // Start further out from target for swirling
                    const angle = Math.random() * Math.PI * 2;
                    const distance = Math.random() * 300 + 100; // Start 100-400px away
                    this.x = this.targetX + Math.cos(angle) * distance;
                    this.y = this.targetY + Math.sin(angle) * distance;
                } else { // 'explode' mode
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                }
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.shadowColor = this.color;
                ctx.shadowBlur = particleGlow;
                ctx.globalAlpha = this.alpha; // Apply alpha for fade-in/out
                ctx.fill();
            }

            update(animationMode) {
                const dx = this.targetX - this.x;
                const dy = this.targetY - this.y;
                const distance = Math.sqrt(dx * dx + dy * dy);

                if (animationMode === 'explode') {
                    // Attraction force towards target
                    this.vx += dx * attractionStrength;
                    this.vy += dy * attractionStrength;

                    this.vx *= friction;
                    this.vy *= friction;

                    // Limit velocity
                    if (Math.abs(this.vx) > maxVelocity) this.vx = Math.sign(this.vx) * maxVelocity;
                    if (Math.abs(this.vy) > maxVelocity) this.vy = Math.sign(this.vy) * maxVelocity;

                    this.x += this.vx;
                    this.y += this.vy;

                    // Fade in particles when they are close to their target
                    if (distance < 50) { // Start fading in when close
                        this.alpha = Math.min(1, this.alpha + 0.05);
                    } else {
                        this.alpha = Math.max(0, this.alpha - 0.02); // Fade out if far
                    }
                } else if (animationMode === 'wave') {
                    // Stronger attraction in Y, weaker in X for flow
                    this.vx += dx * attractionStrength * 0.05; // Gentle horizontal pull
                    this.vy += dy * attractionStrength * 0.2; // Stronger vertical pull

                    // Add a subtle wave-like motion
                    this.x += Math.sin(this.y * 0.05 + Date.now() * 0.001) * 0.5;

                    this.vx *= friction * 0.98; // Less friction for continuous flow
                    this.vy *= friction * 0.95;

                    this.x += this.vx;
                    this.y += this.vy;

                    // Fade in as they approach target
                    if (distance < 100) {
                        this.alpha = Math.min(1, this.alpha + 0.03);
                    } else {
                        this.alpha = Math.max(0, this.alpha - 0.01);
                    }
                } else if (animationMode === 'swirl') {
                    const angle = Math.atan2(dy, dx);
                    const swirlSpeed = 0.1; // How fast they orbit

                    // Apply a tangential force for swirling
                    this.vx += -Math.sin(angle) * swirlSpeed * (distance / 100); // Stronger swirl further out
                    this.vy += Math.cos(angle) * swirlSpeed * (distance / 100);

                    // Apply a radial attraction force to pull them inwards
                    this.vx += dx * attractionStrength * 0.02;
                    this.vy += dy * attractionStrength * 0.02;

                    this.vx *= friction;
                    this.vy *= friction;

                    this.x += this.vx;
                    this.y += this.vy;

                    // Fade in as they settle
                    if (distance < 30) {
                        this.alpha = Math.min(1, this.alpha + 0.05);
                    } else {
                        this.alpha = Math.max(0, this.alpha - 0.02);
                    }
                }
            }

            // Method for explosion (only used by 'explode' mode initially)
            explode() {
                this.vx = (Math.random() - 0.5) * (maxVelocity * 2); // Random initial velocity
                this.vy = (Math.random() - 0.5) * (maxVelocity * 2);
                this.alpha = 1; // Fully visible during explosion
            }
        }

        // Helper function to wrap text
        function wrapText(context, text, maxWidth) {
            const words = text.split(' ');
            let lines = [];
            let currentLine = words[0] || '';

            for (let i = 1; i < words.length; i++) {
                const word = words[i];
                const testLine = currentLine + ' ' + word;
                const metrics = context.measureText(testLine);
                const testWidth = metrics.width;

                if (testWidth > maxWidth && i > 0) {
                    lines.push(currentLine);
                    currentLine = word;
                } else {
                    currentLine = testLine;
                }
            }
            lines.push(currentLine);
            return lines;
        }

        function createParticlesFromText(text, animationMode) {
            hiddenCtx.font = `bold ${FONT_SIZE}px Inter`;
            hiddenCtx.textAlign = 'center';
            hiddenCtx.textBaseline = 'middle';
            hiddenCtx.fillStyle = 'white';

            const lines = wrapText(hiddenCtx, text, canvas.width - 40); // 40px padding
            const totalTextHeight = lines.length * LINE_HEIGHT;

            // Adjust canvas height to fit wrapped text
            canvas.height = Math.max(200, totalTextHeight + FONT_SIZE); // Ensure minimum height and add some padding

            hiddenCanvas.width = canvas.width;
            hiddenCanvas.height = canvas.height;
            hiddenCtx.clearRect(0, 0, hiddenCanvas.width, hiddenCanvas.height);
            hiddenCtx.font = `bold ${FONT_SIZE}px Inter`; // Re-set font after canvas resize
            hiddenCtx.textAlign = 'center';
            hiddenCtx.textBaseline = 'middle';
            hiddenCtx.fillStyle = 'white';


            const newParticles = [];
            const startYOffset = (canvas.height - totalTextHeight) / 2; // Vertically center the block of text

            lines.forEach((line, lineIndex) => {
                const lineY = startYOffset + (lineIndex * LINE_HEIGHT) + (FONT_SIZE / 2); // Center of the line

                hiddenCtx.fillText(line, hiddenCanvas.width / 2, lineY);

                const imageData = hiddenCtx.getImageData(0, 0, hiddenCanvas.width, hiddenCanvas.height);
                const data = imageData.data;

                // Iterate over pixels to create particles
                for (let y = 0; y < hiddenCanvas.height; y += particleDensity) {
                    for (let x = 0; x < hiddenCanvas.width; x += particleDensity) {
                        const alpha = data[((y * hiddenCanvas.width + x) * 4) + 3]; // Get alpha value of pixel
                        if (alpha > 0) { // If pixel is not transparent (part of the text)
                            // Initial particle position based on animation mode
                            let startX = x;
                            let startY = y;

                            if (animationMode === 'explode') {
                                startX = Math.random() * canvas.width;
                                startY = Math.random() * canvas.height;
                            } else if (animationMode === 'wave') {
                                startX = -50; // Start off-screen left
                                startY = y + (Math.random() - 0.5) * 50; // Slight vertical randomness
                            } else if (animationMode === 'swirl') {
                                 // Start particles further from target for swirl effect
                                const randomAngle = Math.random() * Math.PI * 2;
                                const randomDistance = Math.random() * 200 + 100; // 100-300px away
                                startX = x + Math.cos(randomAngle) * randomDistance;
                                startY = y + Math.sin(randomAngle) * randomDistance;
                            }

                            newParticles.push(new Particle(startX, startY, x, y, animationMode));
                        }
                    }
                }
                // Clear the hidden canvas for the next line to avoid overlapping pixel data
                hiddenCtx.clearRect(0, 0, hiddenCanvas.width, hiddenCanvas.height);
            });

            return newParticles;
        }

        function animate() {
            requestAnimationFrame(animate);
            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the main canvas

            const currentAnimationMode = animationTypeSelect.value;
            particles.forEach(particle => {
                particle.update(currentAnimationMode);
                particle.draw();
            });
        }

        animateButton.addEventListener('click', () => {
            const text = textInput.value.trim();
            if (!text) {
                showMessage("Please enter some text!");
                return;
            }
            const selectedAnimationType = animationTypeSelect.value;

            // If there are existing particles, make them explode (if in explode mode) or just transition
            if (particles.length > 0 && selectedAnimationType === 'explode') {
                particles.forEach(p => p.explode());
                // Give some time for explosion before new particles reassemble
                setTimeout(() => {
                    particles = createParticlesFromText(text, selectedAnimationType);
                }, 500); // Wait 0.5 seconds for explosion
            } else {
                // For other modes, or if no particles, just create new ones directly
                particles = createParticlesFromText(text, selectedAnimationType);
            }
        });

        // Initial setup
        window.onload = function() {
            resizeCanvas();
            particles = createParticlesFromText(textInput.value, animationTypeSelect.value); // Create initial particles from default text
            animate(); // Start the animation loop
        };

        window.addEventListener('resize', resizeCanvas);
    </script>