fix: animations where weird

src/components/SwitchableComponent.tsx

@@ -1,4 +1,4 @@
-import { Variant, AnimatePresence, motion } from "framer-motion";
+import { Variant, AnimatePresence, m } from "framer-motion";
 import React from "react";
 
 const SwitchableComponentContext = React.createContext<SwitchableComponentContextType | undefined>(undefined);
@@ -33,6 +33,7 @@ const variants: Record<string, Variant> = {
   hidden: { y: 50, opacity: 0, position: 'absolute' },
   show: {
     y: 0,
+    x: 0,
     opacity: 1,
     position: 'relative',
     transition: {
@@ -44,18 +45,21 @@ const variants: Record<string, Variant> = {
 };
 
 export const SwitchableComponent = ({ children, index }: React.PropsWithChildren<{ index: string }>) => {
+  const [width, setWidth] = React.useState<number>()
   return (
     <AnimatePresence>
-      <motion.div
+      <m.div
         key={index}
         initial="hidden"
         animate="show"
         exit="exit"
         variants={variants}
         className="h-full w-full"
+        style={{maxWidth: width ?? 'auto'}}
+        onTransitionEnd={(e) => setWidth(e.currentTarget.getBoundingClientRect().width!)}
       >
         {children}
-      </motion.div>
+      </m.div>
     </AnimatePresence>
   );
 };

src/components/lume/LumeIdentity/LumeIdentity.tsx

@@ -28,18 +28,18 @@ const LumeIdentity: React.FC<Props> = ({ }) => {
     </div>
     <div className="w-full z-10 flex flex-col items-center justify-center gap-10">
       <div className="flex flex-col items-start justify-start gap-10">
-        <h2 className="w-full text-5xl font-normal leading-10 text-white">
+        <h2 className="w-full text-5xl font-normal leading-14 text-white">
           {isSubmitButtonInView || isLoginWithAccountKey ? 'Sign in with Lume' : null}
           {isCreatingAccount && !isShowingSeedPhrase ? 'Set up your account key' : null}
           {isShowingSeedPhrase ? "Here's your account key" : null}
         </h2>
       </div>
       <div className="flex flex-col items-start justify-start gap-2.5">
-        <SwitchableComponent index={visibleComponent.index}>
           <LazyMotion features={domAnimation}>
-            <visibleComponent.render />
+            <SwitchableComponent index={visibleComponent.index}>
+                <visibleComponent.render />
+            </SwitchableComponent>
           </LazyMotion>
-        </SwitchableComponent>
         {!isFinalStep ? <>
           <div className={`relative h-7 w-full overflow-hidden ${coloredOrLine}`}>
             <svg width="409" height="28" className="max-w-full -left-1/2" viewBox="0 0 409 28" fill="none" xmlns="http://www.w3.org/2000/svg">

src/components/lume/LumeIdentity/components.tsx

@@ -47,15 +47,16 @@ const SeedPhraseInputComponent = ({ }) => {
 
 const SetupAccountKeyComponent = () => {
   const { setVisibleComponent } = useSwitchableComponent();
-  const [width, setWidth] = React.useState(0);
+  const [width, setWidth] = React.useState<number>();
 
   return (
     <m.div
       initial={{ y: 50 }}
       animate={{ y: 0 }}
-      exit={{ y: -50, height: 'auto', maxWidth: width }}
+      exit={{ y: -50, height: 'auto' }}
       transition={{ type: "just", delay: 0.1 }}
       className="min-h-12 h-full max-w-full"
+      style={{ maxWidth: width ?? 'auto' }}
       ref={(t) => setTimeout(() => setWidth(t?.getBoundingClientRect().width!), 0)}
     >
       <Button className='w-full h-full' onClick={() => setVisibleComponent(components.SeedPhraseGeneration)}>
@@ -90,19 +91,14 @@ const SeedPhraseGenerationComponent = ({ phraseLength = 12 }) => {
       <AnimatePresence>
         {step === 1 ? <m.div className={`z-10 absolute top-0 bottom-0 left-0 right-0 bg-black pointer-events-none`}
           initial={{ opacity: 0 }}
-          animate={{ opacity: 0.75, top: -120, left: -20, right: -20, bottom: 120 }}
+          animate={{ opacity: 0.75, top: -200, left: -20, right: -20, bottom: 120 }}
           transition={{ type: "tween", duration: 0.1 }}
-        // onAnimationComplete={() => {
-        //   setTimeout(() => {
-        //     setOpacity(1);
-        //   }, 2000);
-        // }}
         ></m.div> : null}
       </AnimatePresence>
       <div className="z-20 relative mb-2.5 w-full h-full flex-wrap justify-center items-center gap-2.5 inline-flex">
         {phrases.map((phrase, index) => (
-          <div className={`justify-center items-center gap-2.5 flex w-[calc(33%-10px)] h-10 rounded border border-current relative ring-current text-neutral-700`}>
+          <div key={`SeedPhrase_${index}`} className={`justify-center items-center gap-2.5 flex w-[calc(33%-10px)] h-10 rounded border border-current relative ring-current text-neutral-700`}>
-            <span className=" text-white text-lg font-normal leading-normal w-full h-fit px-2.5 bg-transparent text-center">{phrase}</span>
+            <span className=" text-white text-md font-normal leading-normal w-full h-fit px-2.5 bg-transparent text-center">{phrase}</span>
             <span className="left-[6px] top-0 absolute text-current text-xs font-normal leading-normal">{index + 1}</span>
           </div>
         ))}