feat: logo-pulse with pink->green color transition (#16)

* fix(pulse): split halves now meet simultaneously + no backtracking Two bugs fixed after Linus feedback: 1. Path-form: top/bottom split halves used Bezier curves that could loop back on themselves when entry.x lay outside box X-range. Now use clamped startX/endX (max(xL+r, min(xR-r, entry.x))) so pathen alltid rör sig framåt (entry.x → exit.x), aldrig vänder. 2. Synchronized meeting: previously each blob moved at fixed velocity along its own path → shorter path arrived first and waited. Now both blobs share a phase2T (0→1) progress fraction, so they meet at exit-point simultaneously. The path with different length simply moves at a slightly different speed (averaged). Phase2 duration based on avg(topLen,bottomLen)/velocity so total animation time stays consistent. * feat: logo-pulse with pink->green color transition Adds a 4th pulse target: the IMAGES BY OLOFSSON hero-text logo. 20% chance per pulse-slot when logo is visible (footer scrolled in). Flow: 1. New purple wave-thread on bottom-left (mirror of cyan wave1 on right) 2. Pulse glides in along purple thread to logo-left edge 3. Pulse enters logo + tints smoky-path stroke pink (#e879f9) + adds pink text-shadow halo on h1 4. Mid-passage: tint transitions to green (#4fd1c5) — matches default smoke + cyan glow 5. Pulse exits logo via wave1 (existing cyan thread on right) 6. Logo tint reverts to default (white smokeShift animation) CSS-side: data-logo-tint attribute on #text-wrapper drives stroke + text-shadow overrides with 0.6-0.8s transitions for smooth fade.
2026-05-21 04:17:28 +02:00
parent 71ea7c7ce9
commit 3f5fb4b7fd
2 changed files with 175 additions and 2 deletions
@@ -29,6 +29,12 @@ const pulseCore = theme === 'purple' ? '#fdf4ff' : '#f0fdfa';
                <stop offset="100%" style={`stop-color:${secondaryColor};stop-opacity:0`} />
            </linearGradient>

+            <linearGradient id="gradPurple" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" style="stop-color:#c026d3;stop-opacity:0" />
+                <stop offset="50%" style="stop-color:#c026d3;stop-opacity:0.45" />
+                <stop offset="100%" style="stop-color:#c026d3;stop-opacity:0" />
+            </linearGradient>
+
            <filter id="pulseGlowSoft" x="-100%" y="-100%" width="300%" height="300%">
                <feGaussianBlur stdDeviation="22" />
            </filter>
@@ -65,6 +71,8 @@ const pulseCore = theme === 'purple' ? '#fdf4ff' : '#f0fdfa';

            <path id="thread1" d="M-1000 200 Q 400 400 900 200 T 2600 200" fill="none" stroke="url(#gradSec)" stroke-width="0.5" class="opacity-50" data-pulse-path="true" />
            <path id="thread2" d="M-1000 800 Q 600 600 1100 800 T 2600 800" fill="none" stroke="url(#gradSec)" stroke-width="0.8" class="opacity-60" data-pulse-path="true" />
+
+            <path id="threadPurple" d="M-1000 850 Q 400 600 900 850 T 2600 850" fill="none" stroke="url(#gradPurple)" stroke-width="0.7" class="opacity-55" data-pulse-path="true" data-purple-thread="true" />
        </g>

        <g id="box-trail-group"></g>
@@ -402,6 +410,134 @@ const pulseCore = theme === 'purple' ? '#fdf4ff' : '#f0fdfa';
        }

        const SPLIT_PROBABILITY = 0.55;
+        const LOGO_PROBABILITY = 0.20;
+
+        function isLogoTargetVisible(): HTMLElement | null {
+            const el = document.querySelector<HTMLElement>('[data-logo-target]');
+            if (!el) return null;
+            const rect = el.getBoundingClientRect();
+            if (rect.bottom < 0 || rect.top > window.innerHeight) return null;
+            if (rect.width < 50 || rect.height < 50) return null;
+            return el;
+        }
+
+        function runLogoPulse(durationMs: number) {
+            if (!blob1) return;
+            const logo = isLogoTargetVisible();
+            const purpleThread = document.getElementById('threadPurple') as SVGPathElement | null;
+            const greenThread = document.getElementById('wave1') as SVGPathElement | null;
+            if (!logo || !purpleThread || !greenThread) {
+                schedule();
+                return;
+            }
+            isPulsing = true;
+            updatePulseColors(false); // start cyan-themed (basis)
+
+            const rect = logo.getBoundingClientRect();
+            const logoLeftX = rect.left + 8;
+            const logoRightX = rect.right - 8;
+            const logoY = rect.top + rect.height / 2;
+
+            // PHASE 1: glide in på purple thread fram till logo-left
+            const purpleLen = purpleThread.getTotalLength();
+            // PHASE 2: in i logon — color shift
+            // PHASE 3: ut på wave1 (grön)
+            const greenLen = greenThread.getTotalLength();
+
+            const phase1Duration = durationMs * 0.35; // 35% glide in
+            const phase2Duration = durationMs * 0.30; // 30% inside logo
+            const phase3Duration = durationMs * 0.35; // 35% glide ut
+
+            const totalTime = phase1Duration + phase2Duration + phase3Duration;
+            const startTime = performance.now();
+
+            // Förbered purple gradient på pulse
+            const pinkColor = '#e879f9';
+            const greenColor = '#4fd1c5';
+
+            function setPulseTint(color: string) {
+                const haloStops = document.querySelectorAll('#pulseHaloGradient stop');
+                if (haloStops[0]) haloStops[0].setAttribute('style', `stop-color:${color};stop-opacity:0.85`);
+                if (haloStops[1]) haloStops[1].setAttribute('style', `stop-color:${color};stop-opacity:0.35`);
+                if (haloStops[2]) haloStops[2].setAttribute('style', `stop-color:${color};stop-opacity:0`);
+                const midStops = document.querySelectorAll('#pulseMidGradient stop');
+                if (midStops[0]) midStops[0].setAttribute('style', `stop-color:${color};stop-opacity:1`);
+                if (midStops[1]) midStops[1].setAttribute('style', `stop-color:${color};stop-opacity:0.5`);
+                if (midStops[2]) midStops[2].setAttribute('style', `stop-color:${color};stop-opacity:0`);
+            }
+
+            setPulseTint(pinkColor);
+            blob2 && blob2.setAttribute('opacity', '0');
+
+            // Find on purpleThread where it crosses logoLeftX (approx)
+            // Sample to find length when pt.x ~ logoLeftX
+            let purpleEntryLen = purpleLen;
+            for (let l = 0; l <= purpleLen; l += 4) {
+                const pt = purpleThread.getPointAtLength(l);
+                if (pt.x >= logoLeftX) { purpleEntryLen = l; break; }
+            }
+            let greenStartLen = 0;
+            for (let l = 0; l <= greenLen; l += 4) {
+                const pt = greenThread.getPointAtLength(l);
+                if (pt.x >= logoRightX) { greenStartLen = l; break; }
+            }
+            const greenEndLen = Math.min(greenStartLen + (greenLen - greenStartLen) * 0.55, greenLen);
+
+            function step(now: number) {
+                if (!blob1) return;
+                const elapsed = now - startTime;
+                const globalT = Math.min(elapsed / totalTime, 1);
+                const fade = fadeFactor(globalT);
+
+                if (elapsed <= phase1Duration) {
+                    // Glide in på purple thread fram till logo-left
+                    const t = elapsed / phase1Duration;
+                    const len = t * purpleEntryLen;
+                    const pt = purpleThread!.getPointAtLength(len);
+                    const angle = tangentAngle(purpleThread!, len, purpleLen);
+                    applyTransform(blob1!, pt.x, pt.y, angle);
+                    blob1!.setAttribute('opacity', String(fade));
+                } else if (elapsed <= phase1Duration + phase2Duration) {
+                    // INSIDE logo — pulse vid logo-center, ändra logo-färg
+                    const t = (elapsed - phase1Duration) / phase2Duration;
+                    // Pulse-position: glide från logoLeft till logoRight
+                    const cx = logoLeftX + (logoRightX - logoLeftX) * t;
+                    const cy = logoY;
+                    applyTransform(blob1!, cx, cy, 0);
+                    blob1!.setAttribute('opacity', String(fade * 0.6)); // dimmare i logo (logo-färg tar över visuellt)
+
+                    // Färg-shift: rosa första halvan, grön andra halvan
+                    if (t < 0.5) {
+                        logo!.setAttribute('data-logo-tint', 'pink');
+                        setPulseTint(pinkColor);
+                    } else {
+                        logo!.setAttribute('data-logo-tint', 'green');
+                        setPulseTint(greenColor);
+                    }
+                } else {
+                    // Glide ut på wave1 (grön)
+                    const t = Math.min((elapsed - phase1Duration - phase2Duration) / phase3Duration, 1);
+                    const len = greenStartLen + (greenEndLen - greenStartLen) * t;
+                    const pt = greenThread!.getPointAtLength(len);
+                    const angle = tangentAngle(greenThread!, len, greenLen);
+                    applyTransform(blob1!, pt.x, pt.y, angle);
+                    blob1!.setAttribute('opacity', String(fade));
+                    if (logo!.getAttribute('data-logo-tint')) {
+                        // Fade tillbaka till basis
+                        logo!.removeAttribute('data-logo-tint');
+                    }
+                }
+
+                if (elapsed < totalTime && globalT < 1) {
+                    requestAnimationFrame(step);
+                } else {
+                    blob1!.setAttribute('opacity', '0');
+                    logo!.removeAttribute('data-logo-tint');
+                    isPulsing = false;
+                }
+            }
+            requestAnimationFrame(step);
+        }

        function pickAndPulse() {
            if (isPulsing) {
@@ -412,6 +548,15 @@ const pulseCore = theme === 'purple' ? '#fdf4ff' : '#f0fdfa';
                schedule();
                return;
            }
+
+            // 20% chans för logo-pulse OM logo är synlig
+            const wantLogo = Math.random() < LOGO_PROBABILITY;
+            if (wantLogo && isLogoTargetVisible()) {
+                runLogoPulse(14000 + Math.random() * 4000);
+                schedule();
+                return;
+            }
+
            const boxes = refreshBoxes();
            const intersecting: SVGPathElement[] = [];
            const nonIntersecting: SVGPathElement[] = [];