feat(landing): HeroSection AlternatingText

vscubing · Aug 16, 2024 · 1f37262 · 1f37262
1 parent e66f74a
commit 1f37262
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/src/features/landing/sections/HeroSection.tsx b/src/features/landing/sections/HeroSection.tsx
@@ -18,8 +18,8 @@ export function HeroSection() {
               speedcubing
             </span>
           </h1>
-          <p className='mb-6 text-white-100'>
-            <span>Compete</span> with our online contests
+          <p className='mb-6 flex items-center gap-2 text-white-100'>
+            <AlternatingText text1='Improve' text2='Compete' text3='Have fun' /> <span>with our online contests</span>
           </p>
           <PrimaryButton asChild className='h-auto px-20 py-5'>
             <Link to='/'>Start cubing now</Link>
@@ -54,6 +54,22 @@ export function HeroSection() {
   )
 }
 
+function AlternatingText({ text1, text2, text3 }: { text1: string; text2: string; text3: string }) {
+  return (
+    <span className='relative inline-block h-9 w-[6.5rem] overflow-y-clip rounded-xl border border-secondary-20 text-center font-medium'>
+      <span className='animate-landing-alternating-text vertical-alignment-fix absolute left-0 h-9 w-full'>
+        {text1}
+      </span>
+      <span className='animate-landing-alternating-text vertical-alignment-fix absolute left-0 h-9 w-full [animation-delay:-2s]'>
+        {text2}
+      </span>
+      <span className='animate-landing-alternating-text vertical-alignment-fix absolute left-0 h-9 w-full [animation-delay:-4s]'>
+        {text3}
+      </span>
+    </span>
+  )
+}
+
 function TwistySection() {
   const player = useTwistyPlayer('R U', 'R U')
 

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -64,10 +64,16 @@ export default {
           from: { transform: 'rotate(0deg)' },
           to: { transform: 'rotate(360deg)' },
         },
+        'landing-alternating-text': {
+          '0%,20%': { transform: 'translateY(80%)' },
+          '33.3%,53.3%': { transform: 'translateY(0)' },
+          '66.6%,86.6%,100%': { transform: 'translateY(-80%)' },
+        },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
+        'landing-alternating-text': 'landing-alternating-text 6s ease-in infinite',
       },
       spacing: {
         15: '3.75rem',