张翔
706 lines
19 KiB
TypeScript
706 lines
19 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef, useCallback } from 'react';
|
|
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
|
|
|
interface InkDataMorphProps {
|
|
className?: string;
|
|
}
|
|
|
|
interface TrailPoint {
|
|
x: number;
|
|
y: number;
|
|
}
|
|
|
|
interface Particle {
|
|
x: number;
|
|
y: number;
|
|
vx: number;
|
|
vy: number;
|
|
radius: number;
|
|
initialRadius: number;
|
|
dataRadius: number;
|
|
opacity: number;
|
|
toneIndex: number;
|
|
rotation: number;
|
|
scaleX: number;
|
|
scaleY: number;
|
|
isSplash: boolean;
|
|
phase: 'spreading' | 'settling' | 'morphing' | 'complete' | 'fading';
|
|
spreadTime: number;
|
|
maxSpreadTime: number;
|
|
settleTime: number;
|
|
morphProgress: number;
|
|
targetX: number;
|
|
targetY: number;
|
|
delay: number;
|
|
age: number;
|
|
trail: TrailPoint[];
|
|
seed1: number;
|
|
seed2: number;
|
|
wobbleFactor: number;
|
|
prevVx: number;
|
|
prevVy: number;
|
|
inkLayerCount: number;
|
|
}
|
|
|
|
interface ResponsiveConfig {
|
|
particleCount: number;
|
|
centers: { x: number; y: number }[];
|
|
centerDistribution: number[];
|
|
targetXRange: [number, number];
|
|
targetYRange: [number, number];
|
|
connectionDistance: number;
|
|
glowScale: number;
|
|
gradientLayers: number;
|
|
maxTrail: number;
|
|
splashRatio: number;
|
|
bgOrbScale: number;
|
|
inkLayers: number;
|
|
inkRadiusScale: number;
|
|
inkStringThreshold: number;
|
|
showFeibai: boolean;
|
|
paperTextureSize: number;
|
|
wobbleDetail: number;
|
|
}
|
|
|
|
const TONES = [
|
|
{ hex: '#1C1C1C', rgb: '28, 28, 28', weight: 0.15 },
|
|
{ hex: '#4A4A4A', rgb: '74, 74, 74', weight: 0.25 },
|
|
{ hex: '#8C8C8C', rgb: '140, 140, 140', weight: 0.30 },
|
|
{ hex: '#C41E3A', rgb: '196, 30, 58', weight: 0.10 },
|
|
{ hex: '#E8707A', rgb: '232, 112, 122', weight: 0.20 },
|
|
] as const;
|
|
|
|
const ACCENT_TONES = [3, 4];
|
|
|
|
function pickToneIndex(isSplash: boolean): number {
|
|
if (isSplash) {
|
|
return Math.random() < 0.4 ? 0 : 1;
|
|
}
|
|
const r = Math.random();
|
|
let cumulative = 0;
|
|
for (let i = 0; i < TONES.length; i++) {
|
|
const tone = TONES[i];
|
|
if (!tone) {
|
|
continue;
|
|
}
|
|
cumulative += tone.weight;
|
|
if (r < cumulative) {
|
|
return i;
|
|
}
|
|
}
|
|
return 2;
|
|
}
|
|
|
|
function getResponsiveConfig(W: number): ResponsiveConfig {
|
|
if (W < 768) {
|
|
return {
|
|
particleCount: 70,
|
|
centers: [{ x: 0.65, y: 0.3 }],
|
|
centerDistribution: [1],
|
|
targetXRange: [0.55, 0.9],
|
|
targetYRange: [0.1, 0.5],
|
|
connectionDistance: 60,
|
|
glowScale: 0.5,
|
|
gradientLayers: 2,
|
|
maxTrail: 2,
|
|
splashRatio: 0,
|
|
bgOrbScale: 0.45,
|
|
inkLayers: 3,
|
|
inkRadiusScale: 1.2,
|
|
inkStringThreshold: 0.35,
|
|
showFeibai: false,
|
|
paperTextureSize: 128,
|
|
wobbleDetail: 16,
|
|
};
|
|
}
|
|
if (W < 1024) {
|
|
return {
|
|
particleCount: 120,
|
|
centers: [
|
|
{ x: 0.68, y: 0.3 },
|
|
{ x: 0.3, y: 0.6 },
|
|
],
|
|
centerDistribution: [0.65, 0.35],
|
|
targetXRange: [0.5, 0.9],
|
|
targetYRange: [0.12, 0.6],
|
|
connectionDistance: 80,
|
|
glowScale: 0.75,
|
|
gradientLayers: 2,
|
|
maxTrail: 4,
|
|
splashRatio: 0.05,
|
|
bgOrbScale: 0.7,
|
|
inkLayers: 3,
|
|
inkRadiusScale: 1.1,
|
|
inkStringThreshold: 0.4,
|
|
showFeibai: true,
|
|
paperTextureSize: 128,
|
|
wobbleDetail: 20,
|
|
};
|
|
}
|
|
return {
|
|
particleCount: 180,
|
|
centers: [
|
|
{ x: 0.72, y: 0.3 },
|
|
{ x: 0.25, y: 0.65 },
|
|
],
|
|
centerDistribution: [0.67, 0.33],
|
|
targetXRange: [0.5, 0.9],
|
|
targetYRange: [0.12, 0.65],
|
|
connectionDistance: 100,
|
|
glowScale: 1.0,
|
|
gradientLayers: 3,
|
|
maxTrail: 6,
|
|
splashRatio: 0.1,
|
|
bgOrbScale: 1.0,
|
|
inkLayers: 4,
|
|
inkRadiusScale: 1.0,
|
|
inkStringThreshold: 0.5,
|
|
showFeibai: true,
|
|
paperTextureSize: 256,
|
|
wobbleDetail: 24,
|
|
};
|
|
}
|
|
|
|
function easeInOutCubic(t: number): number {
|
|
return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
|
|
}
|
|
|
|
function easeOutCubic(t: number): number {
|
|
return 1 - Math.pow(1 - t, 3);
|
|
}
|
|
|
|
function lerp(a: number, b: number, t: number): number {
|
|
return a + (b - a) * t;
|
|
}
|
|
|
|
function updateParticle(p: Particle, maxTrail: number): void {
|
|
p.age++;
|
|
if (p.age < p.delay) {
|
|
return;
|
|
}
|
|
|
|
if (p.phase === 'spreading') {
|
|
if (maxTrail > 0) {
|
|
p.trail.push({ x: p.x, y: p.y });
|
|
if (p.trail.length > maxTrail) {
|
|
p.trail.shift();
|
|
}
|
|
}
|
|
|
|
p.x += p.vx;
|
|
p.y += p.vy;
|
|
p.vx *= 0.98;
|
|
p.vy *= 0.98;
|
|
p.spreadTime++;
|
|
|
|
const spreadRatio = p.spreadTime / p.maxSpreadTime;
|
|
if (spreadRatio < 0.3) {
|
|
p.radius = p.initialRadius * (1 + spreadRatio * 2);
|
|
} else {
|
|
p.radius = p.initialRadius * lerp(1.6, 1, easeOutCubic((spreadRatio - 0.3) / 0.7));
|
|
}
|
|
|
|
if (p.spreadTime >= p.maxSpreadTime) {
|
|
if (p.isSplash) {
|
|
p.phase = 'fading';
|
|
} else {
|
|
p.phase = 'settling';
|
|
}
|
|
}
|
|
} else if (p.phase === 'settling') {
|
|
p.settleTime++;
|
|
p.opacity = Math.max(0.2, p.opacity - 0.002);
|
|
p.x += (Math.random() - 0.5) * 0.15;
|
|
p.y += (Math.random() - 0.5) * 0.15;
|
|
if (p.settleTime > 60) {
|
|
p.phase = 'morphing';
|
|
}
|
|
} else if (p.phase === 'morphing') {
|
|
p.morphProgress = Math.min(1, p.morphProgress + 0.006);
|
|
const t = easeInOutCubic(p.morphProgress);
|
|
p.x = lerp(p.x, p.targetX, t * 0.025);
|
|
p.y = lerp(p.y, p.targetY, t * 0.025);
|
|
p.radius = lerp(p.radius, p.dataRadius, t * 0.02);
|
|
p.opacity = lerp(p.opacity, 0.35, t * 0.008);
|
|
if (p.morphProgress >= 1) {
|
|
p.phase = 'complete';
|
|
}
|
|
} else if (p.phase === 'complete') {
|
|
p.opacity = lerp(p.opacity, 0.35, 0.01);
|
|
} else if (p.phase === 'fading') {
|
|
p.opacity -= 0.01;
|
|
p.radius *= 0.98;
|
|
if (p.opacity <= 0) {
|
|
p.opacity = 0;
|
|
p.phase = 'complete';
|
|
}
|
|
}
|
|
}
|
|
|
|
function drawTrail(
|
|
ctx: CanvasRenderingContext2D,
|
|
p: Particle,
|
|
rgb: string,
|
|
): void {
|
|
if (p.trail.length < 2) {
|
|
return;
|
|
}
|
|
|
|
ctx.save();
|
|
ctx.lineCap = 'round';
|
|
for (let i = 1; i < p.trail.length; i++) {
|
|
const prev = p.trail[i - 1];
|
|
const curr = p.trail[i];
|
|
if (!prev || !curr) {
|
|
continue;
|
|
}
|
|
const trailAlpha = (i / p.trail.length) * p.opacity * 0.3;
|
|
const trailWidth = (i / p.trail.length) * p.radius * 0.8;
|
|
ctx.beginPath();
|
|
ctx.moveTo(prev.x, prev.y);
|
|
ctx.lineTo(curr.x, curr.y);
|
|
ctx.strokeStyle = `rgba(${rgb}, ${trailAlpha})`;
|
|
ctx.lineWidth = Math.max(0.3, trailWidth);
|
|
ctx.stroke();
|
|
}
|
|
ctx.restore();
|
|
}
|
|
|
|
function drawInkDot(
|
|
ctx: CanvasRenderingContext2D,
|
|
x: number,
|
|
y: number,
|
|
r: number,
|
|
rotation: number,
|
|
scaleX: number,
|
|
scaleY: number,
|
|
rgb: string,
|
|
opacity: number,
|
|
): void {
|
|
ctx.save();
|
|
ctx.translate(x, y);
|
|
ctx.rotate(rotation);
|
|
ctx.beginPath();
|
|
ctx.ellipse(0, 0, Math.max(0.5, r * scaleX), Math.max(0.5, r * scaleY), 0, 0, Math.PI * 2);
|
|
ctx.fillStyle = `rgba(${rgb}, ${opacity})`;
|
|
ctx.fill();
|
|
ctx.restore();
|
|
}
|
|
|
|
function drawParticle(
|
|
ctx: CanvasRenderingContext2D,
|
|
p: Particle,
|
|
time: number,
|
|
config: ResponsiveConfig,
|
|
): void {
|
|
if (p.age < p.delay || p.opacity <= 0) {
|
|
return;
|
|
}
|
|
|
|
const tone = TONES[p.toneIndex];
|
|
if (!tone) {
|
|
return;
|
|
}
|
|
const rgb = tone.rgb;
|
|
const r = Math.max(0.5, p.radius);
|
|
const gs = config.glowScale;
|
|
|
|
if (p.phase === 'spreading') {
|
|
drawTrail(ctx, p, rgb);
|
|
|
|
if (config.gradientLayers >= 3) {
|
|
const grad3 = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, r * 5 * gs);
|
|
grad3.addColorStop(0, `rgba(${rgb}, ${p.opacity * 0.06})`);
|
|
grad3.addColorStop(0.5, `rgba(${rgb}, ${p.opacity * 0.02})`);
|
|
grad3.addColorStop(1, 'transparent');
|
|
ctx.fillStyle = grad3;
|
|
ctx.fillRect(p.x - r * 5 * gs, p.y - r * 5 * gs, r * 10 * gs, r * 10 * gs);
|
|
}
|
|
|
|
const grad2R = r * 2.8 * gs;
|
|
const grad2 = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, grad2R);
|
|
grad2.addColorStop(0, `rgba(${rgb}, ${p.opacity * 0.2})`);
|
|
grad2.addColorStop(0.6, `rgba(${rgb}, ${p.opacity * 0.06})`);
|
|
grad2.addColorStop(1, 'transparent');
|
|
ctx.fillStyle = grad2;
|
|
ctx.fillRect(p.x - grad2R, p.y - grad2R, grad2R * 2, grad2R * 2);
|
|
|
|
const grad1 = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, r);
|
|
grad1.addColorStop(0, `rgba(${rgb}, ${p.opacity * 0.9})`);
|
|
grad1.addColorStop(0.7, `rgba(${rgb}, ${p.opacity * 0.4})`);
|
|
grad1.addColorStop(1, 'transparent');
|
|
ctx.fillStyle = grad1;
|
|
ctx.beginPath();
|
|
ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
|
|
drawInkDot(ctx, p.x, p.y, r * 0.6, p.rotation, p.scaleX, p.scaleY, rgb, p.opacity * 0.7);
|
|
} else if (p.phase === 'settling') {
|
|
const grad2R = r * 2.2 * gs;
|
|
const grad2 = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, grad2R);
|
|
grad2.addColorStop(0, `rgba(${rgb}, ${p.opacity * 0.15})`);
|
|
grad2.addColorStop(0.5, `rgba(${rgb}, ${p.opacity * 0.05})`);
|
|
grad2.addColorStop(1, 'transparent');
|
|
ctx.fillStyle = grad2;
|
|
ctx.fillRect(p.x - grad2R, p.y - grad2R, grad2R * 2, grad2R * 2);
|
|
|
|
const grad1 = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, r);
|
|
grad1.addColorStop(0, `rgba(${rgb}, ${p.opacity * 0.85})`);
|
|
grad1.addColorStop(0.6, `rgba(${rgb}, ${p.opacity * 0.3})`);
|
|
grad1.addColorStop(1, 'transparent');
|
|
ctx.fillStyle = grad1;
|
|
ctx.beginPath();
|
|
ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
|
|
drawInkDot(ctx, p.x, p.y, r * 0.5, p.rotation, p.scaleX, p.scaleY, rgb, p.opacity * 0.5);
|
|
} else if (p.phase === 'fading') {
|
|
const grad1 = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, r * 1.5);
|
|
grad1.addColorStop(0, `rgba(${rgb}, ${p.opacity * 0.6})`);
|
|
grad1.addColorStop(1, 'transparent');
|
|
ctx.fillStyle = grad1;
|
|
ctx.beginPath();
|
|
ctx.arc(p.x, p.y, r * 1.5, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
} else {
|
|
const pulse = 1 + Math.sin(time * 0.002 + p.targetX * 0.01) * 0.15;
|
|
const glowR = r * 3 * pulse * gs;
|
|
|
|
const grad2 = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, glowR);
|
|
grad2.addColorStop(0, `rgba(${rgb}, ${p.opacity * 0.12})`);
|
|
grad2.addColorStop(0.4, `rgba(${rgb}, ${p.opacity * 0.04})`);
|
|
grad2.addColorStop(1, 'transparent');
|
|
ctx.fillStyle = grad2;
|
|
ctx.fillRect(p.x - glowR, p.y - glowR, glowR * 2, glowR * 2);
|
|
|
|
drawInkDot(ctx, p.x, p.y, r, p.rotation, p.scaleX, p.scaleY, rgb, p.opacity);
|
|
}
|
|
}
|
|
|
|
function drawConnections(
|
|
ctx: CanvasRenderingContext2D,
|
|
particles: Particle[],
|
|
connectionDistance: number,
|
|
): void {
|
|
const morphed = particles.filter(
|
|
p => p.phase === 'morphing' && p.morphProgress > 0.3
|
|
);
|
|
ctx.save();
|
|
ctx.lineCap = 'round';
|
|
for (let i = 0; i < morphed.length; i++) {
|
|
const a = morphed[i];
|
|
if (!a) {
|
|
continue;
|
|
}
|
|
const toneA = TONES[a.toneIndex];
|
|
if (!toneA) {
|
|
continue;
|
|
}
|
|
for (let j = i + 1; j < morphed.length; j++) {
|
|
const b = morphed[j];
|
|
if (!b) {
|
|
continue;
|
|
}
|
|
const toneB = TONES[b.toneIndex];
|
|
if (!toneB) {
|
|
continue;
|
|
}
|
|
const dx = a.x - b.x;
|
|
const dy = a.y - b.y;
|
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
if (dist < connectionDistance && dist > 0) {
|
|
const progress = Math.min(a.morphProgress, b.morphProgress);
|
|
const distRatio = 1 - dist / connectionDistance;
|
|
const alpha = distRatio * 0.12 * progress;
|
|
const lineWidth = 0.3 + distRatio * 0.7;
|
|
|
|
const useAccent = ACCENT_TONES.includes(a.toneIndex) || ACCENT_TONES.includes(b.toneIndex);
|
|
const connRgb = useAccent ? TONES[3].rgb : TONES[0].rgb;
|
|
|
|
const mx = (a.x + b.x) / 2;
|
|
const my = (a.y + b.y) / 2;
|
|
const offset = dist * 0.1;
|
|
const cpx = mx + (dy / dist) * offset;
|
|
const cpy = my - (dx / dist) * offset;
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(a.x, a.y);
|
|
ctx.quadraticCurveTo(cpx, cpy, b.x, b.y);
|
|
ctx.strokeStyle = `rgba(${connRgb}, ${alpha})`;
|
|
ctx.lineWidth = lineWidth;
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
ctx.restore();
|
|
}
|
|
|
|
function drawBgOrbs(
|
|
ctx: CanvasRenderingContext2D,
|
|
W: number,
|
|
H: number,
|
|
orbScale: number,
|
|
): void {
|
|
const orbs = [
|
|
{ x: W * 0.72, y: H * 0.28, r: 350 * orbScale, rgb: TONES[3].rgb, alpha: 0.04 },
|
|
{ x: W * 0.28, y: H * 0.68, r: 280 * orbScale, rgb: TONES[0].rgb, alpha: 0.03 },
|
|
{ x: W * 0.5, y: H * 0.45, r: 400 * orbScale, rgb: TONES[4].rgb, alpha: 0.015 },
|
|
{ x: W * 0.85, y: H * 0.7, r: 200 * orbScale, rgb: TONES[1].rgb, alpha: 0.02 },
|
|
];
|
|
for (const o of orbs) {
|
|
const grad = ctx.createRadialGradient(o.x, o.y, 0, o.x, o.y, o.r);
|
|
grad.addColorStop(0, `rgba(${o.rgb}, ${o.alpha})`);
|
|
grad.addColorStop(0.6, `rgba(${o.rgb}, ${o.alpha * 0.3})`);
|
|
grad.addColorStop(1, 'transparent');
|
|
ctx.fillStyle = grad;
|
|
ctx.fillRect(o.x - o.r, o.y - o.r, o.r * 2, o.r * 2);
|
|
}
|
|
}
|
|
|
|
function createParticle(
|
|
cx: number,
|
|
cy: number,
|
|
W: number,
|
|
H: number,
|
|
delay: number,
|
|
config: ResponsiveConfig,
|
|
): Particle {
|
|
const angle = Math.random() * Math.PI * 2;
|
|
const dist = Math.random() * 8;
|
|
const isSplash = Math.random() < config.splashRatio;
|
|
const speed = isSplash
|
|
? 1.5 + Math.random() * 3
|
|
: 0.4 + Math.random() * 1.8;
|
|
|
|
const toneIndex = pickToneIndex(isSplash);
|
|
const isHeavy = toneIndex === 0 || toneIndex === 3;
|
|
|
|
const initialRadius = isSplash
|
|
? 0.5 + Math.random() * 1.5
|
|
: 2 + Math.random() * 5;
|
|
|
|
const [txMin, txMax] = config.targetXRange;
|
|
const [tyMin, tyMax] = config.targetYRange;
|
|
|
|
return {
|
|
x: cx + Math.cos(angle) * dist,
|
|
y: cy + Math.sin(angle) * dist,
|
|
vx: Math.cos(angle) * speed,
|
|
vy: Math.sin(angle) * speed,
|
|
radius: initialRadius,
|
|
initialRadius,
|
|
dataRadius: isSplash ? 0 : 1.2 + Math.random() * 2.5,
|
|
opacity: isSplash ? 0.6 + Math.random() * 0.3 : 0.5 + Math.random() * 0.4,
|
|
toneIndex,
|
|
rotation: Math.random() * Math.PI * 2,
|
|
scaleX: isHeavy ? 0.8 + Math.random() * 0.2 : 0.5 + Math.random() * 0.4,
|
|
scaleY: isHeavy ? 0.8 + Math.random() * 0.2 : 0.5 + Math.random() * 0.4,
|
|
isSplash,
|
|
phase: 'spreading',
|
|
spreadTime: 0,
|
|
maxSpreadTime: isSplash ? 30 + Math.random() * 40 : 70 + Math.random() * 90,
|
|
settleTime: 0,
|
|
morphProgress: 0,
|
|
targetX: W * (txMin + Math.random() * (txMax - txMin)),
|
|
targetY: H * (tyMin + Math.random() * (tyMax - tyMin)),
|
|
delay,
|
|
age: 0,
|
|
trail: [],
|
|
seed1: Math.random() * Math.PI * 2,
|
|
seed2: Math.random() * Math.PI * 2,
|
|
wobbleFactor: 0.3,
|
|
prevVx: 0,
|
|
prevVy: 0,
|
|
inkLayerCount: config.inkLayers,
|
|
};
|
|
}
|
|
|
|
function initParticlesArray(W: number, H: number, config: ResponsiveConfig): Particle[] {
|
|
const particles: Particle[] = [];
|
|
let remaining = config.particleCount;
|
|
|
|
for (let c = 0; c < config.centers.length; c++) {
|
|
const centerDef = config.centers[c];
|
|
if (!centerDef) {
|
|
continue;
|
|
}
|
|
const cx = W * centerDef.x;
|
|
const cy = H * centerDef.y;
|
|
const dist = config.centerDistribution[c] ?? 0;
|
|
const count = c === config.centers.length - 1
|
|
? remaining
|
|
: Math.floor(config.particleCount * dist);
|
|
remaining -= count;
|
|
|
|
const baseDelay = c * 25;
|
|
for (let i = 0; i < count; i++) {
|
|
particles.push(
|
|
createParticle(cx, cy, W, H, baseDelay + Math.random() * 20, config)
|
|
);
|
|
}
|
|
}
|
|
|
|
return particles;
|
|
}
|
|
|
|
export function InkDataMorph({
|
|
className = '',
|
|
}: InkDataMorphProps) {
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
const particlesRef = useRef<Particle[]>([]);
|
|
const animationRef = useRef<number | undefined>(undefined);
|
|
const startTimeRef = useRef<number>(0);
|
|
const configRef = useRef<ResponsiveConfig | null>(null);
|
|
const shouldReduceMotion = useReducedMotion();
|
|
|
|
const drawStaticFinal = useCallback(() => {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) {
|
|
return;
|
|
}
|
|
const ctx = canvas.getContext('2d');
|
|
if (!ctx) {
|
|
return;
|
|
}
|
|
const config = configRef.current;
|
|
if (!config) {
|
|
return;
|
|
}
|
|
|
|
const dpr = canvas.width / (canvas.clientWidth || 1);
|
|
const W = canvas.width / dpr;
|
|
const H = canvas.height / dpr;
|
|
|
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
|
ctx.clearRect(0, 0, W, H);
|
|
ctx.fillStyle = '#FAFAF5';
|
|
ctx.fillRect(0, 0, W, H);
|
|
|
|
drawBgOrbs(ctx, W, H, config.bgOrbScale);
|
|
|
|
const finalParticles = particlesRef.current
|
|
.filter(p => !p.isSplash)
|
|
.map(p => ({
|
|
...p,
|
|
x: p.targetX,
|
|
y: p.targetY,
|
|
radius: p.dataRadius,
|
|
opacity: 0.35,
|
|
phase: 'complete' as const,
|
|
trail: [],
|
|
}));
|
|
|
|
for (const p of finalParticles) {
|
|
drawParticle(ctx, p, 0, config);
|
|
}
|
|
|
|
drawConnections(ctx, finalParticles, config.connectionDistance);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) {
|
|
return;
|
|
}
|
|
|
|
const parent = canvas.parentElement;
|
|
if (!parent) {
|
|
return;
|
|
}
|
|
|
|
const initCanvas = () => {
|
|
if (animationRef.current !== undefined) {
|
|
cancelAnimationFrame(animationRef.current);
|
|
animationRef.current = undefined;
|
|
}
|
|
|
|
const W = parent.clientWidth;
|
|
const H = parent.clientHeight;
|
|
const dpr = Math.min(window.devicePixelRatio || 1, 2);
|
|
canvas.width = W * dpr;
|
|
canvas.height = H * dpr;
|
|
|
|
const config = getResponsiveConfig(W);
|
|
configRef.current = config;
|
|
particlesRef.current = initParticlesArray(W, H, config);
|
|
|
|
if (shouldReduceMotion) {
|
|
drawStaticFinal();
|
|
return;
|
|
}
|
|
|
|
startTimeRef.current = performance.now();
|
|
|
|
const animate = () => {
|
|
const ctx = canvas.getContext('2d');
|
|
if (!ctx) {
|
|
return;
|
|
}
|
|
|
|
const time = performance.now() - startTimeRef.current;
|
|
|
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
|
ctx.clearRect(0, 0, W, H);
|
|
ctx.fillStyle = '#FAFAF5';
|
|
ctx.fillRect(0, 0, W, H);
|
|
|
|
drawBgOrbs(ctx, W, H, config.bgOrbScale);
|
|
|
|
const particles = particlesRef.current;
|
|
let allComplete = true;
|
|
|
|
for (const p of particles) {
|
|
updateParticle(p, config.maxTrail);
|
|
drawParticle(ctx, p, time, config);
|
|
if (p.phase !== 'complete') {
|
|
allComplete = false;
|
|
}
|
|
}
|
|
|
|
drawConnections(ctx, particles, config.connectionDistance);
|
|
|
|
if (allComplete) {
|
|
animationRef.current = undefined;
|
|
return;
|
|
}
|
|
|
|
animationRef.current = requestAnimationFrame(animate);
|
|
};
|
|
|
|
animationRef.current = requestAnimationFrame(animate);
|
|
};
|
|
|
|
initCanvas();
|
|
|
|
let resizeTimer: ReturnType<typeof setTimeout> | undefined;
|
|
const handleResize = () => {
|
|
if (resizeTimer !== undefined) {
|
|
clearTimeout(resizeTimer);
|
|
}
|
|
resizeTimer = setTimeout(initCanvas, 300);
|
|
};
|
|
|
|
window.addEventListener('resize', handleResize);
|
|
|
|
return () => {
|
|
window.removeEventListener('resize', handleResize);
|
|
if (resizeTimer !== undefined) {
|
|
clearTimeout(resizeTimer);
|
|
}
|
|
if (animationRef.current !== undefined) {
|
|
cancelAnimationFrame(animationRef.current);
|
|
}
|
|
};
|
|
}, [shouldReduceMotion, drawStaticFinal]);
|
|
|
|
return (
|
|
<canvas
|
|
ref={canvasRef}
|
|
className={`absolute inset-0 w-full h-full pointer-events-none ${className}`}
|
|
aria-hidden="true"
|
|
/>
|
|
);
|
|
}
|