peikarband/.cursor/plans/wordpress_dynamic_animation_271093ca.plan.md

name, overview, todos

name	overview	todos
WordPress Dynamic Animation	پیاده‌سازی انیمیشن پیشرفته برای بخش وردپرس با Canvas: لوگوی وردپرس با چرخ‌دنده‌های چرخان، ذرات نورانی، حلقه‌های انیمیت‌شده و افکت‌های glow سه‌بعدی	id content status create-canvas-script ایجاد wordpress_canvas_script با سیستم particle، چرخ‌دنده‌ها و انیمیشن‌ها completed id content status dependencies replace-logo جایگزینی SVG لوگوی وردپرس با Canvas element در wordpress_cloud_highlight() completed create-canvas-script id content status dependencies add-script-injection اضافه کردن rx.script() برای inject کردن wordpress_canvas_script completed create-canvas-script id content status dependencies test-animation تست انیمیشن: smoothness، performance، responsive completed replace-logo add-script-injection id content status dependencies fine-tune تنظیم دقیق رنگ‌ها، سرعت‌ها و افکت‌های glow in_progress test-animation

پیاده‌سازی انیمیشن پیشرفته وردپرس

معماری انیمیشن

flowchart TD
    Canvas[Canvas Element] --> AnimLoop[Animation Loop]
    AnimLoop --> WPLogo[WordPress Logo Center]
    AnimLoop --> Gears[Rotating Gears]
    AnimLoop --> Particles[Light Particles]
    AnimLoop --> Rings[Rotating Rings]
    AnimLoop --> GlowFX[Glow Effects]
    
    WPLogo --> DrawLogo[Draw WordPress W]
    Gears --> Gear1[Gear Top]
    Gears --> Gear2[Gear Right]
    Gears --> Gear3[Gear Bottom]
    Particles --> System[Particle System]
    System --> Spawn[Spawn Particles]
    System --> Move[Move Along Path]
    System --> Fade[Fade In/Out]
    Rings --> Ring1[Outer Ring]
    Rings --> Ring2[Middle Ring]
    GlowFX --> RadialGlow[Radial Gradient]
    GlowFX --> LightTrails[Light Trails]

تغییرات مورد نیاز

1. ایجاد WordPress Canvas Animation Script

فایل: src/presentation/web/pages/landing/index.pyایجاد یک اسکریپت JavaScript جدید بعد از binary_rain_script:

