Merge pull request #618 from sheleoni/shelly/bugchan_logo

Author: yosuke-furukawa

2025/public/logo/buggie_bugchan_logo.png

@@ -0,0 +1,130 @@
+"use client";
+
+import Image from "next/image";
+import { useState, useEffect } from "react";
+import staticLogoSrc from "@/../public/logo/buggie_bugchan_logo.png";
+import spriteSrc from "@/../public/logo/jsconf_bugchan_v5_minified.png";
+
+type Props = {
+    width: number;
+    height: number;
+    alt: string;
+    fetchPriority?: "high" | "low" | "auto";
+};
+
+const FRAME_COUNT = 29;
+const SPRITE_WIDTH = 400;
+const SPRITE_HEIGHT = 11600;
+const ANIMATION_DURATION = 1500;
+
+export function AnimatedLogo({
+    width,
+    height,
+    alt,
+    fetchPriority,
+}: Props) {
+    const [isAnimating, setIsAnimating] = useState(false);
+    const [isSpriteLoaded, setIsSpriteLoaded] = useState(false);
+    const [clickCount, setClickCount] = useState(0);
+
+    // detect when sprite sheet has fully loaded
+    useEffect(() => {
+        const img = new window.Image();
+        img.onload = () => {
+            setIsSpriteLoaded(true);
+        };
+        img.src = spriteSrc.src;
+    }, []);
+
+    const handleClick = () => {
+        if (isAnimating || !isSpriteLoaded) return;
+
+        setClickCount(clickCount + 1);
+        setIsAnimating(true);
+        setTimeout(() => {
+            setIsAnimating(false);
+        }, ANIMATION_DURATION);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        // when focused, allow to animate the logo by pressing Enter or Space key
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleClick();
+        }
+    };
+
+    const isReverse = clickCount % 3 === 0;
+
+
+    return (
+        <div
+            className="logo-container"
+            onClick={handleClick}
+            onKeyDown={handleKeyDown}
+            role="button"
+            tabIndex={0}
+            aria-label={`${alt}. Click to animate.`}
+            aria-busy={!isSpriteLoaded}
+            style={{
+                width: `${width}px`,
+                height: `${height}px`,
+                flexShrink: 0,
+                cursor: isSpriteLoaded ? "pointer" : "default",
+            }}
+        >
+            {/* show static logo only if sprite hasn't loaded yet */}
+            {!isSpriteLoaded && (
+                <Image
+                    src={staticLogoSrc}
+                    fetchPriority={fetchPriority}
+                    alt={alt}
+                    width={width}
+                    height={height}
+                    style={{
+                        width: `${width}px`,
+                        height: `${height}px`,
+                        objectFit: "contain",
+                    }}
+                />
+            )}
+
+            {/* after sprite is loaded, show sprite at frame 0 (idle) / animating */}
+            {isSpriteLoaded && (
+                <div
+                    role="img"
+                    aria-label={alt}
+                    style={{
+                        width: `${width}px`,
+                        height: `${height}px`,
+                        backgroundImage: `url(${spriteSrc.src})`,
+                        backgroundSize: `${width}px ${(SPRITE_HEIGHT / SPRITE_WIDTH) * width}px`,
+                        animation: isAnimating
+                            ? `sprite-animate ${ANIMATION_DURATION}ms steps(${FRAME_COUNT - 1}) 1 ${isReverse ? "reverse" : "normal"}`
+                            : "none",
+                    }}
+                />
+            )}
+
+            <style jsx>{`
+        .logo-container {
+          transition: transform 0.2s ease-out;
+        }
+        
+        .logo-container:hover {
+          transform: scale(1.05);
+        }
+        
+        @keyframes sprite-animate {
+          from {
+            background-position: 0 0;
+          }
+          to {
+            background-position: 0 -${((FRAME_COUNT - 1) * height)}px;
+          }
+        }
+      `}</style>
+        </div>
+    );
+}
+

2025/public/logo/jsconf_bugchan_v5_minified.png

@@ -1,20 +1,16 @@
-import Image from "next/image";
 import { useTranslations } from "next-intl";
-import logoSrc from "@/../public/logo.svg";
+import { AnimatedLogo } from "./AnimatedLogo";
 
 export function Hero() {
   const t = useTranslations("about");
 
   return (
     <div className="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-16">
-      <Image
-        src={logoSrc}
-        fetchPriority="high"
-        alt={t("title")}
+      <AnimatedLogo
         width={240}
         height={240}
-        // この指定がないとレイアウトがガタつく
-        style={{ width: "240px", height: "240px" }}
+        fetchPriority="high"
+        alt={t("title")}
       />
       <div>
         <h1 className="text-5xl md:text-6xl font-bold">{t("title")}</h1>

2025/src/components/AnimatedLogo.tsx

@@ -7,7 +7,7 @@ type Props = {
   size: number;
 };
 
-const LOGO_URL = join(process.cwd(), "public", "logo.svg");
+const LOGO_URL = join(process.cwd(), "public", "logo", "buggie_bugchan_logo.png");
 
 export function Logo({ size }: Props) {
   return <img alt="" src={makeDataUrl(LOGO_URL)} width={size} height={size} />;