Making progress

vite-wrapped/public/square.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+    id="Calque_1"
+    data-name="Calque 1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 400 400"
+>
+    <polygon stroke="white" fill="#00000000"
+    stroke-width="1em"
+    points="0 0 400 0 400 400 0 400"
+    />
+</svg>

vite-wrapped/src/App.tsx

 // @deno-types="@types/react"
 import React, { useEffect, useState } from "react";
 
-import { motion, useMotionValue, useMotionValueEvent } from "framer-motion";
+import {
+  AnimatePresence,
+  motion,
+  useMotionValue,
+} from "framer-motion";
 import { useAnimationFrame } from "framer-motion";
 import Welcome from "./steps/welcome.tsx";
 import GlobalTop from "./steps/GlobalTop.tsx";
   },
 ];
 
+const enterAnimation = {
+  opacity: 0,
+  scale: 0,
+  transition: {
+    duration: 0.25,
+  },
+};
+
+const exitAnimation = {
+  opacity: 0,
+  scale: 0,
+  transition: {
+    duration: 0.25,
+  },
+};
+
 function App() {
   const [currentStep, setCurrentStep] = useState(0);
   const animationDuration = 10_000;
             right: "0",
           }}
         >
-          <CurrentStepContent key={`${currentStep}`} progress={animationProgress} />
+          <AnimatePresence>
+            <motion.span
+              key={`${currentStep}`}
+              initial={enterAnimation}
+              exit={exitAnimation}
+              animate={{ opacity: 1, scale: 1 }}
+            >
+              <CurrentStepContent progress={animationProgress} />
+            </motion.span>
+          </AnimatePresence>
           {/*  <Welcome progress={animationProgress} /> */}
         </div>
         <div style={{ zIndex: 100, fontSize: "5px" }}>

vite-wrapped/src/components/mask/Masked.tsx

 import React from "react";
 
-type Mask = "Star";
+type Mask = "Star" | "Square";
 
 function Masked({
   children,
     if (mask === "Star") {
       setMaskUrl("/star.svg");
     }
+    if (mask === "Square") {
+      setMaskUrl("/square.svg");
+    }
   }, [mask]);
 
   return (

vite-wrapped/src/steps/GlobalTop.tsx

       repeat: 0,
       type: "spring",
       ease: "easeInOut",
-      delay: 0.5 + props.delay,
+      delay: 1.5 + props.delay,
     },
   }),
   "2": (props: VariantProps) => ({

vite-wrapped/src/steps/welcome.tsx

   delay: number;
 };
 
+type NudgedVariantProps = VariantProps & {
+    nudge: number;
+    };
+
 const starVariants: Variants = {
   "1": (props: VariantProps) => ({
     rotate: 360,
     transition: {
       duration: 2,
       repeat: 0,
-      delay: props.delay,
+      delay: 1.5 + props.delay,
     },
   }),
   "2": (props: VariantProps) => ({
-    scale: 3,
+    scale: 10,
     x: props.delay,
     rotate: props.delay + 365 * 2,
     transition: {
-      duration: 1,
+      duration: 1.5,
       repeat: 0,
       delay: props.delay,
     },
   }),
   "3": (props: VariantProps) => ({
-    scale: 3,
+    scale: 10,
     rotate: props.delay + 365 * 3,
     transition: {
       duration: 6,
   }),
 };
 
-const textAreaVariants: Variants = {
-  "1": {
-    opacity: 1,
-    width: "80%",
-    height: "80%",
+const letterVariants: Variants = {
+  "1": (props: NudgedVariantProps) => ({
+    rotate: (360 - 45) * props.nudge,
+    scale: 4,
     transition: {
-      duration: 0.5,
+      duration: 2,
+      ease: 'easeOut',
+      delay: 1.5 + props.delay,
     },
-  },
-  "2": {
-    opacity: 1,
-    width: "80%",
-    height: "80%",
+  }),
+  "2": (props: NudgedVariantProps) => ({
+    rotate: 360 * props.nudge,
+    x: -props.nudge * 19,
+    z:0.1,
+    scale: 4,
     transition: {
-      duration: 1.5,
+      duration: 2,
+      ease: 'easeInOut',
+      delay: props.delay,
     },
-  },
-  "3": {
-    opacity: 1,
-    width: "80%",
-    height: "80%",
+  }),
+  "3": (props: NudgedVariantProps) => ({
+    rotate: 361 * props.nudge,
+    x: -props.nudge * 20,
+    scale: 4,
+    z:0.2,
     transition: {
-      duration: 1,
+      duration: 6,
+      ease: 'easeInOut',
+      delay: props.delay,
     },
-  },
+  }),
 };
 
 type RunningAnimations = {
           onAnimationComplete={() => animationComplete(starVariant)}
         >
           <div style={{ width: "800px", height: "800px" }}>
-            <Masked mask="Star" style={starStyle} />
+            <Masked mask="Square" style={starStyle} />
           </div>
         </motion.div>
       ))}
 
+      <motion.div
+        style={{
+          display: "flex",
+          position: "absolute",
+        }}
+      >
+        <motion.div
+          variants={letterVariants}
+          animate={starVariant}
+          custom={{ delay: 0, nudge: 1 }}
+          style={letterStyle}
+        >
+          2
+        </motion.div>
+        <motion.div
+          variants={letterVariants}
+          animate={starVariant}
+          custom={{ delay: 0.1, nudge: -1 }}
+          style={letterStyle}
+        >
+          4
+        </motion.div>
+      </motion.div>
     </div>
   );
 }
     "radial-gradient(circle at center center,rgb(95, 247, 68),rgb(247, 255, 19)), repeating-radial-gradient(circle at center center,rgb(0, 255, 140),rgb(77, 247, 68), 10px, transparent 90px, transparent 10px)",
 };
 
+const letterStyle = {
+  scale: 0,
+  fontSize: "3em"
+};
 
 export default Welcome;