feat: logo has some rythm

src/components/Header/index.tsx

@@ -1,12 +1,13 @@
 import Link from "next/link";
-import { HeartFill, Radio, Search, Sliders } from "@geist-ui/react-icons";
+import { Logo } from "@/components/Logo";
+import { HeartFill, Search, Sliders } from "@geist-ui/react-icons";
 import { Container, Navigation } from "./style";
 
 export const Header = () => (
   <Container>
     <Link href="/">
       <a>
-        <Radio />
+        <Logo />
       </a>
     </Link>
 

src/components/Logo/index.tsx

@@ -0,0 +1,21 @@
+import styled from "@emotion/styled";
+import { Radio } from "@geist-ui/react-icons";
+import { useFrequency } from "@/lib/hooks/useFrequency";
+import { mapValueToRange } from "@/lib/utils";
+
+type Icon = {
+  alpha: number;
+};
+
+const Icon = styled(Radio)<Icon>`
+  path {
+    color: ${({ alpha }) => `rgba(0, 112, 243, ${alpha})`};
+  }
+`;
+
+export const Logo = () => {
+  const freq = useFrequency();
+  const alpha = mapValueToRange(freq, [0, 255], [0, 1]);
+
+  return <Icon alpha={alpha || 1} />;
+};

src/lib/context/audio.tsx

@@ -9,7 +9,12 @@ export const AudioElementProvider = ({ children }) => {
   return (
     <AudioElementContext.Provider value={audio}>
       {children}
-      <audio ref={audio} autoPlay={true} style={{ display: "none" }} />
+      <audio
+        ref={audio}
+        autoPlay={true}
+        crossOrigin="anonymous"
+        style={{ display: "none" }}
+      />
     </AudioElementContext.Provider>
   );
 };

src/lib/hooks/useFrequency.ts

@@ -0,0 +1,40 @@
+import { useState, useContext, useEffect } from "react";
+import { AudioElementContext } from "@/lib/context/audio";
+
+export function useFrequency() {
+  const audio = useContext(AudioElementContext);
+  const [state, setState] = useState(100);
+
+  useEffect(() => {
+    const ctx = new AudioContext();
+    const analyser = ctx.createAnalyser();
+    const source = ctx.createMediaElementSource(audio.current);
+    analyser.fftSize = 64;
+    analyser.smoothingTimeConstant = 0.1;
+
+    const frequencyData = new Uint8Array(analyser.frequencyBinCount);
+
+    const update = () => {
+      analyser.getByteFrequencyData(frequencyData);
+      setState(frequencyData[1]);
+      return requestAnimationFrame(update);
+    };
+
+    const frame = update();
+
+    const onCanPlay = () => {
+      source.connect(ctx.destination);
+      source.connect(analyser);
+      ctx.resume();
+    };
+
+    audio.current.addEventListener("canplay", onCanPlay);
+
+    return () => {
+      cancelAnimationFrame(frame);
+      audio.current.removeEventListener("canplay", onCanPlay);
+    };
+  }, []);
+
+  return state;
+}

src/lib/utils.ts

@@ -5,3 +5,11 @@ export const localesMap = {
   pl: "Polski",
   ru: "Русский",
 };
+
+export function mapValueToRange(
+  n: number,
+  [a, b]: [number, number],
+  [x, y]: [number, number]
+) {
+  return ((n - a) * (y - x)) / (b - a) + x;
+}