My personal site hosted @ https://indexx.dev
indexx.dev
1import React from "react";
2
3const BAR_COUNT = 15;
4const BAR_ANIMATION_DELAYS = [
5 "0.3s",
6 "0.7s",
7 "0.1s",
8 "0.9s",
9 "0.4s",
10 "0.2s",
11 "0.8s",
12 "0.5s",
13 "0s",
14 "0.6s",
15 "0.3s",
16 "0.9s",
17 "0.1s",
18 "0.7s",
19 "0.4s",
20];
21
22export default function AudioVisualizer() {
23 return (
24 <div className="visualizer">
25 {Array(BAR_COUNT).fill(0).map((_, index) => (
26 <div
27 key={index}
28 className="bar"
29 style={{ animationDelay: BAR_ANIMATION_DELAYS[index] }}
30 >
31 </div>
32 ))}
33
34 <style jsx>
35 {`
36 .visualizer {
37 display: flex;
38 align-items: center;
39 gap: 1px;
40 height: 50px;
41 }
42
43 .bar {
44 width: 2px;
45 /*background: linear-gradient(to top, #1b1bff, #8585fe, #1b1bff);*/
46 background: rgb(0, 151, 188);
47 border-radius: 1px;
48 animation: wave 2.5s ease-in-out infinite;
49 }
50
51 @keyframes wave {
52 0%, 100% {
53 /* Start/End Height */
54 height: 5px;
55 }
56 50% {
57 /* Peak Height */
58 height: 30px;
59 }
60 }
61 `}
62 </style>
63 </div>
64 );
65}