million/analyze/filter/message.py

@@ -0,0 +1,93 @@
+from __future__ import annotations
+from datetime import datetime
+import functools
+from typing import Any, Callable, List
+from million.analyze.retain_counts import is_count
+from million.model.filter.MessageFilter import MessageFilter, MessageOrder
+from million.model.message import Message
+
+
+def before(message: Message, date: datetime):
+    return message.date < date
+
+
+def after(message: Message, date: datetime):
+    return message.date > date
+
+
+def contains(message: Message, content: str):
+    return message.content is not None and content.lower() in message.content.lower()
+
+
+def is_number(message: Message, is_number: bool):
+    return is_count(message) == is_number
+
+
+def sender_name(message: Message, sender_name: str):
+    return message.sender_name == sender_name
+
+
+def having_reactions(message: Message, having_reactions: bool):
+    return bool(message.reactions) == having_reactions
+
+
+def list_to_tuple(function: Callable) -> Any:
+    """Custom decorator function, to convert list to a tuple."""
+
+    def wrapper(*args, **kwargs) -> Any:
+        args = tuple(tuple(x) if isinstance(x, list) else x for x in args)
+        kwargs = {k: tuple(v) if isinstance(v, list)
+                  else v for k, v in kwargs.items()}
+        result = function(*args, **kwargs)
+        result = tuple(result) if isinstance(result, list) else result
+        return result
+
+    return wrapper
+
+
+def order_reaction(messages: List[Message]):
+    return sorted(
+        messages,
+        key=lambda x: len(x.reactions) if x.reactions else 0,
+        reverse=True)
+
+
+def order_date(messages: List[Message]):
+    return sorted(messages, key=lambda x: x.date, reverse=True)
+
+
+@list_to_tuple
+@functools.lru_cache(maxsize=10_000)
+def filter(messages: List[Message], criterias: MessageFilter = None, order: MessageOrder = None, limit: int = None) -> List[Message]:
+    print(criterias)
+    conditions = [
+        [sender_name, criterias.sender_name] if criterias.sender_name else None,
+        [after, criterias.after] if criterias.after else None,
+        [before, criterias.before] if criterias.before else None,
+        [contains, criterias.contains] if criterias.contains else None,
+        [is_number, criterias.is_number] if criterias.is_number is not None else None,
+        [having_reactions, criterias.having_reactions] if criterias.having_reactions is not None else None,
+    ]
+
+    filtered = [
+        message for message in messages
+        if all(
+            condition[0](message, condition[1])
+            for condition in conditions
+            if condition
+        )
+    ]
+
+    if order == MessageOrder.reactions:
+        filtered = order_reaction(filtered)
+    elif order == MessageOrder.date:
+        filtered = order_date(filtered)
+
+    if limit:
+        filtered = filtered[:limit]
+
+    return filtered
+
+
+def count(messages: List[Message], criterias: MessageFilter):
+    return len(filter(messages, criterias))

million/analyze/filter/participants.py

@@ -0,0 +1,46 @@
+
+
+from typing import List
+
+from pydantic import BaseModel
+from million.model.filter.MessageFilter import MessageFilter
+from million.model.filter.ParticipantFilter import OrderDirection, ParticipantFilter
+from million.model.message import Message
+from million.model.participant import Participant
+from million.analyze.filter.message import filter as message_filter
+
+
+class ParticipantCount(BaseModel):
+    participant: Participant
+    count: int
+
+
+def order_count(participants: List[Participant], messages: List[Message], criterias: MessageFilter = None, direction: OrderDirection = OrderDirection.desc) -> ParticipantCount:
+    result = [
+        ParticipantCount(
+            participant=participant,
+            count=len(
+                message_filter(
+                    messages,
+                    criterias=MessageFilter(**{
+                        **(criterias.model_dump() if criterias else dict()),
+                        "sender_name": participant.name
+                    })
+                )
+            ))
+
+        for participant in participants
+    ]
+    result.sort(key=lambda p: p.count, reverse=True)
+    return [result for result in result]
+
+
+def filter(messages: List[Message], participants: List[Participant], criterias: ParticipantFilter) -> List[ParticipantCount]:
+    result = [
+        participant for participant in participants
+    ]
+
+    result = order_count(
+        result, messages, criterias=criterias, direction=criterias.order_dir)
+
+    return result

million/analyze/retain_counts.py

@@ -4,12 +4,18 @@ from typing import List
 from million.model.message import Message
 
 
-def retain_counts(messages : List[Message])-> List[Message]:
+def is_count(message: Message) -> bool:
+    """
+    Check if the message is a count
+    """
+    return message.content is not None and bool(re.search('(\d{2,}|^\d$)', message.content))
+
+
+def retain_counts(messages: List[Message]) -> List[Message]:
     """
     Retain only the messages that have a content
     """
     return [
-        m for m in messages 
-        if m.content and
-        re.search('(\d{2,}|^\d$)', m.content)
-        ]
+        m for m in messages
+        if is_count(m)
+    ]

million/http/app.py

@@ -0,0 +1,33 @@
+from typing import Annotated, List
+from fastapi import FastAPI, Query
+from million.model.filter.MessageFilter import MessageFilter, MessageOrder
+from million.model.filter.ParticipantFilter import ParticipantFilter
+from million.model.message import Message
+from million.analyze.filter.message import filter as message_filter
+from million.analyze.filter.participants import ParticipantCount, filter as participants_filter
+from million.model.participant import Participant
+import million.parse.fb_exports as fb
+
+
+DATA_PATH = './data/'
+
+export = fb.parse_dirfiles(DATA_PATH)
+
+app = FastAPI()
+
+
+class GetMessageForm(MessageFilter):
+    order: MessageOrder = None
+    limit: int = 100
+
+
+@app.get("/messages")
+def read_messages(
+    form: Annotated[GetMessageForm, Query()]
+) -> List[Message]:
+    return message_filter(export.messages, form, form.order, form.limit)
+
+
+@app.get("/participants")
+def read_participants(form: Annotated[ParticipantFilter, Query()]) -> List[ParticipantCount]:
+    return participants_filter(export.messages, export.participants, form)

million/model/filter/MessageFilter.py

@@ -0,0 +1,20 @@
+from datetime import datetime
+from enum import Enum
+from pydantic import BaseModel
+
+
+class MessageOrder(str, Enum):
+    date = "date"
+    reactions = "reactions"
+
+
+class MessageFilter(BaseModel):
+    before: datetime | None = None
+    after: datetime | None = None
+    contains: str | None = None
+    is_number: bool | None = None
+    sender_name: str | None = None
+    having_reactions: bool | None = None
+
+    class Config:
+        frozen = True

million/model/filter/ParticipantFilter.py

@@ -0,0 +1,23 @@
+from datetime import datetime
+from pydantic import BaseModel
+from enum import Enum
+
+from million.model.filter.MessageFilter import MessageFilter
+
+
+class OrderBy(str, Enum):
+    count = "count"
+
+
+class OrderDirection(str, Enum):
+    asc = "asc"
+    desc = "desc"
+
+
+class ParticipantFilter(MessageFilter):
+
+    order_by: OrderBy | None = OrderBy.count
+    order_dir: OrderDirection | None = OrderDirection.desc
+
+    def __hash__(self):
+        return hash(self.name)

