Hugging Face's logo

Spaces:
bench-labs
/
Members
Running

App Files Community
4
Members / index.html
wop's picture
wop
Update index.html
bd8d4f4 verified
Raw
History Blame Contribute Delete
26.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Partners &amp; Members — Bench-labs</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;1,6..72,300;1,6..72,400&display=swap" rel="stylesheet" />
<script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
serif: ['Newsreader', 'serif'],
}
}
}
}
</script>
<style>
:root {
--bg-0: #05060a;
--bg-1: #0a0c14;
--ink: #e8ecf5;
--muted: #8b93a8;
--muted-2: #5c6478;
--line: rgba(255,255,255,0.08);
--line-strong: rgba(255,255,255,0.16);
--accent: #7c9cff;
--accent-soft: rgba(124,156,255,0.5);
}
* { box-sizing: border-box; }
html, body {
background: var(--bg-0);
}
body {
font-family: 'Inter', sans-serif;
color: var(--ink);
overflow-x: hidden;
}
/* ============ Space background: gradient + layered star canvas ============ */
.space-bg {
position: fixed;
inset: 0;
z-index: 0;
background:
radial-gradient(ellipse 80% 50% at 50% -10%, rgba(90,100,180,0.18) 0%, transparent 60%),
radial-gradient(ellipse 60% 40% at 85% 100%, rgba(120,80,180,0.12) 0%, transparent 60%),
linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
pointer-events: none;
}
/* Stars are plain divs with box-shadow-free simple dots, GPU-cheap:
opacity keyframe only, no filter/blur/backdrop. */
.stars {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.star {
position: absolute;
width: 2px;
height: 2px;
border-radius: 50%;
background: #fff;
opacity: 0.5;
animation: twinkle var(--dur, 4s) ease-in-out infinite;
animation-delay: var(--delay, 0s);
}
.star.big { width: 3px; height: 3px; }
@keyframes twinkle {
0%, 100% { opacity: var(--min-op, 0.15); }
50% { opacity: var(--max-op, 0.9); }
}
@media (prefers-reduced-motion: reduce) {
.star { animation: none; opacity: 0.5; }
}
/* A few slow shooting stars, pure transform, cheap. */
.shooting-star {
position: absolute;
top: var(--top, 10%);
left: -10%;
width: 2px;
height: 2px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
animation: shoot 6s linear infinite;
animation-delay: var(--delay, 0s);
opacity: 0;
}
.shooting-star::before {
content: '';
position: absolute;
top: 50%;
right: 0;
width: 90px;
height: 1px;
transform: translateY(-50%);
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7));
}
@keyframes shoot {
0% { transform: translate(0, 0); opacity: 0; }
4% { opacity: 1; }
18% { opacity: 0; }
100% { transform: translate(130vw, 40px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.shooting-star { display: none; }
}
.fade { animation: fadeIn 0.6s ease both; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .12s; } .d3 { animation-delay: .18s; }
.d4 { animation-delay: .24s; } .d5 { animation-delay: .3s; } .d6 { animation-delay: .36s; } .d7 { animation-delay: .42s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.rotating-headline {
display: inline-block;
transition: opacity 0.4s ease, transform 0.4s ease;
will-change: opacity, transform;
}
.rotating-headline.rolling-out { opacity: 0; transform: translateY(-0.5em); }
.rotating-headline.rolling-in { opacity: 0; transform: translateY(0.5em); }
@media (prefers-reduced-motion: reduce) {
.rotating-headline { transition: opacity 0.3s ease; }
.rotating-headline.rolling-out, .rotating-headline.rolling-in { transform: none; }
}
/* ============ Partners "accumulation" stage ============ */
.orbit-stage {
position: relative;
width: 100%;
max-width: 980px;
margin: 0 auto;
}
/* Each logo starts flung off-stage in a random direction, drifts/tumbles
inward, then settles permanently into its final grid slot and stops.
Pure transform + opacity keyframes (translate/rotate/scale only) so the
whole sequence is GPU-composited with no per-frame layout/paint cost,
and once the animation ends it simply holds its final state — no
ongoing free-flight, no JS animation loop. */
.orbit-item {
position: absolute;
top: 50%;
left: 50%;
width: var(--size, 160px);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 0 0 0 calc(var(--size, 160px) / -2);
opacity: 0;
animation: accumulate var(--dur, 1.6s) cubic-bezier(0.16, 0.9, 0.2, 1) forwards;
animation-delay: var(--delay, 0s);
will-change: transform, opacity;
/* final resting position for this item, set inline per-item */
--end-x: 0px;
--end-y: 0px;
}
@media (max-width: 640px) {
.orbit-item { --size: 118px !important; gap: 6px; }
}
.orbit-card {
width: var(--size, 160px);
height: var(--size, 160px);
border-radius: 22px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.02);
display: flex;
align-items: center;
justify-content: center;
padding: 16%;
cursor: pointer;
transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
position: relative;
overflow: visible;
}
.orbit-card:hover {
border-color: var(--accent-soft);
background: rgba(124,156,255,0.06);
transform: scale(1.06);
z-index: 20;
}
.orbit-card img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* Caption sits permanently under the card — no hover/tap required, so it
works identically on desktop and mobile/touch. */
.orbit-caption {
text-align: center;
max-width: calc(var(--size, 160px) + 40px);
}
.orbit-caption .name {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--ink);
margin-bottom: 2px;
}
.orbit-caption .blurb {
display: block;
font-size: 10.5px;
line-height: 1.4;
color: var(--muted);
}
.orbit-caption .since {
display: block;
margin-top: 4px;
font-size: 9px;
letter-spacing: 0.04em;
color: var(--muted-2);
}
@media (max-width: 640px) {
.orbit-caption .name { font-size: 11.5px; }
.orbit-caption .blurb { font-size: 9px; }
}
@keyframes accumulate {
0% {
opacity: 0;
transform:
translate(var(--start-x, 0px), calc(var(--start-y, 0px) - var(--size, 160px) / 2))
rotate(var(--start-rot, 0deg))
scale(0.4);
}
12% {
opacity: 1;
}
70% {
opacity: 1;
transform:
translate(calc(var(--end-x, 0px) + var(--overshoot-x, 0px)), calc(var(--end-y, 0px) + var(--overshoot-y, 0px) - var(--size, 160px) / 2))
rotate(calc(var(--start-rot, 0deg) * 0.08))
scale(1.06);
}
100% {
opacity: 1;
transform: translate(var(--end-x, 0px), calc(var(--end-y, 0px) - var(--size, 160px) / 2)) rotate(0deg) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.orbit-item {
animation: none;
opacity: 1;
transform: translate(var(--end-x, 0px), calc(var(--end-y, 0px) - var(--size, 160px) / 2));
}
}
/* A soft little settle-flash on arrival, purely decorative and cheap
(opacity + scale only), so the sequential landings read clearly. */
.orbit-card::after {
content: '';
position: absolute;
inset: -10px;
border-radius: 24px;
background: radial-gradient(circle, rgba(124,156,255,0.35) 0%, transparent 70%);
opacity: 0;
animation: settleFlash 0.7s ease-out forwards;
animation-delay: inherit;
pointer-events: none;
}
@keyframes settleFlash {
0%, 60% { opacity: 0; }
72% { opacity: 1; }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.orbit-card::after { display: none; }
}
/* "Partners" label sits in normal flow above the stage, so it can never
overlap the accumulating logos regardless of stage height or how many
rows the layout wraps to. */
.orbit-label {
font-size: 10px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--muted-2);
text-align: center;
margin-bottom: 18px;
}
/* ============ Members section ============ */
.section-divider {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
max-width: 42rem;
}
.section-divider .line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.member-card {
border: 1px solid var(--line);
border-radius: 14px;
background: rgba(255,255,255,0.02);
transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.member-card:hover {
border-color: var(--accent-soft);
background: rgba(124,156,255,0.05);
transform: translateY(-2px);
}
.member-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--line-strong);
background: rgba(255,255,255,0.04);
object-fit: cover;
flex-shrink: 0;
}
.member-org-badge {
font-size: 9px;
font-weight: 500;
letter-spacing: 0.03em;
color: var(--muted);
background: rgba(255,255,255,0.04);
border: 1px solid var(--line);
border-radius: 999px;
padding: 2px 8px;
white-space: nowrap;
}
.member-hf-link {
font-size: 10px;
color: var(--accent);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 3px;
transition: color 0.15s ease;
}
.member-hf-link:hover { color: #a9beff; }
::selection { background: rgba(124,156,255,0.35); }
</style>
</head>
<body class="antialiased min-h-screen overflow-y-auto">
<div class="space-bg"></div>
<div class="stars" id="stars"></div>
<div class="relative z-10 min-h-screen flex flex-col items-center px-6 py-16">
<!-- Logo -->
<img src="benchlabs.svg" alt="Bench-labs" class="h-16 md:h-20 w-auto mb-8 fade d1"
style="filter: drop-shadow(0 0 12px rgba(124,156,255,0.35));" />
<!-- Label -->
<div class="flex items-center gap-2.5 mb-3 fade d2">
<span class="text-[11px] font-medium tracking-widest uppercase text-[var(--muted)]">Partners &amp; members</span>
</div>
<!-- Heading -->
<h1 class="font-serif italic text-3xl md:text-4xl tracking-tight text-center mb-2 fade d2">
<span id="rotating-headline" class="rotating-headline">Do you want to try something?</span>
</h1>
<p class="text-[var(--muted)] text-sm font-light text-center max-w-sm mb-6 fade d3">
Enter our joyful community and let's test together
</p>
<!-- Partners orbit -->
<div class="orbit-label fade d4">Partners</div>
<div class="orbit-stage fade d4" id="orbit-stage">
<!-- orbit items injected by JS below -->
</div>
<!-- Divider -->
<div class="section-divider mt-14 mb-10 fade d5">
<div class="line"></div>
<span class="text-[11px] font-medium tracking-widest uppercase text-[var(--muted)] whitespace-nowrap">Members</span>
<div class="line"></div>
</div>
<!-- Members grid - populated at runtime from members.json (same repo) -->
<div id="members-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full max-w-3xl fade d6">
<!-- cards injected by loadMembers() below -->
</div>
<p id="members-count" class="text-[11px] text-[var(--muted-2)] mt-6 fade d7">
Loading members&hellip;
</p>
<!-- Footer -->
<a class="mt-10 text-xs text-[var(--muted-2)] hover:text-[var(--muted)] transition-colors duration-300 fade d7">
Experimentation is for everyone
</a>
</div>
<script>
// ===================================================================
// Partner data — same content/links as before, restyled for the orbit.
// Edit this array to add/remove/update partner cards.
// ===================================================================
const PARTNERS = [
{
name: "FWKV",
url: "https://huggingface.co/FWKV",
img: "FWKV.png",
blurb: "Feed-forward Weighted Key Value",
since: "25/7/2026",
},
{
name: "FromZero",
url: "https://huggingface.co/fromziro",
img: "qITdWZiMpLE8Kop68m9OZ.webp",
blurb: "We build stuff and share it with the community.",
since: "15/7/2026",
},
{
name: "İvmeLabs",
url: "https://huggingface.co/IvmeLabs",
img: "orglogobare.png",
blurb: "Stupidly Small Models",
since: "12/7/2026",
},
{
name: "Simplicity",
url: "https://simplicity-india.com/",
img: "Simplicity.png",
blurb: "Simplicity without complexity",
since: "12/7/2026",
},
{
name: "Complexity ML",
url: "https://www.complexity-ai.fr/",
img: "Screenshot-2026-06-20-171937.png",
blurb: "Building efficient transformer architectures with Mu-Guided Dynamics and Token-Routed MLP",
since: null, // planned, not yet officially partnered
},
];
(() => {
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const isMobile =
window.matchMedia("(max-width: 767px)").matches ||
navigator.userAgentData?.mobile === true ||
/Android|iPhone|iPad|iPod|webOS|BlackBerry|Opera Mini|IEMobile/i.test(navigator.userAgent);
// ---------------- Star field ----------------
// Cheap: absolutely-positioned dots with an opacity-only twinkle. No
// blur/filter/backdrop anywhere. Count is trimmed on mobile.
const starsEl = document.getElementById("stars");
const starCount = isMobile ? 60 : 140;
const frag = document.createDocumentFragment();
for (let i = 0; i < starCount; i++) {
const s = document.createElement("div");
s.className = "star" + (Math.random() < 0.15 ? " big" : "");
s.style.left = Math.random() * 100 + "%";
s.style.top = Math.random() * 100 + "%";
s.style.setProperty("--dur", (3 + Math.random() * 5).toFixed(2) + "s");
s.style.setProperty("--delay", (-Math.random() * 6).toFixed(2) + "s");
s.style.setProperty("--min-op", (0.08 + Math.random() * 0.15).toFixed(2));
s.style.setProperty("--max-op", (0.6 + Math.random() * 0.4).toFixed(2));
frag.appendChild(s);
}
starsEl.appendChild(frag);
// A couple of slow shooting stars, skipped on mobile / reduced motion.
if (!isMobile && !prefersReducedMotion) {
const shootCount = 3;
for (let i = 0; i < shootCount; i++) {
const sh = document.createElement("div");
sh.className = "shooting-star";
sh.style.setProperty("--top", (5 + Math.random() * 40) + "%");
sh.style.setProperty("--delay", (i * 7 + Math.random() * 5).toFixed(2) + "s");
starsEl.appendChild(sh);
}
}
// ---------------- Partner accumulation sequence ----------------
// Logos start flung off in random directions, drift/tumble inward one
// after another, then settle permanently into a fixed grid layout and
// stop — no ongoing free-flight once the sequence finishes.
const stage = document.getElementById("orbit-stage");
const stageW = isMobile ? 340 : 940;
const stageH = isMobile ? 460 : 560;
const size = isMobile ? 118 : (PARTNERS.length <= 4 ? 190 : 160);
// Final resting layout: a centered row (wraps to two rows if needed),
// expressed as offsets from the stage center (where top/left:50% sits).
// Extra vertical room (captionH) is reserved per row so the always-on
// name/blurb caption under each logo never overlaps the row below it.
const perRow = isMobile ? Math.min(2, PARTNERS.length) : Math.min(4, PARTNERS.length);
const gap = isMobile ? 26 : 46;
const captionH = isMobile ? 58 : 66;
const rows = Math.ceil(PARTNERS.length / perRow);
const rowHeight = size + captionH + gap;
const stageContentHeight = rows * (size + captionH) + (rows - 1) * gap;
// extra headroom above/below so the fly-in overshoot never gets clipped
stage.style.height = (stageContentHeight + (isMobile ? 40 : 60)) + "px";
function slotPosition(index) {
const row = Math.floor(index / perRow);
const itemsInRow = Math.min(perRow, PARTNERS.length - row * perRow);
const rowWidth = itemsInRow * size + (itemsInRow - 1) * gap;
const col = index % perRow;
const x = -rowWidth / 2 + col * (size + gap) + size / 2;
const rowsTotalHeight = rows * (size + captionH) + (rows - 1) * gap;
const y = -rowsTotalHeight / 2 + row * rowHeight + size / 2;
return { x, y };
}
PARTNERS.forEach((p, i) => {
const { x: endX, y: endY } = slotPosition(i);
// Random off-stage starting point: pick an angle around the stage and
// push it out well past the visible edge so the entry reads as a
// clear "fly in from a random direction."
const angle = Math.random() * Math.PI * 2;
const throwDist = Math.max(stageW, stageH) * (0.75 + Math.random() * 0.5);
const startX = Math.cos(angle) * throwDist;
const startY = Math.sin(angle) * throwDist;
const startRot = (Math.random() < 0.5 ? -1 : 1) * (140 + Math.random() * 220);
// Small overshoot past the final slot before settling, for a soft
// "drift into place" landing rather than a hard stop.
const overshootAngle = Math.atan2(endY, endX) + (Math.random() - 0.5) * 0.6;
const overshootX = Math.cos(overshootAngle) * (10 + Math.random() * 14);
const overshootY = Math.sin(overshootAngle) * (10 + Math.random() * 14);
const duration = 1.3 + Math.random() * 0.5;
const delay = i * 0.45 + Math.random() * 0.15; // sequential accumulation, one after another
const item = document.createElement("div");
item.className = "orbit-item";
item.style.setProperty("--size", size + "px");
item.style.setProperty("--start-x", startX.toFixed(1) + "px");
item.style.setProperty("--start-y", startY.toFixed(1) + "px");
item.style.setProperty("--start-rot", startRot.toFixed(1) + "deg");
item.style.setProperty("--end-x", endX.toFixed(1) + "px");
item.style.setProperty("--end-y", endY.toFixed(1) + "px");
item.style.setProperty("--overshoot-x", overshootX.toFixed(1) + "px");
item.style.setProperty("--overshoot-y", overshootY.toFixed(1) + "px");
item.style.setProperty("--dur", duration.toFixed(2) + "s");
item.style.setProperty("--delay", delay.toFixed(2) + "s");
const card = document.createElement("div");
card.className = "orbit-card";
card.dataset.url = p.url;
const img = document.createElement("img");
img.src = p.img;
img.alt = p.name;
img.loading = "lazy";
card.appendChild(img);
card.addEventListener("click", () => {
window.open(p.url, "_blank", "noopener,noreferrer");
});
const caption = document.createElement("div");
caption.className = "orbit-caption";
caption.innerHTML =
'<span class="name">' + p.name + '</span>' +
'<span class="blurb">' + p.blurb + '</span>' +
'<span class="since">' + (p.since ? "Partnered since " + p.since : "Planned partner") + '</span>';
item.appendChild(card);
item.appendChild(caption);
stage.appendChild(item);
});
// ---------------- Adaptive performance ladder ----------------
// The accumulation animation is one-shot and short-lived, so there's
// little to cut there once it's finished; this ladder mainly protects
// the ambient star field on very low-power devices.
if (!prefersReducedMotion) {
let cuts = 0;
const steps = [
() => document.querySelectorAll(".shooting-star").forEach((s) => s.remove()),
() => {
const all = document.querySelectorAll(".star");
all.forEach((s, i) => { if (i % 2 === 0) s.remove(); });
},
];
let frames = 0, windowStart = 0, lowStreak = 0;
const THRESHOLD = 30, SAMPLE_MS = 1000, PATIENCE = 2;
function tick(now) {
frames++;
const elapsed = now - windowStart;
if (elapsed >= SAMPLE_MS) {
const fps = (frames * 1000) / elapsed;
frames = 0;
windowStart = now;
if (fps < THRESHOLD) {
if (++lowStreak >= PATIENCE && cuts < steps.length) {
lowStreak = 0;
steps[cuts]();
cuts++;
}
} else {
lowStreak = 0;
}
}
if (cuts < steps.length) requestAnimationFrame(tick);
}
setTimeout(() => {
windowStart = performance.now();
requestAnimationFrame(tick);
}, 1500);
}
})();
</script>
<script>
// ===== Members grid: fetched from members.json in this same Space repo =====
// members.json is written by the Discord bot on every /link and
// /hf-visibility change. It only ever contains members who set themselves
// to public - no Discord identity, no hidden users. See storage.py's
// sync_public_members() for how it's produced.
(async () => {
const grid = document.getElementById("members-grid");
const countEl = document.getElementById("members-count");
function escapeHtml(str) {
const div = document.createElement("div");
div.textContent = str ?? "";
return div.innerHTML;
}
function initials(username) {
if (!username) return "?";
return username.slice(0, 2).toUpperCase();
}
function absoluteAvatarUrl(url) {
// Some existing records have a HF-relative path like
// "/avatars/abc.svg" instead of a full URL (from before this was
// normalized server-side in web.py) - fix it up here too so old
// data self-heals without requiring everyone to re-/link.
if (url && url.startsWith("/")) {
return `https://huggingface.co${url}`;
}
return url || "";
}
function memberCardHtml(member) {
const username = member.hf_username || "";
const profileUrl = `https://huggingface.co/${encodeURIComponent(username)}`;
const avatarUrl = absoluteAvatarUrl(member.avatar_url);
const avatar = avatarUrl
? `<img src="${escapeHtml(avatarUrl)}" alt="${escapeHtml(username)}" class="member-avatar" loading="lazy" />`
: `<div class="member-avatar flex items-center justify-center text-sm font-medium text-[var(--muted)]">${escapeHtml(initials(username))}</div>`;
const orgs = Array.isArray(member.orgs) ? member.orgs : [];
const orgBadges = orgs
.map((o) => {
const slug = o?.slug || o?.name || "";
return `<span class="member-org-badge">${escapeHtml(o?.name || slug)}</span>`;
})
.join("");
return `
<div class="member-card rounded-xl p-4 flex items-center gap-3">
${avatar}
<div class="flex flex-col gap-1 min-w-0">
<span class="text-sm font-medium text-[var(--ink)] truncate">${escapeHtml(username)}</span>
<a href="${profileUrl}" target="_blank" rel="noopener noreferrer" class="member-hf-link">
huggingface.co/${escapeHtml(username)}
<svg viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.5" width="8" height="8">
<path d="M1 9L9 1M9 1H4M9 1V6"/>
</svg>
</a>
${orgBadges ? `<div class="flex flex-wrap gap-1 mt-0.5">${orgBadges}</div>` : ""}
</div>
</div>
`;
}
try {
const res = await fetch("members.json", { cache: "no-store" });
if (!res.ok) throw new Error(`members.json returned ${res.status}`);
const members = await res.json();
if (!Array.isArray(members) || members.length === 0) {
grid.innerHTML = "";
countEl.textContent = "No members yet - be the first to /link!";
return;
}
grid.innerHTML = members.map(memberCardHtml).join("");
countEl.textContent =
`${members.length} member${members.length === 1 ? "" : "s"} shown \u00b7 members who set their link to private are not listed here`;
} catch (err) {
console.error("Failed to load members.json", err);
grid.innerHTML = "";
countEl.textContent = "Couldn't load members right now - try refreshing.";
}
})();
</script>
<script>
// Rotating headline — cycles the hero question through a few variations.
(() => {
const el = document.getElementById("rotating-headline");
if (!el) return;
const phrases = [
"Do you want to try something new?",
"Do you want to build something?",
"Do you want to break something?",
"Do you want to benchmark something?",
"Got a model to upgrade?",
"Ready to experiment together?",
"Want a place to share?",
"Need help to start?",
"Made a revolutionary achivement?",
"Want to see more?",
];
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
let i = 0;
setInterval(() => {
i = (i + 1) % phrases.length;
if (reduce) { el.textContent = phrases[i]; return; }
el.classList.add("rolling-out");
el.addEventListener("transitionend", function onOut() {
el.textContent = phrases[i];
el.classList.remove("rolling-out");
el.classList.add("rolling-in");
requestAnimationFrame(() => requestAnimationFrame(() => el.classList.remove("rolling-in")));
}, { once: true });
}, 3400);
})();
</script>
</body>
</html>