https://logitechgplay.com/assets/js/fx.js?v=2.27.4

1(function () {
2    var stage = document.querySelector(".lv-stage");
3
4    if (!stage) {
5        return;
6    }
7
8    var body = document.body;
9    var calm = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
10
11    if (calm) {
12        return;
13    }
14
15    if (body.classList.contains("fx-parallax")) {
16        initParallax(stage);
17    }
18
19    if (body.classList.contains("fx-pulse")) {
20        initPulse(stage);
21    }
22
23    function initParallax(root) {
24        var targetX = 0;
25        var targetY = 0;
26        var x = 0;
27        var y = 0;
28        var running = false;
29
30        window.addEventListener("mousemove", function (event) {
31            targetX = event.clientX / window.innerWidth - 0.5;
32            targetY = event.clientY / window.innerHeight - 0.5;
33
34            if (!running) {
35                running = true;
36                window.requestAnimationFrame(step);
37            }
38        });
39
40        function step() {
41            x += (targetX - x) * 0.08;
42            y += (targetY - y) * 0.08;
43
44            root.style.setProperty("--lv-par-x", (x * -18).toFixed(2) + "px");
45            root.style.setProperty("--lv-par-y", (y * -12).toFixed(2) + "px");
46            root.style.setProperty("--lv-par-sx", (x * -9).toFixed(2) + "px");
47            root.style.setProperty("--lv-par-sy", (y * -6).toFixed(2) + "px");
48            root.style.setProperty("--lv-par-gx", (x * 14).toFixed(2) + "px");
49            root.style.setProperty("--lv-par-gy", (y * 8).toFixed(2) + "px");
50
51            if (Math.abs(targetX - x) > 0.001 || Math.abs(targetY - y) > 0.001) {
52                window.requestAnimationFrame(step);
53            } else {
54                running = false;
55            }
56        }
57    }
58
59    function initPulse(root) {
60        var canvas = root.querySelector("[data-pulse]");
61
62        if (!canvas || !canvas.getContext) {
63            return;
64        }
65
66        var ctx = canvas.getContext("2d");
67        var host = canvas.parentNode;
68        var style = window.getComputedStyle(root);
69        var grid = host.querySelector(".lv-stage__grid");
70        var pad = parseFloat(style.getPropertyValue("--lv-flow-pad")) || 0;
71        var cellX = parseFloat(style.getPropertyValue("--lv-cell")) || 118;
72        var cellY = cellX;
73        var offsetX = (parseFloat(style.getPropertyValue("--lv-grid-x")) || 0) + pad;
74        var offsetY = (parseFloat(style.getPropertyValue("--lv-grid-y")) || 0) + pad;
75
76        if (grid) {
77            var gs = window.getComputedStyle(grid);
78            var size = layer(gs.backgroundSize, 1);
79            var pos = layer(gs.backgroundPosition, 1);
80
81            if (size.length === 2 && size[0] > 0 && size[1] > 0) {
82                cellX = size[0];
83                cellY = size[1];
84            }
85
86            if (pos.length === 2) {
87                offsetX = pos[0];
88                offsetY = pos[1];
89            }
90        }
91
92        function layer(value, index) {
93            var parts = String(value || "").split(",");
94
95            if (!parts[index]) {
96                return [];
97            }
98
99            var nums = parts[index].trim().split(/\s+/).map(parseFloat);
100
101            return nums.length === 2 && !isNaN(nums[0]) && !isNaN(nums[1]) ? nums : [];
102        }
103        var beams = [];
104        var width = 0;
105        var height = 0;
106        var last = 0;
107
108        function resize() {
109            var dpr = Math.min(window.devicePixelRatio || 1, 2);
110
111            width = host.clientWidth;
112            height = host.clientHeight;
113            canvas.width = Math.round(width * dpr);
114            canvas.height = Math.round(height * dpr);
115            canvas.style.width = width + "px";
116            canvas.style.height = height + "px";
117            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
118        }
119
120        function spawn(beam, seeded) {
121            var vertical = Math.random() < 0.45;
122            var span = vertical ? height : width;
123            var step = vertical ? cellX : cellY;
124            var lines = Math.max(1, Math.floor((vertical ? width : height) / step));
125            var index = Math.floor(Math.random() * (lines + 1));
126
127            beam.vertical = vertical;
128            beam.line = (vertical ? offsetX : offsetY) + index * step;
129            beam.dir = Math.random() < 0.5 ? 1 : -1;
130            beam.tail = step * (1.6 + Math.random() * 2.4);
131            beam.speed = 140 + Math.random() * 220;

132            beam.life = 0.5 + Math.random() * 0.5;
133
134            if (seeded) {
135                beam.pos = Math.random() * span;
136            } else {
137                beam.pos = beam.dir > 0 ? -beam.tail - Math.random() * span : span + beam.tail + Math.random() * span;
138            }
139
140            return beam;
141        }
142
143        function draw(beam) {
144            var head = beam.pos;
145            var tail = beam.pos - beam.tail * beam.dir;
146            var gradient = beam.vertical
147                ? ctx.createLinearGradient(0, tail, 0, head)
148                : ctx.createLinearGradient(tail, 0, head, 0);
149
150            gradient.addColorStop(0, "rgba(70, 170, 230, 0)");
151            gradient.addColorStop(0.75, "rgba(120, 205, 250, " + (0.35 * beam.life).toFixed(3) + ")");
152            gradient.addColorStop(1, "rgba(215, 245, 255, " + (0.95 * beam.life).toFixed(3) + ")");
153
154            ctx.strokeStyle = gradient;
155            ctx.lineWidth = 1.6;
156            ctx.beginPath();
157
158            if (beam.vertical) {
159                ctx.moveTo(beam.line, tail);
160                ctx.lineTo(beam.line, head);
161            } else {
162                ctx.moveTo(tail, beam.line);
163                ctx.lineTo(head, beam.line);
164            }
165
166            ctx.stroke();
167        }
168
169        function frame(time) {
170            var delta = last ? Math.min((time - last) / 1000, 0.05) : 0;
171
172            last = time;
173            ctx.clearRect(0, 0, width, height);
174
175            for (var i = 0; i < beams.length; i++) {
176                var beam = beams[i];
177                var span = beam.vertical ? height : width;
178
179                beam.pos += beam.speed * beam.dir * delta;
180
181                if (beam.dir > 0 ? beam.pos - beam.tail > span : beam.pos + beam.tail < 0) {
182                    spawn(beam);
183                }
184
185                draw(beam);
186            }
187
188            window.requestAnimationFrame(frame);
189        }
190
191        resize();
192
193        for (var i = 0; i < 11; i++) {
194            beams.push(spawn({}, true));
195        }
196
197        var resizeTimer = null;
198
199        window.addEventListener("resize", function () {
200            window.clearTimeout(resizeTimer);
201            resizeTimer = window.setTimeout(resize, 150);
202        });
203
204        window.requestAnimationFrame(frame);
205    }
206})();