37 lines
1 KiB
TypeScript
37 lines
1 KiB
TypeScript
/**
|
||
* 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>
|
||
);
|
||
}
|