'use client'; import { useEffect, useRef } from 'react'; interface FloralBackgroundProps { isRevealing?: boolean; } interface FloatingAmbientHeart { x: number; y: number; baseX: number; size: number; speed: number; swayAmplitude: number; swaySpeed: number; swayOffset: number; rotation: number; rotSpeed: number; alpha: number; color: string; layer: 'bokeh' | 'mid' | 'foreground'; } export default function FloralBackground({ isRevealing = false }: FloralBackgroundProps) { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; let width = 0; let height = 0; let animationFrameId: number; const resize = () => { const rect = canvas.getBoundingClientRect(); const dpr = Math.min(window.devicePixelRatio || 1, 1.5); width = rect.width; height = rect.height; canvas.width = rect.width * dpr; canvas.height = rect.height * dpr; ctx.scale(dpr, dpr); }; resize(); window.addEventListener('resize', resize); // Palet Partikel Latar: Emas Murni, Champagne, Ruby, & Bintang Putih const luxuryPalette = [ '#FDE68A', // Pale Gold '#F59E0B', // Warm 24K Gold '#D97706', // Antique Gold '#FDA4AF', // Rose Petal '#FB7185', // Soft Ruby '#E11D48', // Deep Ruby Spark '#FFFFFF', // Opal Star ]; const drawHeart = ( c: CanvasRenderingContext2D, x: number, y: number, size: number, color: string, alpha: number, rotation: number, layer: 'bokeh' | 'mid' | 'foreground' ) => { c.save(); c.translate(x, y); c.rotate(rotation); c.globalAlpha = alpha; c.fillStyle = color; if (layer === 'foreground') { c.shadowColor = color; c.shadowBlur = 12; } else if (layer === 'mid') { c.shadowColor = color; c.shadowBlur = 6; } c.beginPath(); const topCurve = -size * 0.3; c.moveTo(0, topCurve); c.bezierCurveTo(-size * 0.65, -size * 0.95, -size * 1.05, -size * 0.05, 0, size * 0.95); c.bezierCurveTo(size * 1.05, -size * 0.05, size * 0.65, -size * 0.95, 0, topCurve); c.fill(); if (layer === 'foreground') { c.fillStyle = 'rgba(255, 255, 255, 0.5)'; c.beginPath(); c.arc(-size * 0.22, -size * 0.22, size * 0.16, 0, Math.PI * 2); c.fill(); } c.restore(); }; const TOTAL_HEARTS = 55; const hearts: FloatingAmbientHeart[] = []; for (let i = 0; i < TOTAL_HEARTS; i++) { const rand = Math.random(); let layer: 'bokeh' | 'mid' | 'foreground' = 'mid'; let size = Math.random() * 8 + 12; let alpha = Math.random() * 0.3 + 0.4; let speed = Math.random() * 0.5 + 0.45; if (rand < 0.35) { layer = 'bokeh'; size = Math.random() * 5 + 7; alpha = Math.random() * 0.18 + 0.22; speed = Math.random() * 0.35 + 0.3; } else if (rand > 0.8) { layer = 'foreground'; size = Math.random() * 10 + 20; alpha = Math.random() * 0.25 + 0.65; speed = Math.random() * 0.6 + 0.75; } const initialX = Math.random() * (width || 420); hearts.push({ x: initialX, baseX: initialX, y: Math.random() * (height || 800), size, speed, swayAmplitude: Math.random() * 20 + 10, swaySpeed: Math.random() * 0.02 + 0.012, swayOffset: Math.random() * Math.PI * 2, rotation: (Math.random() - 0.5) * 0.5, rotSpeed: (Math.random() - 0.5) * 0.012, alpha, color: luxuryPalette[Math.floor(Math.random() * luxuryPalette.length)], layer, }); } const render = () => { ctx.clearRect(0, 0, width, height); hearts.forEach((h) => { h.swayOffset += h.swaySpeed; h.x = h.baseX + Math.sin(h.swayOffset) * h.swayAmplitude; h.y -= h.speed; h.rotation += h.rotSpeed; if (h.y < -h.size * 2) { h.y = height + h.size * 2; h.baseX = Math.random() * width; h.x = h.baseX; h.swayOffset = Math.random() * Math.PI * 2; } drawHeart(ctx, h.x, h.y, h.size, h.color, h.alpha, h.rotation, h.layer); }); animationFrameId = requestAnimationFrame(render); }; render(); return () => { window.removeEventListener('resize', resize); cancelAnimationFrame(animationFrameId); }; }, []); return (
{/* GRADIENT DEFINITIONS */} {/* 1. TEKSTUR DAMASK EMAS BERPENDAR HALUS */}
{/* 3. BUKET BUNGA KATEDRAL KANAN ATAS (EMAS & NAVY GELAP) */}
{/* 4. BUKET BUNGA KATEDRAL KIRI BAWAH */}
); }