новый лендинг

2026-04-26 16:09:08 +04:00
parent 103e2bc4cf
commit 7701aa16c0
24 changed files with 6368 additions and 341 deletions
@@ -0,0 +1,92 @@
+import { useEffect, useRef } from 'react';
+
+export default function Background() {
+    const canvasRef = useRef(null);
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const ctx = canvas.getContext('2d');
+        let raf;
+        let w, h, dpr;
+        const stars = [];
+        const drift = [];
+
+        const resize = () => {
+            dpr = Math.min(window.devicePixelRatio || 1, 2);
+            w = canvas.width = window.innerWidth * dpr;
+            h = canvas.height = window.innerHeight * dpr;
+            canvas.style.width = window.innerWidth + 'px';
+            canvas.style.height = window.innerHeight + 'px';
+            stars.length = 0;
+            const density = Math.min(260, Math.floor((window.innerWidth * window.innerHeight) / 9000));
+            for (let i = 0; i < density; i++) {
+                stars.push({
+                    x: Math.random() * w,
+                    y: Math.random() * h,
+                    r: Math.random() * 1.3 * dpr + 0.3 * dpr,
+                    baseAlpha: Math.random() * 0.6 + 0.2,
+                    twinkleSpeed: Math.random() * 0.003 + 0.0005,
+                    twinklePhase: Math.random() * Math.PI * 2,
+                    hue: Math.random() < 0.2 ? 'moon' : 'white',
+                });
+            }
+            drift.length = 0;
+            for (let i = 0; i < 18; i++) {
+                drift.push({
+                    x: Math.random() * w,
+                    y: Math.random() * h,
+                    vx: (Math.random() - 0.5) * 0.15,
+                    vy: (Math.random() - 0.5) * 0.1 - 0.02,
+                    r: Math.random() * 2 * dpr + 0.5 * dpr,
+                    alpha: Math.random() * 0.3 + 0.05,
+                });
+            }
+        };
+
+        const draw = (t) => {
+            ctx.clearRect(0, 0, w, h);
+            for (const s of stars) {
+                const a = s.baseAlpha * (0.5 + 0.5 * Math.sin(t * s.twinkleSpeed + s.twinklePhase));
+                ctx.beginPath();
+                ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
+                ctx.fillStyle = s.hue === 'moon'
+                    ? `rgba(200, 230, 255, ${a})`
+                    : `rgba(244, 236, 207, ${a})`;
+                ctx.fill();
+            }
+            for (const d of drift) {
+                d.x += d.vx;
+                d.y += d.vy;
+                if (d.x < 0) d.x = w; if (d.x > w) d.x = 0;
+                if (d.y < 0) d.y = h; if (d.y > h) d.y = 0;
+                const grad = ctx.createRadialGradient(d.x, d.y, 0, d.x, d.y, d.r * 6);
+                grad.addColorStop(0, `rgba(176, 136, 238, ${d.alpha})`);
+                grad.addColorStop(1, 'rgba(176, 136, 238, 0)');
+                ctx.fillStyle = grad;
+                ctx.beginPath();
+                ctx.arc(d.x, d.y, d.r * 6, 0, Math.PI * 2);
+                ctx.fill();
+            }
+            raf = requestAnimationFrame(draw);
+        };
+
+        resize();
+        draw(0);
+        window.addEventListener('resize', resize);
+        return () => {
+            cancelAnimationFrame(raf);
+            window.removeEventListener('resize', resize);
+        };
+    }, []);
+
+    return (
+        <>
+            <div className="bg">
+                <div className="bg-moon" aria-hidden="true"></div>
+                <div className="bg-fog" aria-hidden="true"></div>
+            </div>
+            <canvas id="particles" ref={canvasRef} aria-hidden="true" />
+        </>
+    );
+}