feat(website): add slot and caret animation

guilhermerodz · Feb 18, 2024 · 5b81f0e · 5b81f0e
1 parent c7acb78
commit 5b81f0e
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 12 deletions.
diff --git a/website/src/app/(pages)/(home)/_components/showcase.tsx b/website/src/app/(pages)/(home)/_components/showcase.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import { useForm, Controller } from 'react-hook-form'
 
 import { OTPInput } from 'otp-input'
-import { cn } from '../../../../lib/utils'
+import { cn } from '@/lib/utils'
 
 type FormValues = {
   otp: string
@@ -29,8 +29,10 @@ export function Showcase({ className, ...props }: { className?: string }) {
   })
 
   React.useEffect(() => {
-    setFocus('otp')
-  }, [setFocus, setValue])
+    setTimeout(() => {
+      setFocus('otp')
+    }, 2000)
+  }, [setFocus])
 
   function onSubmit(values: FormValues) {
     if (values.otp !== '123   ') {
@@ -55,19 +57,19 @@ export function Showcase({ className, ...props }: { className?: string }) {
         render={({ field }) => (
           <OTPInput
             {...field}
-            containerClassName={cn('group flex items-center', {
-              'opacity-50': formState.disabled,
-            })}
+            containerClassName={cn('group flex items-center')}
             maxLength={6}
             // regexp={null} // Allow everything
             render={({ slots, isFocused }) => (
               <>
                 <div className="flex">
                   {slots.slice(0, 3).map((slot, idx) => (
                     <Slot
+                      isFocused={isFocused}
                       key={idx}
                       slotChar={slot.char}
                       isSlotActive={slot.isActive}
+                      animateIdx={idx}
                     />
                   ))}
                 </div>
@@ -80,6 +82,7 @@ export function Showcase({ className, ...props }: { className?: string }) {
                 <div className="flex">
                   {slots.slice(3).map((slot, idx) => (
                     <Slot
+                      isFocused={isFocused}
                       key={idx}
                       slotChar={slot.char}
                       isSlotActive={slot.isActive}
@@ -98,29 +101,50 @@ export function Showcase({ className, ...props }: { className?: string }) {
 function Slot(props: {
   slotChar: string | null
   isSlotActive: boolean
-  // isFocused: boolean
+  isFocused: boolean
+  animateIdx?: number
 }) {
+  const willAnimateChar = props.animateIdx !== undefined && props.animateIdx < 2
+  const willAnimateCaret = props.animateIdx === 2
+
   return (
     <div
       className={cn(
-        'relative w-10 md:w-20 h-14 md:h-28 text-[2rem] lg:text-[4rem] flex items-center justify-center border-border border-y border-r first:border-l first:rounded-l-md last:rounded-r-md transition-all [transition-duration:300ms] [--bsh-width:0] [box-shadow:0_0_0_var(--bsh-width)_hsl(var(--accent-foreground)_/_1)]',
+        'relative w-10 md:w-20 h-14 md:h-28 text-[2rem] lg:text-[4rem] flex items-center justify-center border-border border-y border-r first:border-l first:rounded-l-md last:rounded-r-md transition-all [transition-duration:300ms] [--bsh-width:0] [box-shadow:0_0_0_var(--bsh-width)_hsl(var(--accent-foreground)_/_1)] ',
         'group-hover:border-accent-foreground/20 group-focus-within:border-accent-foreground/20',
         {
           // 'group-focus-within:border-accent-foreground/20': props.isFocused,
           '[--bsh-width:4px] z-10': props.isSlotActive,
         },
       )}
     >
-      <div className="">{props.slotChar || ' '}</div>
+      <div
+        className={cn('duration-1000', {
+          'opacity-0 animate-fade-in': willAnimateChar,
+          '[animation-delay:1.5s]': props.animateIdx === 0,
+          '[animation-delay:2s]': props.animateIdx === 1,
+        })}
+      >
+        {props.slotChar && <div>{props.slotChar}</div>}
+        {props.slotChar === null && ' '}
+      </div>
 
-      {props.isSlotActive && props.slotChar === null && <FakeCaret />}
+      {props.isSlotActive && props.slotChar === null && (
+        <div
+          className={cn({
+            'opacity-0 animate-fade-in': willAnimateCaret,
+          })}
+        >
+          <FakeCaret />
+        </div>
+      )}
     </div>
   )
 }
 
 function FakeCaret() {
   return (
-    <div className="absolute pointer-events-none inset-0 flex items-center justify-center animate-caret-blink">
+    <div className="absolute pointer-events-none inset-0 flex items-center justify-center animate-caret-blink [animate-delay:inherit]">
       <div className="w-px h-8 md:w-0.5 md:h-16 bg-white" />
     </div>
   )

diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts
@@ -76,10 +76,16 @@ const config = {
             opacity: '1',
           },
           '20%,50%': {
-            'opacity': '0',
+            opacity: '0',
           },
         },
 
+        'fade-in': {
+          from: {
+            opacity: '0',
+          },
+          to: { opacity: '1' },
+        },
         'fade-up': {
           from: {
             opacity: '0',
@@ -93,6 +99,7 @@ const config = {
         'accordion-up': 'accordion-up 0.2s ease-out',
 
         'caret-blink': 'caret-blink 1.2s ease-out infinite',
+        'fade-in': 'fade-in 0.3s ease-out forwards',
         'fade-up': 'fade-up 1s ease-out forwards',
       },
     },