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 border-radius: 1px;
47 animation: wave 2.5s ease-in-out infinite;
48 }
49
50 @keyframes wave {
51 0%, 100% {
52 /* Start/End Height */
53 height: 5px;
54 }
55 50% {
56 /* Peak Height */
57 height: 30px;
58 }
59 }
60 `}
61 </style>
62 </div>
63 );
64}