million/model/message.py

@@ -1,7 +1,9 @@
 from datetime import datetime
-from math import floor
 from typing import Any, List
 from pydantic import BaseModel
+import pytz
+
+utc=pytz.UTC
 
 class Reaction(BaseModel):
     reaction: str
@@ -45,6 +47,10 @@ class Message(BaseModel):
     is_unsent: bool | None = None
     is_geoblocked_for_viewer: bool
 
+    @property
+    def date(self) -> datetime:
+        return utc.localize(datetime.fromtimestamp(self.timestamp_ms / 1000))
+
     def __str__(self) -> str:
         dt = datetime.fromtimestamp(self.timestamp_ms / 1000)
         dt_str = dt.strftime("%d/%m/%Y, %H:%M:%S")

poetry.lock

@@ -1,4 +1,4 @@
-# This file is automatically @generated by Poetry 1.5.1 and should not be changed by hand.
+# This file is automatically @generated by Poetry 1.8.4 and should not be changed by hand.
 
 [[package]]
 name = "annotated-types"
@@ -12,6 +12,42 @@ files = [
 ]
 
 [[package]]
+name = "anyio"
+version = "4.7.0"
+description = "High level compatibility layer for multiple asynchronous event loop implementations"
+optional = false
+python-versions = ">=3.9"
+files = [
+    {file = "anyio-4.7.0-py3-none-any.whl", hash = "sha256:ea60c3723ab42ba6fff7e8ccb0488c898ec538ff4df1f1d5e642c3601d07e352"},
+    {file = "anyio-4.7.0.tar.gz", hash = "sha256:2f834749c602966b7d456a7567cafcb309f96482b5081d14ac93ccd457f9dd48"},
+]
+
+[package.dependencies]
+exceptiongroup = {version = ">=1.0.2", markers = "python_version < \"3.11\""}
+idna = ">=2.8"
+sniffio = ">=1.1"
+typing_extensions = {version = ">=4.5", markers = "python_version < \"3.13\""}
+
+[package.extras]
+doc = ["Sphinx (>=7.4,<8.0)", "packaging", "sphinx-autodoc-typehints (>=1.2.0)", "sphinx_rtd_theme"]
+test = ["anyio[trio]", "coverage[toml] (>=7)", "exceptiongroup (>=1.2.0)", "hypothesis (>=4.0)", "psutil (>=5.9)", "pytest (>=7.0)", "pytest-mock (>=3.6.1)", "trustme", "truststore (>=0.9.1)", "uvloop (>=0.21)"]
+trio = ["trio (>=0.26.1)"]
+
+[[package]]
+name = "click"
+version = "8.1.8"
+description = "Composable command line interface toolkit"
+optional = false
+python-versions = ">=3.7"
+files = [
+    {file = "click-8.1.8-py3-none-any.whl", hash = "sha256:63c132bbbed01578a06712a2d1f497bb62d9c1c0d329b7903a866228027263b2"},
+    {file = "click-8.1.8.tar.gz", hash = "sha256:ed53c9d8990d83c2a27deae68e4ee337473f6330c040a31d4225c9574d16096a"},
+]
+
+[package.dependencies]
+colorama = {version = "*", markers = "platform_system == \"Windows\""}
+
+[[package]]
 name = "colorama"
 version = "0.4.6"
 description = "Cross-platform colored terminal text."