wordpress_canvas_script = """
(function() {
    function initWordPressAnimation() {
        const canvas = document.getElementById('wordpress-canvas');
        if (!canvas) return;
        
        const ctx = canvas.getContext('2d');
        const rect = canvas.parentElement.getBoundingClientRect();
        canvas.width = rect.width;
        canvas.height = rect.height;
        
        // متغیرهای انیمیشن
        let time = 0;
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        
        // سیستم ذرات نورانی
        class Particle {
            constructor(angle, distance, speed) {
                this.angle = angle;
                this.distance = distance;
                this.speed = speed;
                this.opacity = Math.random();
                this.size = Math.random() * 3 + 1;
            }
            
            update() {
                this.angle += this.speed;
                this.opacity = (Math.sin(time * 2 + this.angle) + 1) / 2;
            }
            
            draw(ctx, cx, cy) {
                const x = cx + Math.cos(this.angle) * this.distance;
                const y = cy + Math.sin(this.angle) * this.distance;
                
                ctx.save();
                ctx.globalAlpha = this.opacity;
                const gradient = ctx.createRadialGradient(x, y, 0, x, y, this.size * 3);
                gradient.addColorStop(0, '#F59E0B');
                gradient.addColorStop(1, 'transparent');
                ctx.fillStyle = gradient;
                ctx.beginPath();
                ctx.arc(x, y, this.size * 3, 0, Math.PI * 2);
                ctx.fill();
                ctx.restore();
            }
        }
        
        // ایجاد ذرات
        const particles = [];
        for (let i = 0; i < 50; i++) {
            particles.push(new Particle(
                Math.random() * Math.PI * 2,
                120 + Math.random() * 80,
                (Math.random() - 0.5) * 0.02
            ));
        }
        
        // تابع رسم چرخ‌دنده
        function drawGear(ctx, x, y, radius, teeth, rotation) {
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(rotation);
            
            // رسم چرخ‌دنده با gradient
            const gradient = ctx.createRadialGradient(0, 0, radius * 0.5, 0, 0, radius);
            gradient.addColorStop(0, '#FB923C');
            gradient.addColorStop(1, '#F97316');
            
            ctx.fillStyle = gradient;
            ctx.strokeStyle = '#EA580C';
            ctx.lineWidth = 2;
            
            ctx.beginPath();
            for (let i = 0; i < teeth; i++) {
                const angle = (i / teeth) * Math.PI * 2;
                const outerRadius = radius;
                const innerRadius = radius * 0.7;
                
                ctx.lineTo(
                    Math.cos(angle) * outerRadius,
                    Math.sin(angle) * outerRadius
                );
                ctx.lineTo(
                    Math.cos(angle + Math.PI / teeth) * innerRadius,
                    Math.sin(angle + Math.PI / teeth) * innerRadius
                );
            }
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
            
            // دایره مرکزی
            ctx.fillStyle = '#1F2937';
            ctx.beginPath();
            ctx.arc(0, 0, radius * 0.3, 0, Math.PI * 2);
            ctx.fill();
            
            ctx.restore();
        }
        
        // تابع رسم لوگوی وردپرس
        function drawWordPressLogo(ctx, x, y, size, rotation) {
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(rotation);
            ctx.scale(size / 100, size / 100);
            
            // رسم W وردپرس (ساده‌شده)
            ctx.fillStyle = '#FFFFFF';
            ctx.font = 'bold 80px sans-serif';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('W', 0, 0);
            
            // دایره دور W
            ctx.strokeStyle = '#FFFFFF';
            ctx.lineWidth = 8;
            ctx.beginPath();
            ctx.arc(0, 0, 60, 0, Math.PI * 2);
            ctx.stroke();
            
            ctx.restore();
        }
        
        // حلقه انیمیشن اصلی
        function animate() {
            time += 0.016;
            
            // پاک کردن canvas
            ctx.fillStyle = 'transparent';
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // رسم glow پس‌زمینه
            const bgGradient = ctx.createRadialGradient(
                centerX, centerY, 0,
                centerX, centerY, 250
            );
            bgGradient.addColorStop(0, 'rgba(245, 158, 11, 0.3)');
            bgGradient.addColorStop(0.5, 'rgba(251, 146, 60, 0.15)');
            bgGradient.addColorStop(1, 'transparent');
            ctx.fillStyle = bgGradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // رسم حلقه‌های چرخان
            ctx.save();
            ctx.strokeStyle = 'rgba(245, 158, 11, 0.4)';
            ctx.lineWidth = 2;
            ctx.setLineDash([10, 10]);
            ctx.lineDashOffset = -time * 50;
            ctx.beginPath();
            ctx.arc(centerX, centerY, 180, 0, Math.PI * 2);
            ctx.stroke();
            
            ctx.lineDashOffset = time * 50;
            ctx.beginPath();
            ctx.arc(centerX, centerY, 220, 0, Math.PI * 2);
            ctx.stroke();
            ctx.restore();
            
            // رسم و بروزرسانی ذرات
            particles.forEach(p => {
                p.update();
                p.draw(ctx, centerX, centerY);
            });
            
            // رسم چرخ‌دنده‌ها
            drawGear(ctx, centerX - 100, centerY - 100, 40, 8, time * 0.5);
            drawGear(ctx, centerX + 100, centerY - 80, 35, 6, -time * 0.7);
            drawGear(ctx, centerX + 90, centerY + 100, 38, 7, time * 0.6);
            
            // رسم لوگوی وردپرس مرکزی با pulsing
            const logoScale = 100 + Math.sin(time * 2) * 5;
            drawWordPressLogo(ctx, centerX, centerY, logoScale, Math.sin(time) * 0.1);
            
            // افکت glow اضافی روی لوگو
            ctx.save();
            ctx.globalCompositeOperation = 'screen';
            const logoGlow = ctx.createRadialGradient(
                centerX, centerY, 50,
                centerX, centerY, 120
            );
            logoGlow.addColorStop(0, 'rgba(251, 191, 36, 0.8)');
            logoGlow.addColorStop(1, 'transparent');
            ctx.fillStyle = logoGlow;
            ctx.fillRect(centerX - 120, centerY - 120, 240, 240);
            ctx.restore();
            
            requestAnimationFrame(animate);
        }
        
        animate();
        
        // Handle resize
        window.addEventListener('resize', () => {
            const rect = canvas.parentElement.getBoundingClientRect();
            canvas.width = rect.width;
            canvas.height = rect.height;
        });
    }
    
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initWordPressAnimation);
    } else {
        initWordPressAnimation();
    }
})();
"""

2. جایگذاری Canvas در بخش WordPress

فایل: src/presentation/web/pages/landing/index.pyدر تابع wordpress_cloud_highlight():

• جایگزینی SVG لوگوی فعلی با Canvas element
• افزودن script tag برای اجرای انیمیشن

# قبل از لوگوی مرکزی، اضافه کردن script
rx.script(wordpress_canvas_script),

# جایگزینی بخش لوگوی وردپرس
rx.box(
    rx.html('<canvas id="wordpress-canvas" style="width: 100%; height: 100%;"></canvas>'),
    position="relative",
    width="600px",
    height="600px",
    display="flex",
    align_items="center",
    justify_content="center",
)

3. بهبود استایل و Performance

• اضافه کردن will-change: transform برای بهینه‌سازی
• استفاده از requestAnimationFrame برای انیمیشن روان
• کنترل FPS برای دستگاه‌های ضعیف‌تر

نکات تکنیکی

1. ذرات نورانی: از Particle System با 50 ذره استفاده می‌شه که در مسیر دایره‌ای حرکت می‌کنن
2. چرخ‌دنده‌ها: سه چرخ‌دنده در موقعیت‌های مختلف با سرعت‌های متفاوت می‌چرخن
3. Glow Effects: از radialGradient و globalCompositeOperation: 'screen' برای افکت نورانی
4. حلقه‌های چرخان: از setLineDash و lineDashOffset برای انیمیشن خط‌چین
5. لوگوی پویا: لوگوی وردپرس با scale pulsing و چرخش ملایم

مزایا

• هیچ کتابخانه خارجی لازم نیست
• Performance بالا با Canvas native
• کاملاً قابل سفارشی‌سازی
• Responsive و با resize سازگار
• افکت‌های بصری جذاب و حرفه‌ای

تست

بعد از پیاده‌سازی:

1. چک کردن smoothness انیمیشن
2. تست روی دستگاه‌های مختلف
3. بررسی CPU usage (باید زیر 10% باشه)