ça avance

vite-wrapped/src/App.tsx

@@ -2,20 +2,19 @@ import "./App.css";
 // @deno-types="@types/react"
 import React, { useEffect, useState } from "react";
 
-import Canvas from "./layout/canvas.tsx";
-import Masked from "./components/mask/Masked.tsx";
 import { motion, useMotionValue, useMotionValueEvent } from "framer-motion";
 import { useAnimationFrame } from "framer-motion";
 import Welcome from "./steps/welcome.tsx";
+import GlobalTop from "./steps/GlobalTop.tsx";
 
 const steps = [
   {
     title: "Step 1",
-    content: "Content of step 1",
+    content: Welcome,
   },
   {
     title: "Step 2",
-    content: "Content of step 2",
+    content: GlobalTop,
   },
   {
     title: "Step 3",
@@ -25,26 +24,46 @@ const steps = [
 
 function App() {
   const [currentStep, setCurrentStep] = useState(0);
-  const animationDuration = 5000;
+  const animationDuration = 10_000;
   const animationProgress = useMotionValue(0);
-  const [animationFrame, setAnimationFrame] = useState(0);
   const [initialAnimationFrame, setInitialAnimationFrame] = useState(0);
 
   useAnimationFrame((time, delta) => {
     if (time - initialAnimationFrame >= animationDuration) {
       setInitialAnimationFrame(time);
-      setCurrentStep((prev) => prev + 1);
+      //setCurrentStep((prev) => prev + 1);
       animationProgress.set(0);
     } else {
       animationProgress.set(animationProgress.get() + delta);
     }
-    setAnimationFrame(time);
   });
 
+  useEffect(() => {
+    animationProgress.set(0);
+    setInitialAnimationFrame(0);
+  }, [currentStep]);
+
+  const CurrentStepContent = steps[currentStep].content;
   return (
     <>
       <div style={page as React.CSSProperties}>
-        <Welcome progress={animationProgress} />
+        <div
+          style={{
+            position: "absolute",
+            top: "0",
+            bottom: "0",
+            left: "0",
+            right: "0",
+          }}
+        >
+          <CurrentStepContent key={`${currentStep}`} progress={animationProgress} />
+          {/*  <Welcome progress={animationProgress} /> */}
+        </div>
+        <div style={{ zIndex: 100, fontSize: "5px" }}>
+          <h1>Step selector (current = {currentStep})</h1>
+          <button onClick={() => setCurrentStep(0)}>Step 1</button>
+          <button onClick={() => setCurrentStep(1)}>Step 2</button>
+        </div>
       </div>
     </>
   );
@@ -53,8 +72,8 @@ function App() {
 const page = {
   display: "flex",
   position: "relative",
-  justifyContent: "center",
-  alignItems: "center",
+  justifyContent: "start",
+  alignItems: "start",
   margin: 0,
   padding: 0,
   width: "100%",

vite-wrapped/src/steps/GlobalTop.tsx

@@ -0,0 +1,257 @@
+import { motion, Variants } from "framer-motion";
+import { StepProps } from "./stepProps.ts";
+import Masked from "../components/mask/Masked.tsx";
+import React, { useState, useEffect, useRef } from "react";
+
+type VariantProps = {
+  delay: number;
+};
+
+const leftSideVariants: Variants = {
+  "1": (props: VariantProps) => ({
+    width: 1,
+    transition: {
+      duration: 1.5,
+      repeat: 0,
+      type: "spring",
+      ease: "easeInOut",
+      delay: 0.5 + props.delay,
+    },
+  }),
+  "2": (props: VariantProps) => ({
+    width: 10,
+    transition: {
+      duration: 1,
+      repeat: 0,
+      delay: 0,
+    },
+  }),
+  "3": (props: VariantProps) => ({
+    width: 100 + props.delay * 400,
+    transition: {
+      duration: 2,
+      repeat: 0,
+      ease: "easeInOut",
+      delay: 0,
+    },
+  }),
+};
+
+const textAreaVariants: Variants = {
+  "1": {
+    opacity: 1,
+    width: "80%",
+    height: "80%",
+    transition: {
+      duration: 0.5,
+    },
+  },
+  "2": {
+    opacity: 1,
+    width: "80%",
+    height: "80%",
+    transition: {
+      duration: 1.5,
+    },
+  },
+  "3": {
+    opacity: 1,
+    width: "80%",
+    height: "80%",
+    transition: {
+      duration: 1,
+    },
+  },
+};
+
+type RunningAnimations = {
+  [key: string]: number;
+};
+
+function usePrevious(value: any) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+function GlobalTop({ progress }: StepProps) {
+  const [starVariant, setStarVariant] = useState("1");
+  const [runningAnimations, setRunningAnimations] = useState<RunningAnimations>(
+    {}
+  );
+  const previousRunningAnimations = usePrevious(runningAnimations);
+
+  // implement the logic of "animationComplete" in a useEffect
+  // Consider an animation just completed when the associated number of running animations just reached 0
+
+  useEffect(() => {
+    for (const variant in runningAnimations) {
+      if (
+        runningAnimations[variant] === 0 &&
+        previousRunningAnimations[variant] !== 0
+      ) {
+        if (variant === "1") {
+          setStarVariant("2");
+        } else if (variant === "2") {
+          setStarVariant("3");
+        }
+      }
+    }
+  }, [runningAnimations]);
+
+  const animationComplete = (variant: string) => {
+    console.log("animationComplete", variant);
+    decrementAnimation(variant);
+  };
+
+  const animationStarted = (variant: string) => {
+    console.log("animationStarted", variant);
+    incrementAnimation(variant);
+  };
+
+  const incrementAnimation = (animation: string) => {
+    setRunningAnimations((prev: RunningAnimations) => {
+      const newRunningAnimations = { ...prev };
+      if (!newRunningAnimations[animation]) {
+        newRunningAnimations[animation] = 1;
+      } else {
+        newRunningAnimations[animation]++;
+      }
+      return newRunningAnimations;
+    });
+  };
+
+  const decrementAnimation = (animation: string) => {
+    setRunningAnimations((prev: RunningAnimations) => {
+      const newRunningAnimations = { ...prev };
+      if (newRunningAnimations[animation] > 0) {
+        newRunningAnimations[animation]--;
+      }
+      return newRunningAnimations;
+    });
+  };
+
+  return (
+    <div style={pageStyle as React.CSSProperties}>
+      <div
+        style={{
+          display: "flex",
+          position: "absolute",
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          flexDirection: "column",
+          alignItems: "start",
+          justifyContent: "start",
+        }}
+      >
+        {Array.from({ length: 7 }).map((_, i) => (
+          <motion.div
+            key={i}
+            variants={leftSideVariants}
+            style={baseStyle as React.CSSProperties}
+            animate={starVariant}
+            custom={{ delay: i * 0.05 }}
+            onAnimationStart={() => animationStarted(starVariant)}
+            onAnimationComplete={() => animationComplete(starVariant)}
+          >
+            <div style={starStyle as React.CSSProperties}></div>
+          </motion.div>
+        ))}
+      </div>
+      <div
+        style={{
+          display: "flex",
+          position: "absolute",
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          flexDirection: "column",
+          alignItems: "end",
+          justifyContent: "end",
+        }}
+      >
+        {Array.from({ length: 7 }).map((_, i) => (
+          <motion.div
+            key={i}
+            variants={leftSideVariants}
+            style={baseStyle as React.CSSProperties}
+            animate={starVariant}
+            custom={{ delay: i * 0.05 }}
+            onAnimationStart={() => animationStarted(starVariant)}
+            onAnimationComplete={() => animationComplete(starVariant)}
+          >
+            <div style={starStyle as React.CSSProperties}></div>
+          </motion.div>
+        ))}
+      </div>
+
+      <div style={bgSquareStyle as React.CSSProperties}></div>
+
+      <motion.div
+        variants={textAreaVariants}
+        animate={starVariant}
+        style={textAreaStyle as React.CSSProperties}
+      >
+        Coucou ! {starVariant}
+      </motion.div>
+    </div>
+  );
+}
+
+const pageStyle = {
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  overflow: "hidden",
+};
+
+const baseStyle = {
+  zIndex: 1,
+  width: "50%",
+  flex: 1,
+};
+
+const starStyle = {
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  backgroundBlendMode: "multiply",
+  background:
+    "linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(195,203,56,1) 86%)",
+};
+
+const textAreaStyle = {
+  background:
+    "linear-gradient(194deg, rgba(255,255,255,0.3650366748166259) 0%, rgba(195,203,56,0.2885085574572127) 86%)",
+  backdropFilter: "blur(10px)",
+  color: "#000000FF",
+  opacity: 0,
+  padding: "2",
+  width: "200px",
+  height: "100px",
+  zIndex: 0,
+  borderRadius: "10px",
+};
+
+const bgSquareStyle = {
+  width: "80%",
+  height: "70%",
+  position: "absolute",
+  top: 300,
+  left: 5,
+  backgroundImage:
+    "linear-gradient(#07b503 1px, transparent 1px, transparent calc(100% - 1px), rgba(195,203,56,1) calc(100% - 1px)), linear-gradient(90deg, rgba(195,203,56,1) 1px, transparent 1px, transparent calc(100% - 1px), rgba(195,203,56,1) calc(100% - 1px))",
+  backgroundSize: "3.3333333333333335% 3.3333333333333335%",
+  border: "1px solid rgba(195,203,56,1)",
+  zIndex: 0,
+};
+
+export default GlobalTop;

vite-wrapped/src/steps/welcome.tsx

@@ -1,71 +1,152 @@
-import { motion, MotionConfig, Variants } from "framer-motion";
+import { motion, Variants } from "framer-motion";
 import { StepProps } from "./stepProps.ts";
 import Masked from "../components/mask/Masked.tsx";
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
+
+type VariantProps = {
+  delay: number;
+};
 
 const starVariants: Variants = {
-  enter: {
-    top: "80%",
-    left: "80%",
-    rotate: 45,
+  "1": (props: VariantProps) => ({
+    rotate: 360,
+    scale: 3,
     transition: {
       duration: 2,
       repeat: 0,
-      delay: 1,
+      delay: props.delay,
     },
-  },
-  idle: {
-    top: "80.1%",
-    left: "80.1%",
-    scale: 1.01,
-    rotate: 45,
+  }),
+  "2": (props: VariantProps) => ({
+    scale: 3,
+    x: props.delay,
+    rotate: props.delay + 365 * 2,
     transition: {
-      duration: 0.5,
+      duration: 1,
+      repeat: 0,
+      delay: props.delay,
+    },
+  }),
+  "3": (props: VariantProps) => ({
+    scale: 3,
+    rotate: props.delay + 365 * 3,
+    transition: {
+      duration: 6,
       repeat: Infinity,
       repeatType: "reverse",
+      delay: props.delay,
+    },
+  }),
+};
+
+const textAreaVariants: Variants = {
+  "1": {
+    opacity: 1,
+    width: "80%",
+    height: "80%",
+    transition: {
+      duration: 0.5,
+    },
+  },
+  "2": {
+    opacity: 1,
+    width: "80%",
+    height: "80%",
+    transition: {
+      duration: 1.5,
     },
   },
+  "3": {
+    opacity: 1,
+    width: "80%",
+    height: "80%",
+    transition: {
+      duration: 1,
+    },
+  },
+};
+
+type RunningAnimations = {
+  [key: string]: number;
 };
 
 function Welcome({ progress }: StepProps) {
-  const [starVariant, setStarVariant] = useState("enter");
+  const [starVariant, setStarVariant] = useState("1");
+  const [runningAnimations, setRunningAnimations] = useState<RunningAnimations>(
+    {}
+  );
 
-  useEffect(() => {
-    if (progress.get() > 3000) {
-      setStarVariant("idle");
+  const animationComplete = (variant: string) => {
+    const newRunningAnimations = { ...runningAnimations };
+    if (newRunningAnimations[variant] > 0) {
+      newRunningAnimations[variant]--;
+      setRunningAnimations(newRunningAnimations);
     } else {
-      setStarVariant("enter");
+      if (variant === "1") {
+        setStarVariant("2");
+      } else if (variant === "2") {
+        setStarVariant("3");
+      }
     }
-  }, [progress.get()]);
+  };
+
+  const animationStarted = (variant: string) => {
+    const newRunningAnimations = { ...runningAnimations };
+    if (!newRunningAnimations[variant]) {
+      newRunningAnimations[variant] = 1;
+    } else {
+      newRunningAnimations[variant]++;
+    }
+    setRunningAnimations(newRunningAnimations);
+  };
 
   return (
-    <div style={{ position: "relative", width: "100%", height: "100%" }}>
-      <motion.div
-        variants={starVariants}
-        style={baseStyle as React.CSSProperties}
-        animate={starVariant}
-      >
-        <div style={{ width: "800px", height: "800px" }}>
+    <div style={pageStyle as React.CSSProperties}>
+      {Array.from({ length: 10 }).map((_, i) => (
+        <motion.div
+          key={i}
+          variants={starVariants}
+          style={baseStyle as React.CSSProperties}
+          animate={starVariant}
+          custom={{ delay: i * 0.05 }}
+          onAnimationStart={() => animationStarted(starVariant)}
+          onAnimationComplete={() => animationComplete(starVariant)}
+        >
+          <div style={{ width: "800px", height: "800px" }}>
             <Masked mask="Star" style={starStyle} />
-        </div>
-      </motion.div>
+          </div>
+        </motion.div>
+      ))}
+
     </div>
   );
 }
 
+const pageStyle = {
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  overflow: "hidden",
+};
+
 const baseStyle = {
   position: "absolute",
-  top: "50%",
-  left: "50%",
+  top: "calc(50% - 400px)",
+  left: "calc(50% - 400px)",
+  zIndex: 1,
 };
 
 const starStyle = {
   position: "relative",
   width: "100%",
   height: "100%",
+  backgroundBlendMode: "multiply",
   backgroundImage:
     "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)",
-  backgroundBlendMode: "multiply",
 };
 
+
 export default Welcome;