feat: add all 191+ Habbo fonts from habbofont.net to logo generator

src/components/public/habbo-fonts.ts

@@ -0,0 +1,269 @@
+export interface HabboFont {
+  name: string;
+  styleName: string;
+  hasNumbers?: boolean;
+}
+
+export interface HabboFontGroup {
+  groupName: string;
+  fonts: HabboFont[];
+}
+
+export const HABBO_FONT_GROUPS: HabboFontGroup[] = [
+  {
+    groupName: "Habbo (related) logo",
+    fonts: [
+      { name: "Habbo new", styleName: "habbo_new", hasNumbers: true },
+      { name: "Habbo old", styleName: "habbo_big", hasNumbers: true },
+      { name: "Habbo new big", styleName: "habbo_new_big", hasNumbers: true },
+      { name: "Habbo old big", styleName: "habbo_old_big", hasNumbers: true },
+      { name: "Habbo", styleName: "habbo", hasNumbers: true },
+      { name: "Habbo Tiny", styleName: "habbo_tiny" },
+      { name: "Habbo oldschool", styleName: "habbo_oldschool" },
+      { name: "Habbo blocky", styleName: "habbo_blocky" },
+      { name: "Habjoy", styleName: "habjoy" },
+      { name: "Habjoy light", styleName: "habjoy_light" },
+      { name: "Paradise", styleName: "paradise" },
+      { name: "Paradise 2", styleName: "paradise_rounded" },
+      { name: "Habbnew", styleName: "habbnew" },
+      { name: "Habbo Clicker", styleName: "habbo_clicker" },
+      { name: "Reception", styleName: "reception" },
+    ],
+  },
+  {
+    groupName: "Generic fonts",
+    fonts: [
+      { name: "Accessoires", styleName: "accessoires" },
+      { name: "Africa", styleName: "africa" },
+      { name: "Alhambra", styleName: "alhambra" },
+      { name: "Arctic", styleName: "arctic", hasNumbers: true },
+      { name: "Asian", styleName: "asian" },
+      { name: "Asian small", styleName: "asian_small" },
+      { name: "Basic", styleName: "basic", hasNumbers: true },
+      { name: "Base", styleName: "base", hasNumbers: true },
+      { name: "Bathroom", styleName: "bathroom", hasNumbers: true },
+      { name: "Battle Banzai", styleName: "battlebanzai" },
+      { name: "Bensalem", styleName: "bensalem", hasNumbers: true },
+      { name: "Bensalem sea", styleName: "bensalem_sea" },
+      { name: "Bling", styleName: "bling", hasNumbers: true },
+      { name: "Bling Gold", styleName: "bling_gold" },
+      { name: "Bones", styleName: "bones" },
+      { name: "Books", styleName: "books", hasNumbers: true },
+      { name: "Bots", styleName: "bots" },
+      { name: "Bubble", styleName: "bubble" },
+      { name: "Bubble blue", styleName: "bubble_blue" },
+      { name: "Bubble orange", styleName: "bubble_orange" },
+      { name: "Bunny run", styleName: "bunny_run" },
+      { name: "Bunny run blue", styleName: "bunny_run_blue" },
+      { name: "Buttons", styleName: "buttons" },
+      { name: "Candy", styleName: "candy" },
+      { name: "Collectibles", styleName: "collectibles" },
+      { name: "Crystal", styleName: "crystal" },
+      { name: "Cubie", styleName: "cubie" },
+      { name: "Disco", styleName: "disco" },
+      { name: "Dreams", styleName: "dreams" },
+      { name: "Dreams flat", styleName: "dreams_flat" },
+      { name: "Duckets", styleName: "duckets" },
+      { name: "Emo", styleName: "emo" },
+      { name: "Exchange", styleName: "exchange" },
+      { name: "Executive", styleName: "executive" },
+      { name: "Explore", styleName: "explore" },
+      { name: "Explore big", styleName: "explore_big" },
+      { name: "Explore small", styleName: "explore_small" },
+      { name: "F.A.Q.", styleName: "faq" },
+      { name: "F.BOMB", styleName: "fbomb" },
+      { name: "Festival", styleName: "festival" },
+      { name: "Flags", styleName: "flags" },
+      { name: "FX", styleName: "fx" },
+      { name: "Freehand", styleName: "freehand" },
+      { name: "Gaming", styleName: "gaming" },
+      { name: "Gallery", styleName: "gallery" },
+      { name: "Golden temple", styleName: "goldentemple" },
+      { name: "Gravity", styleName: "gravity" },
+      { name: "HMA", styleName: "hma" },
+      { name: "Habbo gold", styleName: "gold_big" },
+      { name: "Habbo news", styleName: "habbo_news" },
+      { name: "Habbo Runway", styleName: "habbo_runway" },
+      { name: "Habbid red", styleName: "habbid_red" },
+      { name: "Habbid blue", styleName: "habbid_blue" },
+      { name: "Habbolife", styleName: "habbolife" },
+      { name: "Habbowood", styleName: "habbowood" },
+      { name: "Habbowood big", styleName: "habbowood_big" },
+      { name: "Hands", styleName: "hands" },
+      { name: "Hello", styleName: "hello" },
+      { name: "Horse", styleName: "horse" },
+      { name: "Ice", styleName: "ice" },
+      { name: "Iced", styleName: "iced" },
+      { name: "Iron", styleName: "iron" },
+      { name: "Japan", styleName: "japan" },
+      { name: "Love", styleName: "love" },
+      { name: "Marketplace red", styleName: "marketplace_red" },
+      { name: "Monkey", styleName: "monkey" },
+      { name: "Mushroom", styleName: "mushroom" },
+      { name: "Mushroom green", styleName: "mushroom_green" },
+      { name: "Neon blue", styleName: "neon_blue", hasNumbers: true },
+      { name: "Neon green", styleName: "neon_green", hasNumbers: true },
+      { name: "Neon pink", styleName: "neon_pink", hasNumbers: true },
+      { name: "Occasional", styleName: "occasional" },
+      { name: "Palooza", styleName: "palooza" },
+      { name: "Palooza blue", styleName: "palooza_blue" },
+      { name: "Pets", styleName: "pets" },
+      { name: "Pillows Orange", styleName: "pillow_orange" },
+      { name: "Pillows Pink", styleName: "pillow_pink" },
+      { name: "Pipes", styleName: "pipes" },
+      { name: "Plants", styleName: "plants" },
+      { name: "Plastic", styleName: "plastic" },
+      { name: "Recycle", styleName: "recycle" },
+      { name: "Retropixel", styleName: "retropixel" },
+      { name: "Rugs", styleName: "rugs" },
+      { name: "Sale", styleName: "sale" },
+      { name: "Shalimar", styleName: "shalimar", hasNumbers: true },
+      { name: "Shalimar big", styleName: "shalimar_big", hasNumbers: true },
+      { name: "Shalimar small", styleName: "shalimar_small", hasNumbers: true },
+      { name: "Soccer", styleName: "soccer" },
+      { name: "Soccer red", styleName: "soccer_red" },
+      { name: "Soccer yellow", styleName: "soccer_yellow" },
+      { name: "Space Cafe", styleName: "space" },
+      { name: "Spaces", styleName: "spaces" },
+      { name: "Special offers", styleName: "special_offers" },
+      { name: "StrayPixels", styleName: "straypixels" },
+      { name: "Steampunk", styleName: "steampunk" },
+      { name: "SCI-FI", styleName: "scifi" },
+      { name: "Summer", styleName: "summer" },
+      { name: "Teleport", styleName: "teleport", hasNumbers: true },
+      { name: "Theater lights", styleName: "theater_lights" },
+      { name: "Tribe", styleName: "tribe" },
+      { name: "Trophies", styleName: "trophies" },
+      { name: "USVA", styleName: "usva" },
+      { name: "Unknown blue", styleName: "unknown_blue" },
+      { name: "Unknown blue 2", styleName: "unknown_blue_2" },
+      { name: "Unknown metal", styleName: "unknown_metal" },
+      { name: "Unknown white", styleName: "unknown_white" },
+      { name: "Unknown pillow", styleName: "unknown_pillow_1" },
+      { name: "Unknown pillow", styleName: "unknown_pillow_2" },
+      { name: "Valentine", styleName: "valentine" },
+      { name: "Western", styleName: "western" },
+      { name: "Woods", styleName: "wood" },
+      { name: "Yellow text", styleName: "yellow_text" },
+    ],
+  },
+  {
+    groupName: "Custom creations",
+    fonts: [
+      { name: "Jurrasic", styleName: "jurrasic" },
+    ],
+  },
+  {
+    groupName: "Halloween fonts",
+    fonts: [
+      { name: "Halloween", styleName: "halloween" },
+      { name: "Halloween 2", styleName: "halloween_2" },
+      { name: "Halloween 3", styleName: "halloween_3" },
+    ],
+  },
+  {
+    groupName: "Group fonts",
+    fonts: [
+      { name: "Bling", styleName: "bling" },
+      { name: "Plastic", styleName: "plastic" },
+      { name: "Plastic playful", styleName: "plastic_playful" },
+      { name: "Dinner blue", styleName: "dinner_blue", hasNumbers: true },
+      { name: "Dinner green", styleName: "dinner_green", hasNumbers: true },
+      { name: "Dinner red", styleName: "dinner_red", hasNumbers: true },
+    ],
+  },
+  {
+    groupName: "Games",
+    fonts: [
+      { name: "Battleball", styleName: "battleball" },
+      { name: "Battle Banzai", styleName: "battlebanzai" },
+      { name: "Lido", styleName: "lido", hasNumbers: true },
+      { name: "Soccer", styleName: "soccer" },
+      { name: "Soccer big", styleName: "soccer_big" },
+    ],
+  },
+  {
+    groupName: "Habbo club",
+    fonts: [
+      { name: "Habbo Club", styleName: "hc" },
+      { name: "HC Big", styleName: "hc_big" },
+      { name: "HC Small", styleName: "hc_small" },
+      { name: "HC Compact", styleName: "hc_compact", hasNumbers: true },
+      { name: "HC gold", styleName: "hc_gold" },
+      { name: "Habbo Club 2", styleName: "habboclub", hasNumbers: true },
+      { name: "Habbo Club 2", styleName: "habboclub_banner", hasNumbers: true },
+      { name: "VIP", styleName: "habbovip", hasNumbers: true },
+      { name: "VIP", styleName: "habbovip_banner", hasNumbers: true },
+    ],
+  },
+  {
+    groupName: "Uncategorised",
+    fonts: [
+      { name: "Agenda", styleName: "agenda", hasNumbers: true },
+      { name: "Mini white", styleName: "mini_white" },
+      { name: "Volter goldfish", styleName: "volter" },
+      { name: "Volter shadow", styleName: "volter_shadow" },
+      { name: "Lucky goldfish", styleName: "volter_modern" },
+      { name: "Goldfish small", styleName: "volter_modern_small" },
+      { name: "Black", styleName: "black" },
+    ],
+  },
+  {
+    groupName: "Windows",
+    fonts: [
+      { name: "Windows", styleName: "windows" },
+      { name: "Lowercase", styleName: "windows_lowercase" },
+      { name: "Jungle", styleName: "windows_jungle" },
+      { name: "Blue", styleName: "windows_blue", hasNumbers: true },
+      { name: "Green", styleName: "windows_green", hasNumbers: true },
+      { name: "Pink", styleName: "windows_pink", hasNumbers: true },
+      { name: "Red", styleName: "windows_red", hasNumbers: true },
+      { name: "Dark red", styleName: "windows_red_dark", hasNumbers: true },
+      { name: "Yellow", styleName: "windows_yellow" },
+      { name: "Purple", styleName: "windows_purple" },
+    ],
+  },
+  {
+    groupName: "Beta",
+    fonts: [
+      { name: "Beta big", styleName: "beta_big" },
+      { name: "Beta small", styleName: "beta_small" },
+      { name: "Beta old", styleName: "beta_small_old" },
+      { name: "Beta", styleName: "beta", hasNumbers: true },
+    ],
+  },
+  {
+    groupName: "Special fonts",
+    fonts: [
+      { name: "Duckets", styleName: "duckets" },
+      { name: "Habbo club", styleName: "habboclub_complete" },
+      { name: "FX", styleName: "fx" },
+      { name: "Gift", styleName: "gift" },
+      { name: "HC silver", styleName: "habboclub_silver" },
+      { name: "Love full", styleName: "love_full" },
+      { name: "Marketplace", styleName: "marketplace_full" },
+      { name: "RELAX", styleName: "relax" },
+      { name: "Ribbon", styleName: "habbo_ribbon" },
+      { name: "Scifi", styleName: "scifi" },
+      { name: "Steampunk", styleName: "steampunk" },
+      { name: "USVA", styleName: "usva" },
+      { name: "Valentine", styleName: "valentine" },
+    ],
+  },
+  {
+    groupName: "Unknown fonts",
+    fonts: [
+      { name: "Unknown blue", styleName: "unknown_blue" },
+      { name: "Unknown blue 2", styleName: "unknown_blue_2" },
+      { name: "Unknown metal", styleName: "unknown_metal" },
+      { name: "Unknown white", styleName: "unknown_white" },
+      { name: "Unknown pillow", styleName: "unknown_pillow_1" },
+      { name: "Unknown pillow", styleName: "unknown_pillow_2" },
+    ],
+  },
+];
+
+export function buildFontUrl(styleName: string, text: string): string {
+  const t = text.toLowerCase().replace(/\s/g, "+");
+  return `https://habbofont.net/font/${styleName}/${t}.gif`;
+}

