Safari improvements

src/components/CTA.tsx

@@ -4,20 +4,9 @@ import Blob from '@/components/Blob';
 
 const CTA = () => {
   return (
-    <div className="relative flex place-content-center my-24 overflow-y-visible overflow-x-clip">
-      <div className="absolute top-0 left-0 w-full h-full overflow-visible">
-        <Blob className="-left-12 -top-[25%] -z-20" color="pink" size="medium" />
-        <Blob className="left-[15%] top-[35%] -z-20" color="royal" size="medium" />
-        <Image
-          src={Circles}
-          alt={''}
-          className="absolute -top-48 h-screen w-full overflow-visible -z-10 object-cover"
-        />
-        <Blob className="left-[70%] -top-16 -z-20" color="periwinkle" size="medium" />
-      </div>
-
+    <div className="flex place-content-center my-24">
       <div
-        className="mx-6 md:max-w-4xl md:px-36 py-14 sm:px-20 px-12 text-white text-center flex flex-col place-items-center rounded-lg gap-7 font-medium drop-shadow-2xl hover:scale-105 duration-200 scale-100 transition-transform border border-opacity-50 border-white"
+        className="mx-6 md:max-w-4xl md:px-36 py-14 sm:px-20 px-12 text-white text-center flex flex-col place-items-center rounded-lg gap-7 font-medium drop-shadow-2xl hover:scale-105 duration-100 scale-100 transition-transform"
         style={{
           backgroundColor: 'hsla(226,100%,93%,1)',
           backgroundImage: `radial-gradient(circle at 58% 94%, hsla(43,96%,56%,1) 0px, transparent 50%),

src/lib/useBlobBg.tsx

@@ -56,7 +56,7 @@ const generateKeyframes = (count: number, id: string, cssVars: Record<string, st
   return `@keyframes switchColor-${id} { ${frames.join(' ')} }`;
 };
 
-const useBlobBg = (): [JSX.Element, CSSProperties] => {
+const useBlobBg = (animation: boolean): [JSX.Element, CSSProperties] => {
   const [data, setData] = useState<ReturnType<typeof createBg> & { frames: string }>();
   useEffect(() => {
     const bg = createBg();
@@ -88,7 +88,9 @@ const useBlobBg = (): [JSX.Element, CSSProperties] => {
       ...data?.cssVars,
       backgroundColor: 'hsla(0,0%,100%,0.5)',
       background: data?.background,
-      animation: `15000ms infinite alternate switchColor-${data?.bgInstance} cubic-bezier(0.4, 0, 0.6, 1)`,
+      animation: animation
+        ? `15000ms infinite alternate switchColor-${data?.bgInstance} cubic-bezier(0.4, 0, 0.6, 1)`
+        : '',
     },
   ];
 };

src/pages/index.tsx

@@ -11,7 +11,7 @@ import Testimonials from '@/components/Testimonials';
 import Projects from '@/components/Projects';
 
 const Header = () => {
-  const [frames, bgStyles] = useBlobBg();
+  const [frames, bgStyles] = useBlobBg(false);
 
   return (
     <div className="h-screen">

src/styles/globals.css

@@ -10,24 +10,10 @@ html {
   @apply text-transparent bg-clip-text bg-gradient-to-br from-[#3634BB] via-royal to-cornflower-500;
 }
 
-@keyframes animatedBackground {
-  from {
-    background-position: 0 0;
-  }
-  to {
-    background-position: 100% 0;
-  }
-}
-
 .bg-stars {
   background-image: url('/stars.png'), linear-gradient(lightgray, lightgray);
   background-size: cover, cover, 50%;
   background-repeat: repeat-x, no-repeat, no-repeat;
-  animation-timing-function: ease-in-out;
-  animation: animatedBackground 40s linear infinite alternate;
-  @media (max-width: 640px) {
-    animation: animatedBackground 120s linear infinite alternate;
-  }
 }
 
 @layer utilities {