diff --git a/src/components/Home.tsx b/src/components/Home.tsx index 22e92d2..f447537 100644 --- a/src/components/Home.tsx +++ b/src/components/Home.tsx @@ -62,10 +62,12 @@ function HeroParticleCanvas() { y: Math.random() * H, vx: (Math.random() - 0.5) * 0.10, // 速度砍 71%，停止"游来游去"的感觉 vy: (Math.random() - 0.5) * 0.10, - r: Math.random() * 1.4 + 0.6, + // 浅底可见版：粒子尺寸 +33%（原 0.6~2.0 → 现 0.8~2.6） + r: Math.random() * 1.8 + 0.8, color: PALETTE[Math.floor(Math.random() * PALETTE.length)], - alpha: Math.random() * 0.5 + 0.4, - alphaSpeed: (Math.random() - 0.5) * 0.008, + // 浅底可见版：alpha 基准 +30%（原 0.4~0.9 → 现 0.65~0.95） + alpha: Math.random() * 0.30 + 0.65, + alphaSpeed: (Math.random() - 0.5) * 0.009, })); }; @@ -96,24 +98,25 @@ function HeroParticleCanvas() { if (p.y < p.r) { p.y = p.r; p.vy = Math.abs(p.vy); } if (p.y > H - p.r) { p.y = H - p.r; p.vy = -Math.abs(p.vy); } - // 闪烁 alpha + // 闪烁 alpha（浅底版：最低不低于 0.55 保证可见） p.alpha += p.alphaSpeed; - if (p.alpha > 0.95 || p.alpha < 0.35) p.alphaSpeed = -p.alphaSpeed; + if (p.alpha > 0.98 || p.alpha < 0.55) p.alphaSpeed = -p.alphaSpeed; } ctx.beginPath(); - const g = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 3); + // 浅底可见版：发光半径 r×3.5（原 r×3），中间色 alpha*0.45（原 *0.35） + const g = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 3.5); g.addColorStop(0, `rgba(${p.color}, ${p.alpha})`); - g.addColorStop(0.5, `rgba(${p.color}, ${p.alpha * 0.35})`); + g.addColorStop(0.5, `rgba(${p.color}, ${p.alpha * 0.45})`); g.addColorStop(1, `rgba(${p.color}, 0)`); ctx.fillStyle = g; - ctx.arc(p.x, p.y, p.r * 3, 0, Math.PI * 2); + ctx.arc(p.x, p.y, p.r * 3.5, 0, Math.PI * 2); ctx.fill(); } - // 2) 邻近连线（仅动画模式执行，静态省开销） + // 2) 邻近连线（浅底可见版：MAX+25%，基础 alpha+50%，线宽 x1.43） if (!reduced) { - const MAX = 120; + const MAX = 150; // 原 120 → +25% for (let i = 0; i < particles.length; i++) { const a = particles[i]; for (let j = i + 1; j < particles.length; j++) { @@ -129,11 +132,11 @@ function HeroParticleCanvas() { const adx = a.x - mouse.x, ady = a.y - mouse.y; const bdx = b.x - mouse.x, bdy = b.y - mouse.y; const near = Math.min(adx * adx + ady * ady, bdx * bdx + bdy * bdy); - if (near < 120 * 120) boost = (1 - Math.sqrt(near) / 120) * 0.45; + if (near < 140 * 140) boost = (1 - Math.sqrt(near) / 140) * 0.65; // 原 0.45 → +44% } - const alpha = Math.min(0.55, t * 0.28 + boost); - ctx.strokeStyle = `rgba(148, 184, 255, ${alpha})`; - ctx.lineWidth = 0.7; + const alpha = Math.min(0.72, t * 0.42 + boost); // 原 0.55 / t*0.28 → 大幅增强 + ctx.strokeStyle = `rgba(100, 140, 230, ${alpha})`; // 颜色略深，浅底上对比更强 + ctx.lineWidth = 1.0; // 原 0.7 → x1.43 ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); @@ -215,15 +218,15 @@ export default function Home({ locale }: { locale: Locale }) { return ( <> - {/* ===== HERO：品牌背景图 + Canvas 粒子网 + 雾化光晕 + 玻璃球轨道粒子 ===== */} + {/* ===== HERO：极简版（用户反馈满屏星星太脏）—— 只保留干净 hero-bg.jpg 原图 + 左下文字阴影 ===== */}
- {/* 背景图：玻璃球/水滴主题图，匹配品牌色 */} + {/* 背景图：玻璃球/水滴主题图，原图直接展示，不叠加任何蒙层/粒子/光晕/星芒 */} - {/* 方案A：半透明深色蒙层 → 让粒子/光晕从浅色背景中"显形"，同时增强左下白字对比度 */} -