Des tests plutôt concluants pour faire des animations

vite-wrapped/deno.json

 {
-  "tasks": {
-    "dev": "deno run -A --node-modules-dir npm:vite",
-    "build": "deno run -A --node-modules-dir npm:vite build",
-    "preview": "deno run -A --node-modules-dir npm:vite preview",
-    "serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/"
-  },
-  "compilerOptions": {
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "jsx": "react-jsx",
-    "jsxImportSource": "react",
-    "jsxImportSourceTypes": "@types/react"
-  },
-  "imports": {
-    "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.0",
-    "@types/react": "npm:@types/react@^18.3.12",
-    "@types/react-dom": "npm:@types/react-dom@^18.3.1",
-    "@vitejs/plugin-react-swc": "npm:@vitejs/plugin-react-swc@^3.7.1",
-    "react": "npm:react@^18.3.1",
-    "react-dom": "npm:react-dom@^18.3.1",
-    "vite": "npm:vite@^6.0.1"
-  }
-}
+    "nodeModulesDir": "auto",
+    "tasks": {
+        "dev": "deno run -A --node-modules-dir npm:vite",
+        "build": "deno run -A --node-modules-dir npm:vite build",
+        "preview": "deno run -A --node-modules-dir npm:vite preview",
+        "serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/"
+    },
+    "compilerOptions": {
+        "lib": [
+            "ES2020",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "jsx": "react-jsx",
+        "jsxImportSource": "react",
+        "jsxImportSourceTypes": "@types/react"
+    },
+    "imports": {
+        "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.0",
+        "@types/react": "npm:@types/react@^18.3.12",
+        "@types/react-dom": "npm:@types/react-dom@^18.3.1",
+        "@vitejs/plugin-react-swc": "npm:@vitejs/plugin-react-swc@^3.7.1",
+        "framer-motion": "npm:framer-motion@^11.15.0",
+        "react": "npm:react@^18.3.1",
+        "react-dom": "npm:react-dom@^18.3.1",
+        "vite": "npm:vite@^6.0.1"
+    }
+}

vite-wrapped/deno.lock

   "version": "4",
   "specifiers": {
     "npm:@deno/vite-plugin@1": "1.0.2_vite@6.0.6",
+    "npm:@types/node@*": "22.5.4",
     "npm:@types/react-dom@^18.3.1": "18.3.5_@types+react@18.3.18",
     "npm:@types/react@^18.3.12": "18.3.18",
     "npm:@vitejs/plugin-react-swc@^3.7.1": "3.7.2_vite@6.0.6",
+    "npm:framer-motion@^11.15.0": "11.15.0_react@18.3.1_react-dom@18.3.1__react@18.3.1",
     "npm:react-dom@^18.3.1": "18.3.1_react@18.3.1",
     "npm:react@^18.3.1": "18.3.1",
     "npm:vite@*": "6.0.6",
     "@types/estree@1.0.6": {
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="
     },
+    "@types/node@22.5.4": {
+      "integrity": "sha512-FDuKUJQm/ju9fT/SeX/6+gBzoPzlVCzfzmGkwKvRHQVxi4BntVbyIwf6a4Xn62mrvndLiml6z/UBXIdEVjQLXg==",
+      "dependencies": [
+        "undici-types"
+      ]
+    },
     "@types/prop-types@15.7.14": {
       "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ=="
     },
         "@esbuild/win32-x64"
       ]
     },
+    "framer-motion@11.15.0_react@18.3.1_react-dom@18.3.1__react@18.3.1": {
+      "integrity": "sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==",
+      "dependencies": [
+        "motion-dom",
+        "motion-utils",
+        "react",
+        "react-dom",
+        "tslib"
+      ]
+    },
     "fsevents@2.3.3": {
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="
     },
         "js-tokens"
       ]
     },
+    "motion-dom@11.14.3": {
+      "integrity": "sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA=="
+    },
+    "motion-utils@11.14.3": {
+      "integrity": "sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ=="
+    },
     "nanoid@3.3.8": {
       "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w=="
     },
     "source-map-js@1.2.1": {
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="
     },
+    "tslib@2.8.1": {
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+    },
+    "undici-types@6.19.8": {
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw=="
+    },
     "vite@6.0.6": {
       "integrity": "sha512-NSjmUuckPmDU18bHz7QZ+bTYhRR0iA72cs2QAxCqDpafJ0S6qetco0LB3WW2OxlMHS0JmAv+yZ/R3uPmMyGTjQ==",
       "dependencies": [
       "npm:@types/react-dom@^18.3.1",
       "npm:@types/react@^18.3.12",
       "npm:@vitejs/plugin-react-swc@^3.7.1",
+      "npm:framer-motion@^11.15.0",
       "npm:react-dom@^18.3.1",
       "npm:react@^18.3.1",
       "npm:vite@^6.0.1"

vite-wrapped/public/star.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 456.79 436.42"
+>
+    <defs>
+    <style></style>
+    </defs>
+    <polygon stroke="white" fill="#00000000"
+    stroke-width="1em"
+    points="372.66 431.54 231.13 359.66 91.67 435.5 116.3 278.68 1.08 169.49 157.83 144.45 226.07 1.13 298.32 142.47 455.72 163.08 343.62 275.48 372.66 431.54"
+    />
+</svg>

vite-wrapped/src/App.css

+html,
+body,
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
   text-align: center;
 }
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

vite-wrapped/src/App.tsx

-import './App.css'
+import "./App.css";
 // @deno-types="@types/react"
-import { useState } from 'react'
-// @ts-expect-error Unable to infer type at the moment
-import reactLogo from './assets/react.svg'
+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";
+
+const steps = [
+  {
+    title: "Step 1",
+    content: "Content of step 1",
+  },
+  {
+    title: "Step 2",
+    content: "Content of step 2",
+  },
+  {
+    title: "Step 3",
+    content: "Content of step 3",
+  },
+];
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [currentStep, setCurrentStep] = useState(0);
+  const animationDuration = 5000;
+  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);
+      animationProgress.set(0);
+    } else {
+      animationProgress.set(animationProgress.get() + delta);
+    }
+    setAnimationFrame(time);
+  });
 
   return (
     <>
-      <img src="/vite-deno.svg" alt="Vite with Deno" />
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src="/vite.svg" className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Elo</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count} (looking great!)
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
+      <div style={page as React.CSSProperties}>
+        <Welcome progress={animationProgress} />
       </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
     </>
