initial commit

islands/Name.tsx

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2025 xwra
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { useEffect, useState } from "preact/hooks";
+
+export default function Name() {
+  const names = ["muxiepuff", "lívia", "aury"];
+  const ipas = ["/ˈmuˌksipʌf/", "/li.vjɐ/", "/ˈaʊ̯ˌɾi/"]
+    ;
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIsAnimating(true);
+      setTimeout(() => {
+        setCurrentIndex((prev) => (prev + 1) % names.length);
+        setIsAnimating(false);
+      }, 200);
+    }, 2000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <span class="name-scroller">
+      <span class={`name-wrapper ${isAnimating ? "animating" : ""}`}>
+        <span class="name-text">
+          {names[currentIndex]}
+          <span class="name-underline"></span>
+        </span>{" "}
+        <span class="alt alt-font">({ipas[currentIndex]}, she/her)</span>
+      </span>
+    </span>
+  );
+}