modify interactive aircraft scatter hero effect

website/src/assets/css/main.css

@@ -7,9 +7,9 @@
     --text: #f8fafc;
     --muted: #aab6ca;
     --soft: #64748b;
-    /*--accent: #38bdf8;*/
+    --accent: #38bdf8;
-    /*--accent2: #a855f7;*/
+    --accent2: #a855f7;
-    /*--accent3: #22c55e;*/
+    --accent3: #22c55e;
     --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
 
     --accent: #54d63d;
@@ -39,37 +39,12 @@ body {
     min-height: 100vh;
 
     background:
-            radial-gradient(
+            radial-gradient(circle at 14% 12%, rgba(168, 85, 247, 0.30), transparent 28%),
-                    circle at 14% 12%,
+            radial-gradient(circle at 82% 16%, rgba(56, 189, 248, 0.24), transparent 30%),
-                    rgba(52, 165, 57, 0.20),
+            radial-gradient(circle at 50% 85%, rgba(34, 197, 94, 0.11), transparent 35%),
-                    transparent 30%
+            linear-gradient(180deg, #050816 0%, #07111f 100%);
-            ),
-            radial-gradient(
-                    circle at 82% 16%,
-                    rgba(95, 218, 82, 0.14),
-                    transparent 32%
-            ),
-            radial-gradient(
-                    circle at 50% 85%,
-                    rgba(32, 126, 55, 0.12),
-                    transparent 36%
-            ),
-            linear-gradient(
-                    180deg,
-                    #070b09 0%,
-                    #0b1410 100%
-            );
-
     color: var(--text);
-    font-family:
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-            Inter,
-            ui-sans-serif,
-            system-ui,
-            -apple-system,
-            BlinkMacSystemFont,
-            "Segoe UI",
-            sans-serif;
-
     line-height: 1.65;
     overflow-x: hidden;
 }
@@ -602,153 +577,50 @@ a:hover {
 }
 
 /*
- * Interactive radio / aircraft-scatter hero layer
+ * Full-width, full-height home hero
  */
 
-.hero-radio-fx {
+main {
-    position: absolute;
-    inset: 0;
-    z-index: 0;
     width: 100%;
-    height: 100%;
-    pointer-events: none;
-    opacity: 0.76;
 }
 
-.hero-fx-vignette {
+.hero.hero-split {
-    position: absolute;
+    width: 100%;
-    inset: 0;
+    max-width: none;
-    z-index: 1;
+    min-height: calc(100vh - 77px);
-    pointer-events: none;
+    padding:
-
+            clamp(56px, 7vh, 100px)
-    background:
+            clamp(28px, 6vw, 110px);
-            linear-gradient(
+    align-content: center;
-                    90deg,
+    overflow: hidden;
-                    rgba(7, 11, 9, 0.92) 0%,
-                    rgba(7, 11, 9, 0.68) 34%,
-                    rgba(7, 11, 9, 0.16) 64%,
-                    rgba(7, 11, 9, 0.42) 100%
-            ),
-            linear-gradient(
-                    180deg,
-                    rgba(7, 11, 9, 0.10),
-                    rgba(7, 11, 9, 0.58)
-            );
 }
 
-.hero-split > *:not(.hero-radio-fx):not(.hero-fx-vignette) {
+.hero.hero-split > div:first-of-type {
-    position: relative;
+    max-width: 760px;
-    z-index: 2;
 }
 
-/*
+.hero.hero-split .hero-panel {
- * Operator-console badge styling
+    width: min(100%, 700px);
- */
+    justify-self: center;
-
-.badge,
-.eyebrow {
-    color: #caffc0;
-    background: rgba(52, 165, 57, 0.12);
-    border-color: rgba(105, 232, 88, 0.32);
-    box-shadow: 0 0 22px rgba(82, 255, 101, 0.08);
 }
 
-/*
+@media (min-width: 1600px) {
- * Light-mode identity:
+    .hero.hero-split {
- * white/grey UI with red contest accents
+        grid-template-columns:
- */
+      minmax(520px, 0.85fr)
+      minmax(600px, 1.15fr);
+        gap: clamp(50px, 6vw, 130px);
+    }
 
-html[data-theme="light"] {
+    .hero.hero-split .hero-panel {
-    --bg: #f4f4f2;
+        width: min(100%, 780px);
-    --bg2: #ffffff;
+    }
-    --panel: rgba(255, 255, 255, 0.88);
-    --panel2: rgba(242, 242, 239, 0.92);
-    --border: rgba(91, 91, 86, 0.20);
-    --text: #252522;
-    --muted: #656560;
-    --soft: #888881;
-
-    --accent: #d33732;
-    --accent2: #f25a51;
-    --accent3: #ae2727;
-
-    --fx-plane: #df3732;
-    --fx-plane-muted: rgba(211, 55, 50, 0.38);
-    --fx-beam: #ef4039;
-    --fx-beam-glow: rgba(239, 64, 57, 0.22);
-    --fx-reflection: #ff8d84;
-    --fx-trail: rgba(211, 55, 50, 0.15);
-    --fx-grid: rgba(185, 47, 43, 0.045);
-}
-
-html[data-theme="light"] body {
-    background:
-            radial-gradient(
-                    circle at 14% 12%,
-                    rgba(211, 55, 50, 0.12),
-                    transparent 30%
-            ),
-            radial-gradient(
-                    circle at 82% 16%,
-                    rgba(242, 90, 81, 0.09),
-                    transparent 32%
-            ),
-            linear-gradient(
-                    180deg,
-                    #ffffff 0%,
-                    #f0f0ed 100%
-            );
-}
-
-html[data-theme="light"] .hero-fx-vignette {
-    background:
-            linear-gradient(
-                    90deg,
-                    rgba(255, 255, 255, 0.95) 0%,
-                    rgba(255, 255, 255, 0.76) 34%,
-                    rgba(255, 255, 255, 0.18) 66%,
-                    rgba(255, 255, 255, 0.48) 100%
-            ),
-            linear-gradient(
-                    180deg,
-                    rgba(255, 255, 255, 0.06),
-                    rgba(240, 240, 237, 0.62)
-            );
-}
-
-html[data-theme="light"] .badge,
-html[data-theme="light"] .eyebrow {
-    color: #962a27;
-    background: rgba(211, 55, 50, 0.08);
-    border-color: rgba(211, 55, 50, 0.24);
 }
 
 @media (max-width: 900px) {
-    .hero-radio-fx {
+    .hero.hero-split {
-        opacity: 0.48;
+        min-height: auto;
-    }
+        padding-top: 60px;
-
+        padding-bottom: 60px;
-    .hero-fx-vignette {
-        background:
-                linear-gradient(
-                        180deg,
-                        rgba(7, 11, 9, 0.82),
-                        rgba(7, 11, 9, 0.34)
-                );
-    }
-
-    html[data-theme="light"] .hero-fx-vignette {
-        background:
-                linear-gradient(
-                        180deg,
-                        rgba(255, 255, 255, 0.90),
-                        rgba(255, 255, 255, 0.42)
-                );
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .hero-radio-fx {
-        opacity: 0.28;
     }
 }

website/src/assets/js/hero-radio-fx.js

@@ -270,40 +270,91 @@
             ];
     }
 
-    function createBeam(target) {
+    function getRadioStations() {
-        const leftStation = {
+        const centerX = state.width * 0.54;
-            x: state.width * 0.12,
+        const centerY = state.height * 0.43;
-            y: state.height * 0.82
+
+        const left = {
+            x: state.width * 0.075,
+            y: state.height * 0.82,
+            label: "JN49EM"
         };
 
-        const rightStation = {
+        const right = {
-            x: state.width * 0.88,
+            x: state.width * 0.925,
-            y: state.height * 0.78
+            y: state.height * 0.80,
+            label: "JO66MD"
         };
 
-        const source =
+        left.angle = Math.atan2(
-            Math.abs(target.x - leftStation.x) <
+            centerY - left.y,
-            Math.abs(target.x - rightStation.x)
+            centerX - left.x
-                ? leftStation
+        );
-                : rightStation;
+
+        right.angle = Math.atan2(
+            centerY - right.y,
+            centerX - right.x
+        );
+
+        return [left, right];
+    }
+
+    function createBeam(target) {function createBeam(target) {
+        const stations = getRadioStations();
+
+        const source = stations
+            .map((station) => ({
+                station,
+                distance: Math.hypot(
+                    target.x - station.x,
+                    target.y - station.y
+                )
+            }))
+            .sort((a, b) => a.distance - b.distance)[0].station;
+
+        const beamAngle = Math.atan2(
+            target.y - source.y,
+            target.x - source.x
+        );
+
+        /*
+         * Der Strahl beginnt nicht im Antennenmast,
+         * sondern etwas vor der Yagi.
+         */
+        const antennaTipDistance = 45;
+
+        const startX =
+            source.x +
+            Math.cos(beamAngle) * antennaTipDistance;
+
+        const startY =
+            source.y +
+            Math.sin(beamAngle) * antennaTipDistance;
 
         state.beams.push({
-            startX: source.x,
+            startX,
-            startY: source.y,
+            startY,
             endX: target.x,
             endY: target.y,
             age: 0,
-            maximumAge: 0.62
+            maximumAge: 0.72
         });
 
         target.hit = 1;
 
+        const probabilities = [50, 75, 100];
+        const probability =
+            probabilities[
+                Math.floor(Math.random() * probabilities.length)
+                ];
+
         state.reflections.push({
             x: target.x,
             y: target.y,
             age: 0,
-            maximumAge: 0.9,
+            maximumAge: 1.25,
-            radius: randomBetween(8, 15)
+            radius: randomBetween(8, 13),
+            probability
         });
     }
 
@@ -394,6 +445,126 @@
         context.restore();
     }
 
+        function drawYagi(station, palette) {
+            context.save();
+
+            context.translate(station.x, station.y);
+            context.rotate(station.angle);
+
+            context.strokeStyle = palette.plane;
+            context.fillStyle = palette.plane;
+            context.lineCap = "round";
+            context.lineWidth = 1.5;
+
+            context.shadowColor = palette.beamGlow;
+            context.shadowBlur = 9;
+
+            /*
+             * Mast
+             */
+            context.beginPath();
+            context.moveTo(-30, 26);
+            context.lineTo(-30, -5);
+            context.stroke();
+
+            /*
+             * Ausleger / Boom
+             */
+            context.beginPath();
+            context.moveTo(-32, 0);
+            context.lineTo(43, 0);
+            context.stroke();
+
+            /*
+             * Reflektor
+             */
+            context.beginPath();
+            context.moveTo(-27, -17);
+            context.lineTo(-27, 17);
+            context.stroke();
+
+            /*
+             * Dipol
+             */
+            context.beginPath();
+            context.moveTo(-12, -14);
+            context.lineTo(-12, 14);
+            context.stroke();
+
+            /*
+             * Direktoren
+             */
+            const directors = [
+                { x: 2, length: 22 },
+                { x: 14, length: 19 },
+                { x: 25, length: 16 },
+                { x: 35, length: 13 }
+            ];
+
+            for (const director of directors) {
+                context.beginPath();
+                context.moveTo(
+                    director.x,
+                    -director.length / 2
+                );
+                context.lineTo(
+                    director.x,
+                    director.length / 2
+                );
+                context.stroke();
+            }
+
+            /*
+             * Einspeisepunkt
+             */
+            context.beginPath();
+            context.arc(-12, 0, 3.2, 0, Math.PI * 2);
+            context.fill();
+
+            context.restore();
+
+            /*
+             * Locator bleibt waagerecht lesbar.
+             */
+            context.save();
+
+            context.font =
+                '700 11px Inter, system-ui, sans-serif';
+
+            const labelWidth =
+                context.measureText(station.label).width + 14;
+
+            const labelX = station.x - labelWidth / 2;
+            const labelY = station.y + 32;
+
+            context.fillStyle = "rgba(6, 18, 10, 0.86)";
+            context.strokeStyle = palette.planeMuted;
+            context.lineWidth = 1;
+
+            context.beginPath();
+            context.roundRect(
+                labelX,
+                labelY,
+                labelWidth,
+                23,
+                6
+            );
+            context.fill();
+            context.stroke();
+
+            context.fillStyle = palette.plane;
+            context.textAlign = "center";
+            context.textBaseline = "middle";
+
+            context.fillText(
+                station.label,
+                station.x,
+                labelY + 11.5
+            );
+
+            context.restore();
+        }
+
     function drawPlane(plane, palette) {
         context.save();
 
@@ -465,17 +636,20 @@
 
         context.globalAlpha = alpha;
         context.strokeStyle = palette.beamGlow;
-        context.lineWidth = 6;
+        context.lineWidth = 8;
         context.shadowColor = palette.beam;
         context.shadowBlur = 15;
 
+        context.setLineDash([10, 6]);
+        context.lineDashOffset = -progress * 36;
+
         context.beginPath();
         context.moveTo(beam.startX, beam.startY);
         context.lineTo(beam.endX, beam.endY);
         context.stroke();
 
         context.strokeStyle = palette.beam;
-        context.lineWidth = 1.4;
+        context.lineWidth = 1.8;
         context.shadowBlur = 5;
 
         context.beginPath();
@@ -483,6 +657,8 @@
         context.lineTo(beam.endX, beam.endY);
         context.stroke();
 
+        context.setLineDash([]);
+
         context.restore();
     }
 
@@ -490,24 +666,133 @@
             const progress =
                 reflection.age / reflection.maximumAge;
 
+            const alpha = 1 - progress;
+
             context.save();
 
-        context.globalAlpha = 1 - progress;
+            context.translate(
+                reflection.x,
+                reflection.y
+            );
+
+            context.globalAlpha = alpha;
+
+            /*
+             * Äußerer Reflexionsring
+             */
             context.strokeStyle = palette.reflection;
-        context.lineWidth = 1.5;
+            context.lineWidth = 1.6;
             context.shadowColor = palette.beam;
-        context.shadowBlur = 12;
+            context.shadowBlur = 18;
 
             context.beginPath();
             context.arc(
-            reflection.x,
+                0,
-            reflection.y,
+                0,
                 reflection.radius,
                 0,
                 Math.PI * 2
             );
             context.stroke();
 
+            /*
+             * Zweiter Ring
+             */
+            context.globalAlpha = alpha * 0.55;
+
+            context.beginPath();
+            context.arc(
+                0,
+                0,
+                reflection.radius * 1.65,
+                0,
+                Math.PI * 2
+            );
+            context.stroke();
+
+            /*
+             * Reflexionskreuz
+             */
+            context.globalAlpha = alpha * 0.8;
+            context.lineWidth = 1;
+
+            const crossSize =
+                reflection.radius * 1.25;
+
+            context.beginPath();
+            context.moveTo(-crossSize, 0);
+            context.lineTo(crossSize, 0);
+            context.moveTo(0, -crossSize);
+            context.lineTo(0, crossSize);
+            context.stroke();
+
+            /*
+             * Heller Reflexionspunkt
+             */
+            context.globalAlpha = alpha;
+            context.fillStyle = palette.reflection;
+            context.shadowBlur = 24;
+
+            context.beginPath();
+            context.arc(0, 0, 3.8, 0, Math.PI * 2);
+            context.fill();
+
+            context.restore();
+
+            /*
+             * AP-Prozentwert
+             */
+            context.save();
+
+            const label = `${reflection.probability}%`;
+
+            context.font =
+                '800 12px Inter, system-ui, sans-serif';
+
+            const textWidth =
+                context.measureText(label).width;
+
+            const boxWidth = textWidth + 16;
+            const boxHeight = 25;
+
+            const boxX =
+                reflection.x + reflection.radius + 12;
+
+            const boxY =
+                reflection.y - reflection.radius - 17;
+
+            context.globalAlpha =
+                clamp(alpha * 1.25, 0, 1);
+
+            context.fillStyle = "rgba(6, 18, 10, 0.91)";
+            context.strokeStyle = palette.plane;
+            context.lineWidth = 1;
+
+            context.shadowColor = palette.beamGlow;
+            context.shadowBlur = 10;
+
+            context.beginPath();
+            context.roundRect(
+                boxX,
+                boxY,
+                boxWidth,
+                boxHeight,
+                6
+            );
+            context.fill();
+            context.stroke();
+
+            context.shadowBlur = 0;
+            context.fillStyle = palette.reflection;
+            context.textAlign = "center";
+            context.textBaseline = "middle";
+
+            context.fillText(
+                label,
+                boxX + boxWidth / 2,
+                boxY + boxHeight / 2
+            );
+
             context.restore();
         }
 
@@ -523,6 +808,10 @@
 
         drawGrid(palette);
         drawRadarTarget(palette);
+
+        for (const station of getRadioStations()) {
+            drawYagi(station, palette);
+        }
     }
 
     function drawScene() {
@@ -538,6 +827,10 @@
         drawGrid(palette);
         drawRadarTarget(palette);
 
+        for (const station of getRadioStations()) {
+            drawYagi(station, palette);
+        }
+
         for (const plane of state.planes) {
             drawPlane(plane, palette);
         }