-  )
+  );
 }
 
-export default App
+const page = {
+  display: "flex",
+  position: "relative",
+  justifyContent: "center",
+  alignItems: "center",
+  margin: 0,
+  padding: 0,
+  width: "100%",
+  height: "100%",
+  flexDirection: "column",
+  backgroundColor: "#050505",
+};
+export default App;

vite-wrapped/src/components/Progress.tsx

+
+type ProgressProps = {
+    step: number,
+    steps: number,
+    progress: number,
+    length: number,
+}
+
+const Progress = ({ step, steps, progress, length }: ProgressProps) => {
+    const progressWidth = (progress / length) * 100;
+    return (
+        <div style={progressContainer as React.CSSProperties}>
+            <div style={progressBar}>
+                <div style={{ ...progressBarInner, width: `${progressWidth}%` }} />
+            </div>
+            <div style={progressText as React.CSSProperties}>
+                {step + 1} / {steps}
+            </div>
+        </div>
+    );
+};
+
+const progressContainer = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    width: "100%",
+    marginBottom: "1rem",
+};
+
+const progressBar = {
+    width: "100%",
+    height: "1rem",
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    borderRadius: "0.5rem",
+};
+
+const progressBarInner = {
+    height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    borderRadius: "0.5rem",
+};
+
+export default Progress;

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

+import React from "react";
+
+type Mask = "Star";
+
+function Masked({
+  children,
+  mask,
+  style,
+}: {
+  children?: React.ReactNode;
+  mask: Mask;
+  style: React.CSSProperties;
+}) {
+  const [maskUrl, setMaskUrl] = React.useState<String>({});
+
+  React.useEffect(() => {
+    if (mask === "Star") {
+      setMaskUrl("/star.svg");
+    }
+  }, [mask]);
+
+  return (
+    <div
+      style={{
+        ...{
+          maskImage: `url(${maskUrl})`,
+          maskSize: "cover",
+          maskRepeat: "no-repeat",
+          maskPosition: "center",
+          maskClip: "content-box",
+          width: "100%",
+          height: "100%",
+        },
+        ...style,
+      }}
+    >
+        {children}
+    </div>
+  );
+}
+
+export default Masked;

vite-wrapped/src/layout/canvas.tsx

+
+function Canvas({children}: {children: React.ReactNode}) {
+  return (
+    <div style={canvas}>
+        {children}
+    </div>
+  );
+}
+
+const canvas = {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "100%",
+  height: "100%",
+  backgroundColor: "rgba(0, 0, 0, 0.2)",
+};
+
+
+export default Canvas;

vite-wrapped/src/steps/stepProps.ts

+import { MotionValue } from "framer-motion";
+
+export type StepProps = {
+    progress: MotionValue<number>;
+}

vite-wrapped/src/steps/welcome.tsx

+import { motion, MotionConfig, Variants } from "framer-motion";
+import { StepProps } from "./stepProps.ts";
+import Masked from "../components/mask/Masked.tsx";
+import React, { useState, useEffect } from "react";
+
+const starVariants: Variants = {
+  enter: {
+    top: "80%",
+    left: "80%",
+    rotate: 45,
+    transition: {
+      duration: 2,
+      repeat: 0,
+      delay: 1,
+    },
+  },
+  idle: {
+    top: "80.1%",
+    left: "80.1%",
+    scale: 1.01,
+    rotate: 45,
+    transition: {
+      duration: 0.5,
+      repeat: Infinity,
+      repeatType: "reverse",
+    },
+  },
+};
+
+function Welcome({ progress }: StepProps) {
+  const [starVariant, setStarVariant] = useState("enter");
+
+  useEffect(() => {
+    if (progress.get() > 3000) {
+      setStarVariant("idle");
+    } else {
+      setStarVariant("enter");
+    }
+  }, [progress.get()]);
+
+  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" }}>
+            <Masked mask="Star" style={starStyle} />
+        </div>
+      </motion.div>
+    </div>
+  );
+}
+
+const baseStyle = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+};
+
+const starStyle = {
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  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;

vite-wrapped/tsconfig.json

+{
+  "compilerOptions": {
+    "lib": ["esnext", "dom"]
+  }
+}