1
@keyframes neon-flicker {
2
  0%,
3
  100% {
4
    opacity: 1;
5
    box-shadow: 0 0 10px #00ffa3, 0 0 30px #00ffa3;
6
  }
7
  50% {
8
    opacity: 1;
9
    box-shadow: 0 0 15px #00ffa3, 0 0 40px #00ffa3;
10
  }
11
}
12

13
.flicker {
14
  animation: neon-flicker 0.8s infinite alternate;
15
}
16
  
17
@keyframes spin {
18
  0% {
19
    transform: rotate(0deg);
20
  }
21
  100% {
22
    transform: rotate(360deg);
23
  }
24
}
25

26
.spin {
27
  animation: spin 1.5s linear infinite;
28
}

1
import React from 'react';
2
        
3
const StoryAvatar = ({
4
  children,
5
  spin = false, // * true value would make the background gradient spin
6
  flicker = false, // * true value would add a neon glowing shadow flicker effect
7
  backgroundClassName,
8
  wrapperClassName,
9
  className
10
}: {
11
  // * Remove these data types for javascript
12
  children?: React.ReactNode;
13
  spin?: boolean;
14
  flicker?: boolean;
15
  backgroundClassName?: string;
16
  wrapperClassName?: string;
17
  className?: string;
18
  // * ----
19
}) => {
20
  return (
21
    // * wrapper div
22
    <div className={`rounded-full overflow-hidden p-[5px] flex items-center justify-center relative ${wrapperClassName} ${flicker && 'flicker'}`} >
23
      {/* background gradient div */}
24
      <div className={`rounded-full ${spin && 'spin'} overflow-hidden bg-gradient-to-br from-orange-400 to-pink-800 h-full w-full absolute z-0 ${backgroundClassName}`} />
25
      {/* your component wrapper div */}
26
      <div className={`rounded-full overflow-hidden border-[1px] border-black z-10 ${className}`}>
27
        {children}
28
      </div>
29
    </div>
30
  );
31
};
32

33
export default StoryAvatar;