@@ -115,6 +151,26 @@ files = [
 test = ["pytest (>=6)"]
 
 [[package]]
+name = "fastapi"
+version = "0.115.6"
+description = "FastAPI framework, high performance, easy to learn, fast to code, ready for production"
+optional = false
+python-versions = ">=3.8"
+files = [
+    {file = "fastapi-0.115.6-py3-none-any.whl", hash = "sha256:e9240b29e36fa8f4bb7290316988e90c381e5092e0cbe84e7818cc3713bcf305"},
+    {file = "fastapi-0.115.6.tar.gz", hash = "sha256:9ec46f7addc14ea472958a96aae5b5de65f39721a46aaf5705c480d9a8b76654"},
+]
+
+[package.dependencies]
+pydantic = ">=1.7.4,<1.8 || >1.8,<1.8.1 || >1.8.1,<2.0.0 || >2.0.0,<2.0.1 || >2.0.1,<2.1.0 || >2.1.0,<3.0.0"
+starlette = ">=0.40.0,<0.42.0"
+typing-extensions = ">=4.8.0"
+
+[package.extras]
+all = ["email-validator (>=2.0.0)", "fastapi-cli[standard] (>=0.0.5)", "httpx (>=0.23.0)", "itsdangerous (>=1.1.0)", "jinja2 (>=2.11.2)", "orjson (>=3.2.1)", "pydantic-extra-types (>=2.0.0)", "pydantic-settings (>=2.0.0)", "python-multipart (>=0.0.7)", "pyyaml (>=5.3.1)", "ujson (>=4.0.1,!=4.0.2,!=4.1.0,!=4.2.0,!=4.3.0,!=5.0.0,!=5.1.0)", "uvicorn[standard] (>=0.12.0)"]
+standard = ["email-validator (>=2.0.0)", "fastapi-cli[standard] (>=0.0.5)", "httpx (>=0.23.0)", "jinja2 (>=2.11.2)", "python-multipart (>=0.0.7)", "uvicorn[standard] (>=0.12.0)"]
+
+[[package]]
 name = "fonttools"
 version = "4.49.0"
 description = "Tools to manipulate font files"
@@ -180,6 +236,31 @@ unicode = ["unicodedata2 (>=15.1.0)"]
 woff = ["brotli (>=1.0.1)", "brotlicffi (>=0.8.0)", "zopfli (>=0.1.4)"]
 
 [[package]]
+name = "h11"
+version = "0.14.0"
+description = "A pure-Python, bring-your-own-I/O implementation of HTTP/1.1"
+optional = false
+python-versions = ">=3.7"
+files = [
+    {file = "h11-0.14.0-py3-none-any.whl", hash = "sha256:e3fe4ac4b851c468cc8363d500db52c2ead036020723024a109d37346efaa761"},
+    {file = "h11-0.14.0.tar.gz", hash = "sha256:8f19fbbe99e72420ff35c00b27a34cb9937e902a8b810e2c88300c6f0a3b699d"},
+]
+
+[[package]]
+name = "idna"
+version = "3.10"
+description = "Internationalized Domain Names in Applications (IDNA)"
+optional = false
+python-versions = ">=3.6"
+files = [
+    {file = "idna-3.10-py3-none-any.whl", hash = "sha256:946d195a0d259cbba61165e88e65941f16e9b36ea6ddb97f00452bae8b1287d3"},
+    {file = "idna-3.10.tar.gz", hash = "sha256:12f65c9b470abda6dc35cf8e63cc574b1c52b11df2c86030af0ac09b01b13ea9"},
+]
+
+[package.extras]
+all = ["flake8 (>=7.1.1)", "mypy (>=1.11.2)", "pytest (>=8.3.2)", "ruff (>=0.6.2)"]
+
+[[package]]
 name = "igraph"
 version = "0.11.6"
 description = "High performance graph data structures and algorithms"
@@ -866,6 +947,34 @@ files = [
 ]
 
 [[package]]
+name = "sniffio"
+version = "1.3.1"
+description = "Sniff out which async library your code is running under"
+optional = false
+python-versions = ">=3.7"
+files = [
+    {file = "sniffio-1.3.1-py3-none-any.whl", hash = "sha256:2f6da418d1f1e0fddd844478f41680e794e6051915791a034ff65e5f100525a2"},
+    {file = "sniffio-1.3.1.tar.gz", hash = "sha256:f4324edc670a0f49750a81b895f35c3adb843cca46f0530f79fc1babb23789dc"},
+]
+
+[[package]]
+name = "starlette"
+version = "0.41.3"
+description = "The little ASGI library that shines."
+optional = false
+python-versions = ">=3.8"
+files = [
+    {file = "starlette-0.41.3-py3-none-any.whl", hash = "sha256:44cedb2b7c77a9de33a8b74b2b90e9f50d11fcf25d8270ea525ad71a25374ff7"},
+    {file = "starlette-0.41.3.tar.gz", hash = "sha256:0e4ab3d16522a255be6b28260b938eae2482f98ce5cc934cb08dce8dc3ba5835"},
+]
+
+[package.dependencies]
+anyio = ">=3.4.0,<5"
+
+[package.extras]
+full = ["httpx (>=0.22.0)", "itsdangerous", "jinja2", "python-multipart (>=0.0.7)", "pyyaml"]
+
+[[package]]
 name = "texttable"
 version = "1.7.0"
 description = "module to create simple ASCII tables"
@@ -909,7 +1018,26 @@ files = [
     {file = "tzdata-2024.1.tar.gz", hash = "sha256:2674120f8d891909751c38abcdfd386ac0a5a1127954fbc332af6b5ceae07efd"},
 ]
 
+[[package]]
+name = "uvicorn"
+version = "0.34.0"
+description = "The lightning-fast ASGI server."
+optional = false
+python-versions = ">=3.9"
+files = [
+    {file = "uvicorn-0.34.0-py3-none-any.whl", hash = "sha256:023dc038422502fa28a09c7a30bf2b6991512da7dcdb8fd35fe57cfc154126f4"},
+    {file = "uvicorn-0.34.0.tar.gz", hash = "sha256:404051050cd7e905de2c9a7e61790943440b3416f49cb409f965d9dcd0fa73e9"},
+]
+
+[package.dependencies]
+click = ">=7.0"
+h11 = ">=0.8"
+typing-extensions = {version = ">=4.0", markers = "python_version < \"3.11\""}
+
+[package.extras]
+standard = ["colorama (>=0.4)", "httptools (>=0.6.3)", "python-dotenv (>=0.13)", "pyyaml (>=5.1)", "uvloop (>=0.14.0,!=0.15.0,!=0.15.1)", "watchfiles (>=0.13)", "websockets (>=10.4)"]
+
 [metadata]
 lock-version = "2.0"
 python-versions = "^3.10"
-content-hash = "cfd60af98dcef95ed9f592cd7c4d616a3763174bffb33a612bb537bbb89d928f"
+content-hash = "f215b3ecfbef3d48a2a6f8b67c121456e867f46481f968e6503d6cf1e0767b85"

pyproject.toml

@@ -13,6 +13,8 @@ pydantic = "^2.6.1"
 pandas = "^2.2.0"
 python-igraph = "^0.11.6"
 pycairo = "^1.26.1"
+fastapi = "^0.115.6"
+uvicorn = "^0.34.0"
 
 
 [tool.poetry.group.test.dependencies]

readme.md

@@ -36,4 +36,10 @@ python -m scripts.find_holes
 
 ```bash
 python -m scripts.read_top
-```
+```
+
+## Run the backend
+
+```bash
+ uvicorn million.http.app:app --reload --host 0.0.0.0
+ ```

scripts/find_holes.py

@@ -18,11 +18,12 @@ print(f"Actual counted: {actual_counted}")
 
 holes = find_holes(filtered)
 
-print(len(holes))
 
 for hole in holes:
     print(f"{hole.start() + 1} -> {hole.end() - 1} ({hole.length() - 2})")
 
+print(f"Total holes: {len(holes)}")
+print(f"Total holes size: {sum([h.length() for h in holes if h.length() < 10_000])}")
 
 # lets export a csv file of the holes and the people responsible for them
 with open('output/holes.csv', 'w') as f:

scripts/wrap_year.py

@@ -0,0 +1,28 @@
+from million.view.bar_chart import plot as bar_chart
+from million.analyze.count_participations import count_participations
+from million.analyze.retain_counts import retain_counts
+import million.parse.fb_exports as fb
+
+DATA_PATH = './data/'
+
+export = fb.parse_dirfiles(DATA_PATH)
+
+filtered = retain_counts(export.messages)
+
+print(len(filtered))
+
+# split messages into months
+first = filtered[0].date.strftime("%Y-%m")
+last = filtered[-1].date.strftime("%Y-%m")
+months = {
+    f"{year}-{month:02}": []
+    for year in range(int(first[:4]), int(last[:4]) + 1)
+    for month in range(1, 13)
+}
+
+for message in filtered:
+    month = message.date.strftime("%Y-%m")
+    months[month].append(message)
+
+for month, messages in months.items():
+    print(f"{month}: {len(messages)}")

vite-wrapped/.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+.vite
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

vite-wrapped/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["denoland.vscode-deno"]
+}

vite-wrapped/README.md

@@ -0,0 +1,19 @@
+# Vite + Deno + React + TypeScript
+
+## Running
+
+You need to have Deno v2.0.0 or later installed to run this repo.
+
+Start a dev server:
+
+```
+$ deno task dev
+```
+
+## Deploy
+
+Build production assets:
+
+```
+$ deno task build
+```

vite-wrapped/deno.json

@@ -0,0 +1,29 @@
+{
+    "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

@@ -0,0 +1,394 @@
+{
+  "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",
+    "npm:vite@^6.0.1": "6.0.6"
+  },
+  "npm": {
+    "@deno/vite-plugin@1.0.2_vite@6.0.6": {
+      "integrity": "sha512-ZaC5W1yCb1xdRURU5qHFHrxZABr1tC68tS73/YhXUUbe9nuytCV4CG/dpLxMkxS64Fs3YwcqEz2k1eAqE9W5SQ==",
+      "dependencies": [
+        "vite"
+      ]
+    },
+    "@esbuild/aix-ppc64@0.24.2": {
+      "integrity": "sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA=="
+    },
+    "@esbuild/android-arm64@0.24.2": {
+      "integrity": "sha512-cNLgeqCqV8WxfcTIOeL4OAtSmL8JjcN6m09XIgro1Wi7cF4t/THaWEa7eL5CMoMBdjoHOTh/vwTO/o2TRXIyzg=="
+    },
+    "@esbuild/android-arm@0.24.2": {
+      "integrity": "sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q=="
+    },
+    "@esbuild/android-x64@0.24.2": {
+      "integrity": "sha512-B6Q0YQDqMx9D7rvIcsXfmJfvUYLoP722bgfBlO5cGvNVb5V/+Y7nhBE3mHV9OpxBf4eAS2S68KZztiPaWq4XYw=="
+    },
+    "@esbuild/darwin-arm64@0.24.2": {
+      "integrity": "sha512-kj3AnYWc+CekmZnS5IPu9D+HWtUI49hbnyqk0FLEJDbzCIQt7hg7ucF1SQAilhtYpIujfaHr6O0UHlzzSPdOeA=="
+    },
+    "@esbuild/darwin-x64@0.24.2": {
+      "integrity": "sha512-WeSrmwwHaPkNR5H3yYfowhZcbriGqooyu3zI/3GGpF8AyUdsrrP0X6KumITGA9WOyiJavnGZUwPGvxvwfWPHIA=="
+    },
+    "@esbuild/freebsd-arm64@0.24.2": {
+      "integrity": "sha512-UN8HXjtJ0k/Mj6a9+5u6+2eZ2ERD7Edt1Q9IZiB5UZAIdPnVKDoG7mdTVGhHJIeEml60JteamR3qhsr1r8gXvg=="
+    },
+    "@esbuild/freebsd-x64@0.24.2": {
+      "integrity": "sha512-TvW7wE/89PYW+IevEJXZ5sF6gJRDY/14hyIGFXdIucxCsbRmLUcjseQu1SyTko+2idmCw94TgyaEZi9HUSOe3Q=="
+    },
+    "@esbuild/linux-arm64@0.24.2": {
+      "integrity": "sha512-7HnAD6074BW43YvvUmE/35Id9/NB7BeX5EoNkK9obndmZBUk8xmJJeU7DwmUeN7tkysslb2eSl6CTrYz6oEMQg=="
+    },
+    "@esbuild/linux-arm@0.24.2": {
+      "integrity": "sha512-n0WRM/gWIdU29J57hJyUdIsk0WarGd6To0s+Y+LwvlC55wt+GT/OgkwoXCXvIue1i1sSNWblHEig00GBWiJgfA=="
+    },
+    "@esbuild/linux-ia32@0.24.2": {
+      "integrity": "sha512-sfv0tGPQhcZOgTKO3oBE9xpHuUqguHvSo4jl+wjnKwFpapx+vUDcawbwPNuBIAYdRAvIDBfZVvXprIj3HA+Ugw=="
+    },
+    "@esbuild/linux-loong64@0.24.2": {
+      "integrity": "sha512-CN9AZr8kEndGooS35ntToZLTQLHEjtVB5n7dl8ZcTZMonJ7CCfStrYhrzF97eAecqVbVJ7APOEe18RPI4KLhwQ=="
+    },
+    "@esbuild/linux-mips64el@0.24.2": {
+      "integrity": "sha512-iMkk7qr/wl3exJATwkISxI7kTcmHKE+BlymIAbHO8xanq/TjHaaVThFF6ipWzPHryoFsesNQJPE/3wFJw4+huw=="
+    },
+    "@esbuild/linux-ppc64@0.24.2": {
+      "integrity": "sha512-shsVrgCZ57Vr2L8mm39kO5PPIb+843FStGt7sGGoqiiWYconSxwTiuswC1VJZLCjNiMLAMh34jg4VSEQb+iEbw=="
+    },
+    "@esbuild/linux-riscv64@0.24.2": {
+      "integrity": "sha512-4eSFWnU9Hhd68fW16GD0TINewo1L6dRrB+oLNNbYyMUAeOD2yCK5KXGK1GH4qD/kT+bTEXjsyTCiJGHPZ3eM9Q=="
+    },
+    "@esbuild/linux-s390x@0.24.2": {
+      "integrity": "sha512-S0Bh0A53b0YHL2XEXC20bHLuGMOhFDO6GN4b3YjRLK//Ep3ql3erpNcPlEFed93hsQAjAQDNsvcK+hV90FubSw=="
+    },
+    "@esbuild/linux-x64@0.24.2": {
+      "integrity": "sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q=="
+    },
+    "@esbuild/netbsd-arm64@0.24.2": {
+      "integrity": "sha512-wuLK/VztRRpMt9zyHSazyCVdCXlpHkKm34WUyinD2lzK07FAHTq0KQvZZlXikNWkDGoT6x3TD51jKQ7gMVpopw=="
+    },
+    "@esbuild/netbsd-x64@0.24.2": {
+      "integrity": "sha512-VefFaQUc4FMmJuAxmIHgUmfNiLXY438XrL4GDNV1Y1H/RW3qow68xTwjZKfj/+Plp9NANmzbH5R40Meudu8mmw=="
+    },
+    "@esbuild/openbsd-arm64@0.24.2": {
+      "integrity": "sha512-YQbi46SBct6iKnszhSvdluqDmxCJA+Pu280Av9WICNwQmMxV7nLRHZfjQzwbPs3jeWnuAhE9Jy0NrnJ12Oz+0A=="
+    },
+    "@esbuild/openbsd-x64@0.24.2": {
+      "integrity": "sha512-+iDS6zpNM6EnJyWv0bMGLWSWeXGN/HTaF/LXHXHwejGsVi+ooqDfMCCTerNFxEkM3wYVcExkeGXNqshc9iMaOA=="
+    },
+    "@esbuild/sunos-x64@0.24.2": {
+      "integrity": "sha512-hTdsW27jcktEvpwNHJU4ZwWFGkz2zRJUz8pvddmXPtXDzVKTTINmlmga3ZzwcuMpUvLw7JkLy9QLKyGpD2Yxig=="
+    },
+    "@esbuild/win32-arm64@0.24.2": {
+      "integrity": "sha512-LihEQ2BBKVFLOC9ZItT9iFprsE9tqjDjnbulhHoFxYQtQfai7qfluVODIYxt1PgdoyQkz23+01rzwNwYfutxUQ=="
+    },
+    "@esbuild/win32-ia32@0.24.2": {
+      "integrity": "sha512-q+iGUwfs8tncmFC9pcnD5IvRHAzmbwQ3GPS5/ceCyHdjXubwQWI12MKWSNSMYLJMq23/IUCvJMS76PDqXe1fxA=="
+    },
+    "@esbuild/win32-x64@0.24.2": {
+      "integrity": "sha512-7VTgWzgMGvup6aSqDPLiW5zHaxYJGTO4OokMjIlrCtf+VpEL+cXKtCvg723iguPYI5oaUNdS+/V7OU2gvXVWEg=="
+    },
+    "@rollup/rollup-android-arm-eabi@4.29.1": {
+      "integrity": "sha512-ssKhA8RNltTZLpG6/QNkCSge+7mBQGUqJRisZ2MDQcEGaK93QESEgWK2iOpIDZ7k9zPVkG5AS3ksvD5ZWxmItw=="
+    },
+    "@rollup/rollup-android-arm64@4.29.1": {
+      "integrity": "sha512-CaRfrV0cd+NIIcVVN/jx+hVLN+VRqnuzLRmfmlzpOzB87ajixsN/+9L5xNmkaUUvEbI5BmIKS+XTwXsHEb65Ew=="
+    },
+    "@rollup/rollup-darwin-arm64@4.29.1": {
+      "integrity": "sha512-2ORr7T31Y0Mnk6qNuwtyNmy14MunTAMx06VAPI6/Ju52W10zk1i7i5U3vlDRWjhOI5quBcrvhkCHyF76bI7kEw=="
+    },
+    "@rollup/rollup-darwin-x64@4.29.1": {
+      "integrity": "sha512-j/Ej1oanzPjmN0tirRd5K2/nncAhS9W6ICzgxV+9Y5ZsP0hiGhHJXZ2JQ53iSSjj8m6cRY6oB1GMzNn2EUt6Ng=="
+    },
+    "@rollup/rollup-freebsd-arm64@4.29.1": {
+      "integrity": "sha512-91C//G6Dm/cv724tpt7nTyP+JdN12iqeXGFM1SqnljCmi5yTXriH7B1r8AD9dAZByHpKAumqP1Qy2vVNIdLZqw=="
+    },
+    "@rollup/rollup-freebsd-x64@4.29.1": {
+      "integrity": "sha512-hEioiEQ9Dec2nIRoeHUP6hr1PSkXzQaCUyqBDQ9I9ik4gCXQZjJMIVzoNLBRGet+hIUb3CISMh9KXuCcWVW/8w=="
+    },
+    "@rollup/rollup-linux-arm-gnueabihf@4.29.1": {
+      "integrity": "sha512-Py5vFd5HWYN9zxBv3WMrLAXY3yYJ6Q/aVERoeUFwiDGiMOWsMs7FokXihSOaT/PMWUty/Pj60XDQndK3eAfE6A=="
+    },
+    "@rollup/rollup-linux-arm-musleabihf@4.29.1": {
+      "integrity": "sha512-RiWpGgbayf7LUcuSNIbahr0ys2YnEERD4gYdISA06wa0i8RALrnzflh9Wxii7zQJEB2/Eh74dX4y/sHKLWp5uQ=="
+    },
+    "@rollup/rollup-linux-arm64-gnu@4.29.1": {
+      "integrity": "sha512-Z80O+taYxTQITWMjm/YqNoe9d10OX6kDh8X5/rFCMuPqsKsSyDilvfg+vd3iXIqtfmp+cnfL1UrYirkaF8SBZA=="
+    },
+    "@rollup/rollup-linux-arm64-musl@4.29.1": {
+      "integrity": "sha512-fOHRtF9gahwJk3QVp01a/GqS4hBEZCV1oKglVVq13kcK3NeVlS4BwIFzOHDbmKzt3i0OuHG4zfRP0YoG5OF/rA=="
+    },
+    "@rollup/rollup-linux-loongarch64-gnu@4.29.1": {
+      "integrity": "sha512-5a7q3tnlbcg0OodyxcAdrrCxFi0DgXJSoOuidFUzHZ2GixZXQs6Tc3CHmlvqKAmOs5eRde+JJxeIf9DonkmYkw=="
+    },
+    "@rollup/rollup-linux-powerpc64le-gnu@4.29.1": {
+      "integrity": "sha512-9b4Mg5Yfz6mRnlSPIdROcfw1BU22FQxmfjlp/CShWwO3LilKQuMISMTtAu/bxmmrE6A902W2cZJuzx8+gJ8e9w=="
+    },
+    "@rollup/rollup-linux-riscv64-gnu@4.29.1": {
+      "integrity": "sha512-G5pn0NChlbRM8OJWpJFMX4/i8OEU538uiSv0P6roZcbpe/WfhEO+AT8SHVKfp8qhDQzaz7Q+1/ixMy7hBRidnQ=="
+    },
+    "@rollup/rollup-linux-s390x-gnu@4.29.1": {
+      "integrity": "sha512-WM9lIkNdkhVwiArmLxFXpWndFGuOka4oJOZh8EP3Vb8q5lzdSCBuhjavJsw68Q9AKDGeOOIHYzYm4ZFvmWez5g=="
+    },
+    "@rollup/rollup-linux-x64-gnu@4.29.1": {
+      "integrity": "sha512-87xYCwb0cPGZFoGiErT1eDcssByaLX4fc0z2nRM6eMtV9njAfEE6OW3UniAoDhX4Iq5xQVpE6qO9aJbCFumKYQ=="
+    },
+    "@rollup/rollup-linux-x64-musl@4.29.1": {
+      "integrity": "sha512-xufkSNppNOdVRCEC4WKvlR1FBDyqCSCpQeMMgv9ZyXqqtKBfkw1yfGMTUTs9Qsl6WQbJnsGboWCp7pJGkeMhKA=="
+    },
+    "@rollup/rollup-win32-arm64-msvc@4.29.1": {
+      "integrity": "sha512-F2OiJ42m77lSkizZQLuC+jiZ2cgueWQL5YC9tjo3AgaEw+KJmVxHGSyQfDUoYR9cci0lAywv2Clmckzulcq6ig=="
+    },
+    "@rollup/rollup-win32-ia32-msvc@4.29.1": {
+      "integrity": "sha512-rYRe5S0FcjlOBZQHgbTKNrqxCBUmgDJem/VQTCcTnA2KCabYSWQDrytOzX7avb79cAAweNmMUb/Zw18RNd4mng=="
+    },
+    "@rollup/rollup-win32-x64-msvc@4.29.1": {
+      "integrity": "sha512-+10CMg9vt1MoHj6x1pxyjPSMjHTIlqs8/tBztXvPAx24SKs9jwVnKqHJumlH/IzhaPUaj3T6T6wfZr8okdXaIg=="
+    },
+    "@swc/core-darwin-arm64@1.10.2": {
+      "integrity": "sha512-xPDbCUfGdVjA/0yhRFVSyog73wO3/W3JNgx1PkOcCc+0OgZtgAnt4YD8QbSsUE+euc5bQJs/7HfJQ3305+HWVA=="
+    },
+    "@swc/core-darwin-x64@1.10.2": {
+      "integrity": "sha512-Dm4R9ffQw4yrGjvdYxxuO5RViwkRkSsn64WF7YGYZIlhkyFoseibPnQlOsx5qnjquc8f3h1C8/806XG+y3rMaQ=="
+    },
+    "@swc/core-linux-arm-gnueabihf@1.10.2": {
+      "integrity": "sha512-aXTqgel7AueM7CcCOFFUq6+gJyD/A3rFBWxPT6wA34IC7oQ0IIFpJjBLl8zN6/0aZ4OQ1ExlQ7zoKaTlk5tBug=="
+    },
+    "@swc/core-linux-arm64-gnu@1.10.2": {
+      "integrity": "sha512-HYFag6ULpnVMnHuKKAFuZH3kco/2eKKZ24I+gI2M4JlIW4soDmP8Oc2eAADIloln4SfQXzADX34m6merCWp65g=="
+    },
+    "@swc/core-linux-arm64-musl@1.10.2": {
+      "integrity": "sha512-N8es+V+M9GijYsxfiIG3NJ+lHgoZosX+yjblc5eOx0xrBDeqH3kNLhJpctOczrJk0rUjN+zX5x+8H8qurcEAaw=="
+    },
+    "@swc/core-linux-x64-gnu@1.10.2": {
+      "integrity": "sha512-fI4rxJkWQaNeG4UcuqKJrc1JM+nAwIzzFba9+A4Aohc6z0EgPokrA1v7WmPUObO+cdZjVXdMpDGkhGQhbok1aQ=="
+    },
+    "@swc/core-linux-x64-musl@1.10.2": {
+      "integrity": "sha512-ycDOxBgII/2xkusMgq2S9n81IQ8SeWk1FU0zuUsZrUkaXEq/78+nHFo/0IStPLrtRxzG2gJ0JZvfaa6jMxr79Q=="
+    },
+    "@swc/core-win32-arm64-msvc@1.10.2": {
+      "integrity": "sha512-s7/UrbdfYGdUar+Nj8jxNeXaFdryWnKuJU5udDONgk9gb1xp7K5TPxBL9j7EtCrAenM2sR9Bd84ZemwzyZ/VLw=="
+    },
+    "@swc/core-win32-ia32-msvc@1.10.2": {
+      "integrity": "sha512-sz8f+dmrzb816Ji25G+vs8HMq6zHq1IMKF4hVUnSJKdNr2k789+qRjF1fnv3YDcz5kkeYSvolXqVS1mCezDebg=="
+    },
+    "@swc/core-win32-x64-msvc@1.10.2": {
+      "integrity": "sha512-XXYHuc5KdhuLx1nP8cEKW+5Kakxy+iq/jcuJ52+27E2uB+xxzLeXvbPvz645je3Cti5nQ4la2HIn6tpST5ufSw=="
+    },
+    "@swc/core@1.10.2": {
+      "integrity": "sha512-d3reIYowBL6gbp4jC6FRZ3hE0eWcWwqh0XcHd6k5rKF/oZA6jLb7gxIRduJhrn+jyLz/HCC8WyfomUkEcs7iZQ==",
+      "dependencies": [
+        "@swc/core-darwin-arm64",
+        "@swc/core-darwin-x64",
+        "@swc/core-linux-arm-gnueabihf",
+        "@swc/core-linux-arm64-gnu",
+        "@swc/core-linux-arm64-musl",
+        "@swc/core-linux-x64-gnu",
+        "@swc/core-linux-x64-musl",
+        "@swc/core-win32-arm64-msvc",
+        "@swc/core-win32-ia32-msvc",
+        "@swc/core-win32-x64-msvc",
+        "@swc/counter",
+        "@swc/types"
+      ]
+    },
+    "@swc/counter@0.1.3": {
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="
+    },
+    "@swc/types@0.1.17": {
+      "integrity": "sha512-V5gRru+aD8YVyCOMAjMpWR1Ui577DD5KSJsHP8RAxopAH22jFz6GZd/qxqjO6MJHQhcsjvjOFXyDhyLQUnMveQ==",
+      "dependencies": [
+        "@swc/counter"
+      ]
+    },
+    "@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=="
+    },
+    "@types/react-dom@18.3.5_@types+react@18.3.18": {
+      "integrity": "sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==",
+      "dependencies": [
+        "@types/react"
+      ]
+    },
+    "@types/react@18.3.18": {
+      "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
+      "dependencies": [
+        "@types/prop-types",
+        "csstype"
+      ]
+    },
+    "@vitejs/plugin-react-swc@3.7.2_vite@6.0.6": {
+      "integrity": "sha512-y0byko2b2tSVVf5Gpng1eEhX1OvPC7x8yns1Fx8jDzlJp4LS6CMkCPfLw47cjyoMrshQDoQw4qcgjsU9VvlCew==",
+      "dependencies": [
+        "@swc/core",
+        "vite"
+      ]
+    },
+    "csstype@3.1.3": {
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
+    "esbuild@0.24.2": {
+      "integrity": "sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==",
+      "dependencies": [
+        "@esbuild/aix-ppc64",
+        "@esbuild/android-arm",
+        "@esbuild/android-arm64",
+        "@esbuild/android-x64",
+        "@esbuild/darwin-arm64",
+        "@esbuild/darwin-x64",
+        "@esbuild/freebsd-arm64",
+        "@esbuild/freebsd-x64",
+        "@esbuild/linux-arm",
+        "@esbuild/linux-arm64",
+        "@esbuild/linux-ia32",
+        "@esbuild/linux-loong64",
+        "@esbuild/linux-mips64el",
+        "@esbuild/linux-ppc64",
+        "@esbuild/linux-riscv64",
+        "@esbuild/linux-s390x",
+        "@esbuild/linux-x64",
+        "@esbuild/netbsd-arm64",
+        "@esbuild/netbsd-x64",
+        "@esbuild/openbsd-arm64",
+        "@esbuild/openbsd-x64",
+        "@esbuild/sunos-x64",
+        "@esbuild/win32-arm64",
+        "@esbuild/win32-ia32",
+        "@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@4.0.0": {
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "loose-envify@1.4.0": {
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": [
+        "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=="
+    },
+    "picocolors@1.1.1": {
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
+    },
+    "postcss@8.4.49": {
+      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
+      "dependencies": [
+        "nanoid",
+        "picocolors",
+        "source-map-js"
+      ]
+    },
+    "react-dom@18.3.1_react@18.3.1": {
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "dependencies": [
+        "loose-envify",
+        "react",
+        "scheduler"
+      ]
+    },
+    "react@18.3.1": {
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "dependencies": [
+        "loose-envify"
+      ]
+    },
+    "rollup@4.29.1": {
+      "integrity": "sha512-RaJ45M/kmJUzSWDs1Nnd5DdV4eerC98idtUOVr6FfKcgxqvjwHmxc5upLF9qZU9EpsVzzhleFahrT3shLuJzIw==",
+      "dependencies": [
+        "@rollup/rollup-android-arm-eabi",
+        "@rollup/rollup-android-arm64",
+        "@rollup/rollup-darwin-arm64",
+        "@rollup/rollup-darwin-x64",
+        "@rollup/rollup-freebsd-arm64",
+        "@rollup/rollup-freebsd-x64",
+        "@rollup/rollup-linux-arm-gnueabihf",
+        "@rollup/rollup-linux-arm-musleabihf",
+        "@rollup/rollup-linux-arm64-gnu",
+        "@rollup/rollup-linux-arm64-musl",
+        "@rollup/rollup-linux-loongarch64-gnu",
+        "@rollup/rollup-linux-powerpc64le-gnu",
+        "@rollup/rollup-linux-riscv64-gnu",
+        "@rollup/rollup-linux-s390x-gnu",
+        "@rollup/rollup-linux-x64-gnu",
+        "@rollup/rollup-linux-x64-musl",
+        "@rollup/rollup-win32-arm64-msvc",
+        "@rollup/rollup-win32-ia32-msvc",
+        "@rollup/rollup-win32-x64-msvc",
+        "@types/estree",
+        "fsevents"
+      ]
+    },
+    "scheduler@0.23.2": {
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "dependencies": [
+        "loose-envify"
+      ]
+    },
+    "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": [
+        "esbuild",
+        "fsevents",
+        "postcss",
+        "rollup"
+      ]
+    }
+  },
+  "workspace": {
+    "dependencies": [
+      "npm:@deno/vite-plugin@1",
+      "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/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

vite-wrapped/public/square.svg

@@ -0,0 +1,12 @@
+<?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/public/star.svg

@@ -0,0 +1,15 @@
+<?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/public/vite-deno.svg

@@ -0,0 +1,36 @@
+<svg width="248" height="275" viewBox="0 0 248 275" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_553_1862)">
+<ellipse cx="133.981" cy="219.676" rx="73.9807" ry="14.6763" fill="#74825F" fill-opacity="0.51"/>
+<path d="M136.505 51.7512C153.877 66.3061 166.457 128.128 173.046 171.857C188.321 192.524 218.273 184.138 219.471 183.239C220.669 182.341 233.548 171.857 229.954 190.727C226.36 209.597 197.307 215.287 173.046 210.495C173.046 214.688 158.669 233.258 139.8 235.355C124.704 237.032 113.941 226.869 110.447 221.577L99.3649 216.186C96.7691 217.584 81.6934 221.817 64.9205 221.577C43.9543 221.278 44.8528 197.915 51.1427 186.833C56.1746 177.968 71.41 176.949 78.3987 177.548L84.3891 163.471C82.3923 163.671 69.9524 162.453 67.3166 161.973C64.0219 161.374 55.6307 149.898 59.2296 134.118C63.1234 117.046 95.7707 113.751 99.3649 112.254C102.959 110.756 104.457 96.6787 104.157 83.5C88.5823 81.7029 72.5581 73.9155 76.6016 55.0459C81.9929 29.8864 114.341 33.1812 136.505 51.7512Z" fill="#B1F491" stroke="black" stroke-width="3.5942" stroke-linecap="round"/>
+<path d="M102.66 83.5C106.254 83.8994 114.041 84.159 116.437 82.0024" stroke="#3E7B28" stroke-opacity="0.55" stroke-width="3.5942" stroke-linecap="round"/>
+<path d="M90.3794 206.601C92.7756 213.191 100.863 216.785 100.863 216.785" stroke="#3E7B28" stroke-opacity="0.55" stroke-width="3.5942" stroke-linecap="round"/>
+<path d="M171.249 196.418C172.148 199.114 173.346 210.495 171.249 214.389" stroke="#3E7B28" stroke-opacity="0.55" stroke-width="3.5942" stroke-linecap="round"/>
+<circle cx="112.544" cy="54.2488" r="2.99517" fill="black"/>
+<path d="M63.1234 128.128C67.9157 130.924 77.62 138.312 78.0992 145.5C78.6983 154.486 73.307 160.476 69.1137 161.973" stroke="#3E7B28" stroke-opacity="0.55" stroke-width="3.5942" stroke-linecap="round"/>
+<path d="M54.1379 182.64C58.7305 183.838 66.4181 189.23 67.9157 197.616C69.4132 206.002 71.5099 217.684 62.8239 221.577" stroke="#3E7B28" stroke-opacity="0.55" stroke-width="3.5942" stroke-linecap="round"/>
+<path d="M68.5147 137.114L74.505 131.722" stroke="#3E7B28" stroke-opacity="0.55" stroke-width="3.5942" stroke-linecap="round"/>
+<path d="M73.0074 149.693L81.6934 151.79" stroke="#3E7B28" stroke-opacity="0.55" stroke-width="3.5942" stroke-linecap="round"/>
+<path d="M61.0268 191.626L67.6162 188.031" stroke="#3E7B28" stroke-opacity="0.55" stroke-width="3.5942" stroke-linecap="round"/>
+<path d="M65.819 208.099L73.6065 210.196" stroke="#3E7B28" stroke-opacity="0.55" stroke-width="3.5942" stroke-linecap="round"/>
+<path d="M30.9264 186.393L26.0084 169.639C25.7495 168.757 26.7174 168.022 27.4972 168.509L105.553 217.204C107.381 218.344 107.446 220.984 105.676 222.213L98.9017 226.917C94.8436 229.735 89.5878 230.226 85.1343 228.087C64.6655 218.258 52.0858 209.624 34.4753 192.341C32.8025 190.699 31.5866 188.642 30.9264 186.393Z" fill="#4DC3FF" stroke="black" stroke-width="4"/>
+<path d="M41.8791 160.074L46.7262 148.312C47.4243 146.618 49.8432 146.677 50.459 148.402L55.3497 162.106C55.872 163.57 54.5987 165.044 53.0748 164.74L43.337 162.797C42.1019 162.551 41.3992 161.238 41.8791 160.074Z" fill="#FFA901" stroke="black" stroke-width="4"/>
+<path d="M71.8785 149.588L101.01 128.223C105.454 124.964 111.741 127.892 112.05 133.394C113.793 164.454 113.06 185.535 109.769 215.636C109.227 220.59 103.792 223.354 99.4667 220.878C71.8486 205.063 53.3581 192.516 27.512 172.516C22.8968 168.945 24.4798 161.641 30.1507 160.265L69.3892 150.746C70.2872 150.528 71.1333 150.134 71.8785 149.588Z" fill="#BD34FE" stroke="black" stroke-width="4"/>
+<path d="M49.0264 145.468C58.7514 138.974 75.386 127.953 81.8842 123.946C83.0547 123.224 84.4689 123.961 84.6314 125.326L86.5911 141.788C86.752 143.139 88.1864 143.939 89.4205 143.365L95.4192 140.575C96.8754 139.898 98.4956 141.126 98.2363 142.711L90.6765 188.924C90.3789 190.743 87.9869 191.225 87.008 189.663L80.4098 179.132C79.7539 178.085 78.3152 177.877 77.3899 178.696L75.0448 180.77C74.0312 181.667 72.4383 181.319 71.8907 180.081L67.5098 170.18C66.9622 168.943 65.3693 168.595 64.3557 169.492L62.2372 171.366C61.2396 172.248 59.6743 171.927 59.1044 170.724L48.3367 147.981C47.9126 147.085 48.202 146.018 49.0264 145.468Z" fill="#FFD32B" stroke="black" stroke-width="4"/>
+<circle cx="92.7756" cy="48.2585" r="2.99517" fill="black"/>
+<path d="M104.88 161.075C100.088 151.97 109.473 142.505 114.764 138.911L151.904 151.49C152.004 156.582 150.047 168.143 141.421 173.655C130.638 180.543 110.87 172.457 104.88 161.075Z" fill="#B1F491"/>
+<path d="M111.346 222.775C101.521 208.878 115.439 197.017 123.626 192.824C129.703 192.1 142.516 193.468 145.152 204.73C148.446 218.807 130.554 237.227 111.346 222.775Z" fill="#B1F491"/>
+<path d="M123.626 192.824C112.285 195.592 101.179 211.429 115.799 227.493" stroke="black" stroke-width="3.5942" stroke-linecap="round"/>
+<path d="M114.764 138.911C109.473 142.505 100.088 151.97 104.88 161.075C110.87 172.457 130.638 180.543 141.421 173.655C150.047 168.143 152.004 156.582 151.904 151.49" stroke="black" stroke-width="3.5942" stroke-linecap="round"/>
+<path d="M104.457 153.887C108.35 151.99 118.354 149.334 127.22 153.887C138.302 159.577 143.993 167.964 144.592 170.66" stroke="#3E7B28" stroke-opacity="0.55" stroke-width="3.5942" stroke-linecap="round"/>
+<path d="M115.539 155.684L118.235 147.297" stroke="#3E7B28" stroke-opacity="0.55" stroke-width="3.5942" stroke-linecap="round"/>
+<path d="M136.505 165.268L141.896 159.278" stroke="#3E7B28" stroke-opacity="0.55" stroke-width="3.5942" stroke-linecap="round"/>
+<path d="M115.539 199.114C130.814 197.317 138.003 205.104 139.5 214.089C140.998 223.075 138.602 235.056 132.312 235.655" stroke="#3E7B28" stroke-opacity="0.55" stroke-width="3.5942" stroke-linecap="round"/>
+<path d="M129.317 205.403L134.109 198.814" stroke="#3E7B28" stroke-opacity="0.55" stroke-width="3.5942" stroke-linecap="round"/>
+<path d="M135.906 217.384L144.592 213.79" stroke="#3E7B28" stroke-opacity="0.55" stroke-width="3.5942" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_553_1862">
+<rect width="248" height="274.957" fill="white"/>
+</clipPath>
+</defs>
+</svg>

vite-wrapped/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

vite-wrapped/src/App.css

@@ -0,0 +1,10 @@
+html,
+body,
+#root {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  text-align: center;
+}

vite-wrapped/src/App.tsx

@@ -0,0 +1,113 @@
+import "./App.css";
+// @deno-types="@types/react"
+import React, { useEffect, useState } from "react";
+
+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 steps = [
+  {
+    title: "Step 1",
+    content: Welcome,
+  },
+  {
+    title: "Step 2",
+    content: GlobalTop,
+  },
+  {
+    title: "Step 3",
+    content: "Content of step 3",
+  },
+];
+
+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;
+  const animationProgress = useMotionValue(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);
+    }
+  });
+
+  useEffect(() => {
+    animationProgress.set(0);
+    setInitialAnimationFrame(0);
+  }, [currentStep]);
+
+  const CurrentStepContent = steps[currentStep].content;
+  return (
+    <>
+      <div style={page as React.CSSProperties}>
+        <div
+          style={{
+            position: "absolute",
+            top: "0",
+            bottom: "0",
+            left: "0",
+            right: "0",
+          }}
+        >
+          <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" }}>
+          <h1>Step selector (current = {currentStep})</h1>
+          <button onClick={() => setCurrentStep(0)}>Step 1</button>
+          <button onClick={() => setCurrentStep(1)}>Step 2</button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+const page = {
+  display: "flex",
+  position: "relative",
+  justifyContent: "start",
+  alignItems: "start",
+  margin: 0,
+  padding: 0,
+  width: "100%",
+  height: "100%",
+  flexDirection: "column",
+  backgroundColor: "#050505",
+};
+export default App;

vite-wrapped/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

vite-wrapped/src/components/Progress.tsx

@@ -0,0 +1,44 @@
+
+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

@@ -0,0 +1,45 @@
+import React from "react";
+
+type Mask = "Star" | "Square";
+
+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");
+    }
+    if (mask === "Square") {
+      setMaskUrl("/square.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/index.css

@@ -0,0 +1,69 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

vite-wrapped/src/layout/canvas.tsx

@@ -0,0 +1,20 @@
+
+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/main.tsx

@@ -0,0 +1,12 @@
+import './index.css'
+// @deno-types="@types/react"
+import { StrictMode } from 'react'
+// @deno-types="@types/react-dom/client"
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root') as HTMLElement).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

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: 1.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/stepProps.ts

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

vite-wrapped/src/steps/welcome.tsx

@@ -0,0 +1,208 @@
+import { motion, Variants } from "framer-motion";
+import { StepProps } from "./stepProps.ts";
+import Masked from "../components/mask/Masked.tsx";
+import React, { useState } from "react";
+
+type VariantProps = {
+  delay: number;
+};
+
+type NudgedVariantProps = VariantProps & {
+  nudge: number;
+  id: number;
+};
+
+const starVariants: Variants = {
+  "1": (props: VariantProps) => ({
+    rotate: 360,
+    scale: 3,
+    transition: {
+      duration: 2,
+      repeat: 0,
+      delay: 1.5 + props.delay,
+    },
+  }),
+  "2": (props: VariantProps) => ({
+    scale: 10,
+    x: props.delay,
+    rotate: props.delay + 365 * 2,
+    transition: {
+      duration: 0.1,
+      repeat: 0,
+    },
+  }),
+  "3": (_: VariantProps) => ({
+    scale: 10,
+  }),
+};
+
+
+const letterVariants: Variants = {
+  "1": (props: NudgedVariantProps) => ({
+    rotate: 360 * props.nudge + props.id * 5,
+    x: -props.nudge * props.id * 15,
+    scale: 9 - props.id / 2,
+    transition: {
+      duration: 2,
+      ease: "easeInOut",
+      //delay: 1.5 + props.delay + props.id / 10,
+      delay: 1.5 + props.id/50,
+    },
+  }),
+  "2": (props: NudgedVariantProps) => ({
+    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: "linear",
+      //delay: props.delay + props.id / 10,
+    },
+  }),
+  "3": (props: NudgedVariantProps) => ({
+    rotate: 361 * props.nudge,
+    x: -props.nudge * 30,
+    scale: 4,
+    z: 0.2,
+    transition: {
+      duration: 1,
+      ease: "easeInOut",
+      delay: props.delay,
+    },
+  }),
+};
+
+type RunningAnimations = {
+  [key: string]: number;
+};
+
+function Welcome({ progress }: StepProps) {
+  const [starVariant, setStarVariant] = useState("1");
+  const [runningAnimations, setRunningAnimations] = useState<RunningAnimations>(
+    {}
+  );
+
+  const animationComplete = (variant: string) => {
+    const newRunningAnimations = { ...runningAnimations };
+    if (newRunningAnimations[variant] > 0) {
+      newRunningAnimations[variant]--;
+      setRunningAnimations(newRunningAnimations);
+    } else {
+      if (variant === "1") {
+        setStarVariant("2");
+      } else if (variant === "2") {
+        setStarVariant("3");
+      }
+    }
+  };
+
+  const animationStarted = (variant: string) => {
+    const newRunningAnimations = { ...runningAnimations };
+    if (!newRunningAnimations[variant]) {
+      newRunningAnimations[variant] = 1;
+    } else {
+      newRunningAnimations[variant]++;
+    }
+    setRunningAnimations(newRunningAnimations);
+  };
+
+  return (
+    <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="Square" style={starStyle} />
+          </div>
+        </motion.div>
+      ))}
+
+      <motion.div
+        style={{
+          display: "flex",
+          position: "relative",
+        }}
+      >
+        {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>
+  );
+}
+
+const pageStyle = {
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  overflow: "hidden",
+};
+
+const baseStyle = {
+  position: "absolute",
+  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)",
+};
+
+const letterStyle = (props: NudgedVariantProps) => ({
+  transform: `translateX(${Math.floor(props.nudge * props.id * 100)}px)`,
+  scale: 0,
+  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;

vite-wrapped/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

vite-wrapped/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "lib": ["esnext", "dom"]
+  }
+}

vite-wrapped/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import deno from '@deno/vite-plugin'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [deno(), react()],
+})