Add new Pulse effect in vanilla CSS

app/soapbox/features/public_layout/components/header.tsx

@@ -72,7 +72,7 @@ const Header = () => {
       <nav className='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8' aria-label='Header'>
         <div className='w-full py-6 flex items-center justify-between border-b border-indigo-500 lg:border-none'>
           <div className='flex items-center justify-center relative w-36'>
-            <div className='hidden sm:block absolute z-0 left-0 top-0 -ml-[330px] -mt-[400px]'>
+            <div className='hidden sm:block absolute z-0 -top-24 -left-6'>
               <Pulse />
             </div>
             <Link to='/' className='z-10'>

app/soapbox/features/public_layout/components/pulse.tsx

@@ -1,38 +1,14 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
-import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
-
-const LottieAsync = () => {
-  return import(/* webpackChunkName: "lottie" */'soapbox/components/lottie');
-};
-
-const fetchAnimationData = () => {
-  return import(/* webpackChunkName: "lottie" */'images/circles.json');
-};
-
-/** Homepage pulse animation chunked to not bloat the entrypoint */
-const Pulse: React.FC = () => {
-  const [animationData, setAnimationData] = useState<any>(undefined);
-
-  useEffect(() => {
-    fetchAnimationData()
-      .then(({ default: json }) => {
-        setAnimationData(json);
-      })
-      .catch(console.error);
-  }, []);
-
-  if (animationData) {
-    return (
-      <BundleContainer fetchComponent={LottieAsync}>
-        {Component => (
-          <Component animationData={animationData} width={800} height={800} />
-        )}
-      </BundleContainer>
-    );
-  } else {
-    return null;
-  }
-};
+const Pulse = () => (
+  <div className='relative'>
+    <div className='relative w-48 h-48 bg-white rounded-full'>
+      <div className='animate-pulse-scale-4 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 -z-[1] pointer-events-none' />
+      <div className='animate-pulse-scale-3 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 -z-[1] pointer-events-none' />
+      <div className='animate-pulse-scale-2 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 -z-[1] pointer-events-none' />
+      <div className='animate-pulse-scale-1 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 -z-[1] pointer-events-none' />
+    </div>
+  </div>
+);
 
 export default Pulse;

tailwind.config.js

@@ -47,6 +47,30 @@ module.exports = {
         'bg-shape-1': true,
         'bg-shape-2': true,
       }),
+      animation: {
+        'pulse-scale-4': 'pulse-scale-4 3s linear infinite',
+        'pulse-scale-3': 'pulse-scale-3 3s 0.5s linear infinite',
+        'pulse-scale-2': 'pulse-scale-2 3s 1s linear infinite',
+        'pulse-scale-1': 'pulse-scale-1 3s 1.5s linear infinite',
+      },
+      keyframes: {
+        'pulse-scale-4': {
+          from: { opacity: '0.4' },
+          to: { opacity: 0, transform: 'scale(4)' },
+        },
+        'pulse-scale-3': {
+          from: { opacity: '0.4' },
+          to: { opacity: 0, transform: 'scale(3.5)' },
+        },
+        'pulse-scale-2': {
+          from: { opacity: '0.4' },
+          to: { opacity: 0, transform: 'scale(3)' },
+        },
+        'pulse-scale-1': {
+          from: { opacity: '0.4' },
+          to: { opacity: 0, transform: 'scale(2.5)' },
+        },
+      },
     },
   },
   plugins: [