src/components/public/logo-generator.tsx

@@ -1,165 +1,68 @@
 "use client";
 
-import { useCallback, useMemo, useRef, useState, useTransition } from "react";
+import { useCallback, useMemo, useState, useTransition } from "react";
 import { ContentCard } from "@/components/public/ui";
 import { saveLogo } from "@/actions/save-logo";
-
+import { HABBO_FONT_GROUPS, buildFontUrl } from "@/components/public/habbo-fonts";
-/**
- * Client-side logo generator. Lets the visitor type a hotel name, pick a fun
- * font stack, text + (optional) background colour, and a size, with a live
- * preview. "Download PNG" paints the styled text onto an offscreen <canvas>
- * and triggers a download via canvas.toBlob -> object URL -> <a download>.
- *
- * Pure browser code — no server modules (prisma/siteSettings) are imported.
- */
-
-type FontOption = { label: string; stack: string };
-
-// ~8 fun, broadly-available stacks (web-safe + a Google-ish first pick).
-const FONTS: FontOption[] = [
-  { label: "Habbo pixel", stack: "var(--font-pixel), 'Courier New', monospace" },
-  { label: "Poppins (rounded)", stack: "'Poppins', 'Trebuchet MS', sans-serif" },
-  { label: "Comic Sans (playful)", stack: "'Comic Sans MS', 'Comic Sans', cursive" },
-  { label: "Georgia (classic serif)", stack: "Georgia, 'Times New Roman', serif" },
-  { label: "Impact (bold poster)", stack: "Impact, 'Haettenschweiler', sans-serif" },
-  { label: "Trebuchet (clean)", stack: "'Trebuchet MS', Tahoma, sans-serif" },
-  { label: "Monospace (retro)", stack: "'Courier New', monospace" },
-];
-
-const MIN_SIZE = 16;
-const MAX_SIZE = 160;
 
 export default function LogoGenerator() {
   const [text, setText] = useState("Atom");
-  const [fontStack, setFontStack] = useState(FONTS[0]!.stack);
+  const [styleName, setStyleName] = useState("habbo");
-  const [textColor, setTextColor] = useState("#f59e0b");
+  const [search, setSearch] = useState("");
-  const [bgEnabled, setBgEnabled] = useState(false);
-  const [bgColor, setBgColor] = useState("#0f172a");
-  const [size, setSize] = useState(72);
-  const [bold, setBold] = useState(true);
-
-  const linkRef = useRef<HTMLAnchorElement | null>(null);
   const [saveStatus, setSaveStatus] = useState<"idle" | "saving" | "done" | "error">("idle");
   const [, startTransition] = useTransition();
 
-  const safeText = text.trim().length > 0 ? text : "Your hotel";
+  const safeText = text.trim() || "Your hotel";
-  const fontWeight = bold ? "bold" : "normal";
+  const gifUrl = useMemo(() => buildFontUrl(styleName, safeText), [styleName, safeText]);
 
-  // Inline style for the live preview text, mirroring what the canvas will draw.
+  const currentFont = useMemo(
-  const previewTextStyle = useMemo<React.CSSProperties>(
+    () => HABBO_FONT_GROUPS.flatMap((g) => g.fonts).find((f) => f.styleName === styleName),
-    () => ({
+    [styleName],
-      fontFamily: fontStack,
+  );
-      fontSize: `${size}px`,
+
-      fontWeight,
+  const filteredGroups = useMemo(
-      color: textColor,
+    () =>
-      lineHeight: 1.1,
+      search
-      margin: 0,
+        ? HABBO_FONT_GROUPS.map((g) => ({
-      padding: "0.1em 0.15em",
+            ...g,
-      whiteSpace: "nowrap",
+            fonts: g.fonts.filter(
-      letterSpacing: "0.5px",
+              (f) =>
-    }),
+                f.name.toLowerCase().includes(search.toLowerCase()) ||
-    [fontStack, size, fontWeight, textColor],
+                f.styleName.toLowerCase().includes(search.toLowerCase()),
+            ),
+          })).filter((g) => g.fonts.length > 0)
+        : HABBO_FONT_GROUPS,
+    [search],
   );
 
   const handleDownload = useCallback(() => {
-    const canvas = document.createElement("canvas");
+    window.open(gifUrl, "_blank");
-    const ctx = canvas.getContext("2d");
+  }, [gifUrl]);
-    if (!ctx) return;
-
-    const fontSpec = `${fontWeight} ${size}px ${fontStack}`;
-    // Measure with the chosen font so the canvas fits the text snugly.
-    ctx.font = fontSpec;
-    const metrics = ctx.measureText(safeText);
-    const padX = Math.round(size * 0.4);
-    const padY = Math.round(size * 0.45);
-    const textWidth = Math.max(1, Math.ceil(metrics.width));
-    const width = textWidth + padX * 2;
-    const height = Math.ceil(size * 1.35) + padY * 2;
-
-    // Render crisply on high-DPI screens, then keep CSS-pixel coordinates below.
-    const dpr = Math.min(typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1, 3);
-    canvas.width = Math.round(width * dpr);
-    canvas.height = Math.round(height * dpr);
-    ctx.scale(dpr, dpr);
-
-    if (bgEnabled) {
-      ctx.fillStyle = bgColor;
-      ctx.fillRect(0, 0, width, height);
-    }
-    // else: leave transparent (the default for a fresh canvas).
-
-    ctx.font = fontSpec;
-    ctx.fillStyle = textColor;
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    ctx.fillText(safeText, width / 2, height / 2);
-
-    const fileBase =
-      safeText
-        .toLowerCase()
-        .replace(/[^a-z0-9]+/g, "-")
-        .replace(/^-+|-+$/g, "") || "logo";
-
-    canvas.toBlob((blob) => {
-      if (!blob) return;
-      const url = URL.createObjectURL(blob);
-      const a = linkRef.current ?? document.createElement("a");
-      a.href = url;
-      a.download = `${fileBase}-logo.png`;
-      a.click();
-      // Release the object URL once the download has been kicked off.
-      setTimeout(() => URL.revokeObjectURL(url), 1000);
-    }, "image/png");
-  }, [bgColor, bgEnabled, fontStack, fontWeight, safeText, size, textColor]);
-
-  const handleSave = useCallback(() => {
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-
-    const fontSpec = `${fontWeight} ${size}px ${fontStack}`;
-    ctx.font = fontSpec;
-    const metrics = ctx.measureText(safeText);
-    const padX = Math.round(size * 0.4);
-    const padY = Math.round(size * 0.45);
-    const textWidth = Math.max(1, Math.ceil(metrics.width));
-    const width = textWidth + padX * 2;
-    const height = Math.ceil(size * 1.35) + padY * 2;
-
-    const dpr = Math.min(typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1, 3);
-    canvas.width = Math.round(width * dpr);
-    canvas.height = Math.round(height * dpr);
-    ctx.scale(dpr, dpr);
-
-    if (bgEnabled) {
-      ctx.fillStyle = bgColor;
-      ctx.fillRect(0, 0, width, height);
-    }
-
-    ctx.font = fontSpec;
-    ctx.fillStyle = textColor;
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    ctx.fillText(safeText, width / 2, height / 2);
 
+  const handleSave = useCallback(async () => {
     setSaveStatus("saving");
-    canvas.toBlob(async (blob) => {
+    try {
-      if (!blob) { setSaveStatus("error"); return; }
+      const res = await fetch(gifUrl);
-      const file = new File([blob], "logo.png", { type: "image/png" });
+      const blob = await res.blob();
+      const ext = blob.type === "image/gif" ? "gif" : "png";
+      const file = new File([blob], `logo.${ext}`, { type: blob.type });
       const fd = new FormData();
       fd.append("file", file);
+
       startTransition(async () => {
         const result = await saveLogo(fd);
         setSaveStatus(result.success ? "done" : "error");
         if (result.success) setTimeout(() => setSaveStatus("idle"), 3000);
       });
-    }, "image/png");
+    } catch {
-  }, [bgColor, bgEnabled, fontStack, fontWeight, safeText, size, textColor, startTransition]);
+      setSaveStatus("error");
+      setTimeout(() => setSaveStatus("idle"), 3000);
+    }
+  }, [gifUrl, startTransition]);
 
   return (
     <div className="card-grid md-2" style={{ alignItems: "start" }}>
-      {/* ── Controls ──────────────────────────────── */}
+      <ContentCard icon="⚙️" title="Design" subtitle="Pick a Habbo font and type your text.">
-      <ContentCard icon="⚙️" title="Design" subtitle="Tweak the look of your logo.">
         <div style={{ display: "grid", gap: "1rem" }}>
           <label style={{ display: "grid", gap: "0.3rem" }}>
             <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>Hotel name</span>
@@ -170,88 +73,48 @@ export default function LogoGenerator() {
               placeholder="Your hotel"
               maxLength={40}
             />
+            <span className="muted" style={{ fontSize: "0.78rem" }}>
+              Text will be lowercased with spaces as + in the GIF URL.
+            </span>
           </label>
 
           <label style={{ display: "grid", gap: "0.3rem" }}>
-            <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>Font</span>
+            <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>Search font</span>
-            <select value={fontStack} onChange={(e) => setFontStack(e.target.value)}>
+            <input
-              {FONTS.map((f) => (
+              type="text"
-                <option key={f.label} value={f.stack}>
+              value={search}
-                  {f.label}
+              onChange={(e) => setSearch(e.target.value)}
-                </option>
+              placeholder="Type to filter fonts…"
+            />
+          </label>
+
+          <label style={{ display: "grid", gap: "0.3rem" }}>
+            <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>
+              Font —{" "}
+              <span className="muted">
+                {currentFont?.name ?? styleName} ({styleName})
+              </span>
+            </span>
+            <select
+              value={styleName}
+              onChange={(e) => setStyleName(e.target.value)}
+              style={{ maxHeight: 320 }}
+              size={Math.min(filteredGroups.flatMap((g) => g.fonts).length + filteredGroups.length, 12)}
+            >
+              {filteredGroups.map((group) => (
+                <optgroup key={group.groupName} label={group.groupName}>
+                  {group.fonts.map((f) => (
+                    <option key={f.styleName} value={f.styleName}>
+                      {f.name}
+                    </option>
+                  ))}
+                </optgroup>
               ))}
             </select>
           </label>
 
-          <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
-            <label style={{ display: "grid", gap: "0.3rem" }}>
-              <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>Text colour</span>
-              <span style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem" }}>
-                <input
-                  type="color"
-                  value={textColor}
-                  onChange={(e) => setTextColor(e.target.value)}
-                  style={{ width: 44, height: 38, padding: 2 }}
-                  aria-label="Text colour"
-                />
-                <code className="muted" style={{ fontSize: "0.78rem" }}>
-                  {textColor}
-                </code>
-              </span>
-            </label>
-
-            <label style={{ display: "grid", gap: "0.3rem" }}>
-              <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>Background</span>
-              <span style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem" }}>
-                <input
-                  type="checkbox"
-                  checked={bgEnabled}
-                  onChange={(e) => setBgEnabled(e.target.checked)}
-                  style={{ width: "auto" }}
-                  aria-label="Enable background colour"
-                />
-                <input
-                  type="color"
-                  value={bgColor}
-                  onChange={(e) => setBgColor(e.target.value)}
-                  disabled={!bgEnabled}
-                  style={{ width: 44, height: 38, padding: 2, opacity: bgEnabled ? 1 : 0.4 }}
-                  aria-label="Background colour"
-                />
-                <code className="muted" style={{ fontSize: "0.78rem" }}>
-                  {bgEnabled ? bgColor : "transparent"}
-                </code>
-              </span>
-            </label>
-          </div>
-
-          <label style={{ display: "grid", gap: "0.3rem" }}>
-            <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>
-              Size — <span className="muted">{size}px</span>
-            </span>
-            <input
-              type="range"
-              min={MIN_SIZE}
-              max={MAX_SIZE}
-              step={1}
-              value={size}
-              onChange={(e) => setSize(Number(e.target.value))}
-              style={{ width: "100%", padding: 0 }}
-            />
-          </label>
-
-          <label style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem" }}>
-            <input
-              type="checkbox"
-              checked={bold}
-              onChange={(e) => setBold(e.target.checked)}
-              style={{ width: "auto" }}
-            />
-            <span style={{ fontWeight: 700, fontSize: "0.85rem" }}>Bold</span>
-          </label>
-
           <button type="button" className="btn btn-primary" onClick={handleDownload}>
-            ⬇️ Download PNG
+            ⬇️ Download GIF
           </button>
           <button
             type="button"
@@ -259,17 +122,18 @@ export default function LogoGenerator() {
             onClick={handleSave}
             disabled={saveStatus === "saving"}
           >
-            {saveStatus === "saving" ? "⏳ Saving..." : saveStatus === "done" ? "✅ Saved!" : saveStatus === "error" ? "❌ Error" : "💾 Save as site logo"}
+            {saveStatus === "saving"
+              ? "⏳ Saving..."
+              : saveStatus === "done"
+                ? "✅ Saved!"
+                : saveStatus === "error"
+                  ? "❌ Error"
+                  : "💾 Save as site logo"}
           </button>
-          {/* Reused, hidden anchor used to trigger the file download. */}
-          <a ref={linkRef} style={{ display: "none" }} aria-hidden href="/">
-            download
-          </a>
         </div>
       </ContentCard>
 
-      {/* ── Live preview ──────────────────────────── */}
+      <ContentCard icon="👁️" title="Preview" subtitle="Live GIF from habbofont.net.">
-      <ContentCard icon="👁️" title="Preview" subtitle="Live, exactly as it will export.">
         <div
           style={{
             display: "grid",
@@ -279,18 +143,22 @@ export default function LogoGenerator() {
             borderRadius: "12px",
             border: "1px dashed color-mix(in srgb, var(--color-text-muted) 30%, transparent)",
             overflow: "auto",
-            // Checkerboard so a transparent (no-background) logo is obvious.
+            background: "repeating-conic-gradient(color-mix(in srgb, var(--color-text-muted) 14%, transparent) 0% 25%, transparent 0% 50%) 50% / 22px 22px",
-            background: bgEnabled
-              ? bgColor
-              : "repeating-conic-gradient(color-mix(in srgb, var(--color-text-muted) 14%, transparent) 0% 25%, transparent 0% 50%) 50% / 22px 22px",
           }}
         >
-          <p style={previewTextStyle}>{safeText}</p>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={gifUrl}
+            alt={`Logo preview: ${safeText} in ${currentFont?.name ?? styleName} font`}
+            style={{ maxWidth: "100%", height: "auto" }}
+          />
         </div>
-        <p className="muted" style={{ marginBottom: 0, marginTop: "0.85rem" }}>
+        <p className="muted" style={{ marginBottom: 0, marginTop: "0.85rem", wordBreak: "break-all" }}>
-          Everything runs in your browser — nothing is uploaded. The PNG keeps a
+          Generated via{" "}
-          {" "}
+          <a href="https://habbofont.net" target="_blank" rel="noopener noreferrer">
-          transparent background unless you enable one.
+            habbofont.net
+          </a>
+          . The GIF is loaded from their server.
         </p>
       </ContentCard>
     </div>