hero text color animation

Author: frontendfixer

src/components/AltHeroSection.tsx

@@ -5,7 +5,7 @@ const AltHeroSection = () => {
   return (
     <div className="flex flex-col items-center justify-center">
       <div className="my-16 flex flex-col items-center px-3 pb-6 sm:mb-20 sm:mt-20">
-        <h1 className="mb-16  text-center text-5xl font-black md:w-3/4 md:text-7xl lg:text-9xl dark:text-primary-400">
+        <h1 className="animate-text mb-16 bg-gradient-to-r from-primary-600 via-rose-500 to-primary-600 bg-clip-text text-center text-5xl font-black text-transparent md:w-3/4 md:text-7xl  lg:text-9xl">
           FullStack Web Developer
         </h1>
         <p className="text-center text-xl text-dark-900 dark:text-white">

tailwind.config.js

@@ -44,6 +44,7 @@ export default {
         slideUp: 'slideUp 0.5s ease-in-out forwards',
         slideLeft: 'slideLeft 0.5s ease-in-out forwards',
         fadeIn: 'fadeIn 0.5s ease-in-out forwards',
+        text: 'text 5s ease infinite alternate',
       },
       keyframes: {
         slideUp: {
@@ -61,6 +62,16 @@ export default {
           '0%': { opacity: 0, transform: 'scale(0.5)' },
           '100%': { opacity: 1, transform: 'scale(1)' },
         },
+        text: {
+          '0%, 100%': {
+            backgroundSize: '200% 200%',
+            backgroundPosition: 'left center',
+          },
+          '50%': {
+            backgroundSize: '200% 200%',
+            backgroundPosition: 'right center',
+          },
+        },
       },
     },
     container: {