feat: add ocean filter

Author: kim

src/modules/components/elements/OceanFilter.tsx

@@ -0,0 +1,28 @@
+import { JSX } from 'react';
+
+export const OceanFilter = (): JSX.Element => (
+  <filter id="oceanFilter" x="-20%" y="-20%" width="140%" height="140%">
+    <feTurbulence
+      type="fractalNoise"
+      baseFrequency="0.003 0.006"
+      numOctaves="1"
+      seed="3"
+      result="turbulence"
+    >
+      <animate
+        attributeName="baseFrequency"
+        dur="60s"
+        values="0.01 0.02; 0.02 0.01; 0.01 0.02"
+        repeatCount="indefinite"
+      />
+    </feTurbulence>
+
+    <feDisplacementMap
+      in="SourceGraphic"
+      in2="turbulence"
+      scale="20"
+      xChannelSelector="R"
+      yChannelSelector="G"
+    />
+  </filter>
+);

src/modules/components/elements/Sunshine.tsx

@@ -1,25 +1,34 @@
 import { JSX } from 'react';
 
+import { useAnimation } from '@/utils/hooks';
+
+import { OceanFilter } from './OceanFilter';
+
 export const Sunshine = ({
   width,
   height,
 }: {
   width: number;
   height: number;
-}): JSX.Element => (
-  <g>
-    <defs>
-      <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
-        <stop offset="0%" stopColor="rgba(190, 247, 242, 0.37)" />
-        <stop offset="100%" stopColor="#BEF7F200" />
-      </linearGradient>
-    </defs>
-    <polygon
-      id="sunshine"
-      x={width / 8}
-      y={0}
-      fill="url(#grad)"
-      points={`320,0 900,0 1270,${height} 250,${height}`}
-    />
-  </g>
-);
+}): JSX.Element => {
+  const { data: isPlaying } = useAnimation();
+  return (
+    <g>
+      <defs>
+        <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" stopColor="rgba(190, 247, 242, 0.57)" />
+          <stop offset="100%" stopColor="#BEF7F200" />
+        </linearGradient>
+        <OceanFilter />
+      </defs>
+      <polygon
+        id="sunshine"
+        x={width / 8}
+        y={0}
+        fill="url(#grad)"
+        points={`320,0 900,0 1270,${height} 250,${height}`}
+        filter={isPlaying ? 'url(#oceanFilter)' : ''}
+      />
+    </g>
+  );
+};

src/modules/main/MacroView.tsx

@@ -7,6 +7,7 @@ import { PurpleCoral } from '../components/coral/PurpleCoral';
 import { YellowCoral } from '../components/coral/YellowCoral';
 import CoralRose from '../components/coral/corailrose.svg';
 import { Background } from '../components/elements/Background';
+import { OceanFilter } from '../components/elements/OceanFilter';
 import { Sunshine } from '../components/elements/Sunshine';
 
 // eslint-disable-next-line react/function-component-definition
@@ -22,6 +23,9 @@ export function MacroView({
   return (
     <>
       <svg width={width} height={height}>
+        <defs>
+          <OceanFilter />
+        </defs>
         <Background width={width} height={height} isPlaying={isPlaying} />
         <path
           d={`
@@ -33,6 +37,7 @@ export function MacroView({
     Z
   `}
           fill="#f7dc6b"
+          filter={isPlaying ? 'url(#oceanFilter)' : ''}
         />
 
         {isPlaying && <Sunshine width={width} height={height} />}