sympa le 24

vite-wrapped/src/steps/welcome.tsx

@@ -8,8 +8,9 @@ type VariantProps = {
 };
 
 type NudgedVariantProps = VariantProps & {
-    nudge: number;
-    };
+  nudge: number;
+  id: number;
+};
 
 const starVariants: Variants = {
   "1": (props: VariantProps) => ({
@@ -43,35 +44,38 @@ const starVariants: Variants = {
   }),
 };
 
+
 const letterVariants: Variants = {
   "1": (props: NudgedVariantProps) => ({
-    rotate: (360 - 45) * props.nudge,
-    scale: 4,
+    rotate: 360 * props.nudge + props.id * 5,
+    x: -props.nudge * props.id * 15,
+    scale: 9 - props.id / 2,
     transition: {
       duration: 2,
-      ease: 'easeOut',
-      delay: 1.5 + props.delay,
+      ease: "easeInOut",
+      //delay: 1.5 + props.delay + props.id / 10,
+      delay: 1.5 + props.id/50,
     },
   }),
   "2": (props: NudgedVariantProps) => ({
-    rotate: 360 * props.nudge,
-    x: -props.nudge * 19,
-    z:0.1,
-    scale: 4,
+    rotate: 360 * props.nudge + props.id * 5,
+    x: -props.nudge * props.id * 15,
+    z: 0.1,
+    scale: 9 - props.id / 2,
     transition: {
       duration: 2,
-      ease: 'easeInOut',
-      delay: props.delay,
+      ease: "linear",
+      //delay: props.delay + props.id / 10,
     },
   }),
   "3": (props: NudgedVariantProps) => ({
     rotate: 361 * props.nudge,
-    x: -props.nudge * 20,
+    x: -props.nudge * 30,
     scale: 4,
-    z:0.2,
+    z: 0.2,
     transition: {
-      duration: 6,
-      ease: 'easeInOut',
+      duration: 1,
+      ease: "easeInOut",
       delay: props.delay,
     },
   }),
@@ -132,25 +136,41 @@ function Welcome({ progress }: StepProps) {
       <motion.div
         style={{
           display: "flex",
-          position: "absolute",
+          position: "relative",
         }}
       >
-        <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>
+        {Array.from({ length: 10 }).map((_, i) => (
+          <motion.div
+            variants={letterVariants}
+            animate={starVariant}
+            custom={{ delay: 0, nudge: 1, id: 9-i }}
+            style={
+              letterStyle({
+                delay: 0.1,
+                nudge: -1,
+                id: 9-i,
+              }) as React.CSSProperties
+            }
+          >
+            2
+          </motion.div>
+        ))}
+        {Array.from({ length: 10 }).map((_, i) => (
+          <motion.div
+            variants={letterVariants}
+            animate={starVariant}
+            custom={{ delay: 0.1, nudge: -1, id: 9-i }}
+            style={
+              letterStyle({
+                delay: 0.1,
+                nudge: -1,
+                id: 9-i,
+              }) as React.CSSProperties
+            }
+          >
+            4
+          </motion.div>
+        ))}
       </motion.div>
     </div>
   );
@@ -182,9 +202,15 @@ const starStyle = {
     "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 = {
+const letterStyle = (props: NudgedVariantProps) => ({
+  transform: `translateX(${Math.floor(props.nudge * props.id * 100)}px)`,
   scale: 0,
-  fontSize: "3em"
-};
+  fontSize: "3em",
+  position: "absolute",
+  color: "transparent",
+  backgroundClip: "text",
+  backgroundImage: "linear-gradient(90deg, rgb(95, 247, 68),rgb(247, 255, 19))",
+  //webkitTextStroke: "1px white",
+});
 
 export default Welcome;