feat: add text transition

Author: hyochan

app/[lang]/(home)/Hero/StatsSymbol.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import type {CSSProperties, ReactElement} from 'react';
-import {cloneElement, useEffect, useRef, useState} from 'react';
+import {cloneElement, useState} from 'react';
 import {track} from '@amplitude/analytics-browser';
 import clsx from 'clsx';
+import TextTransition, {presets} from 'react-text-transition';
 
 import type {StatsInfo} from '../../../../src/fetches/github';
 
@@ -46,11 +47,9 @@ type StatName = (typeof statTypes)[number]['name'];
 const PluginStatsInfo = ({
   statsInfo,
   selectedStatName,
-  isTransitioning,
 }: {
   statsInfo: StatsInfo;
   selectedStatName: StatName;
-  isTransitioning: boolean;
 }): React.ReactElement => {
   const {name, description} = statsInfo[selectedStatName];
 
@@ -61,22 +60,20 @@ const PluginStatsInfo = ({
         'flex-1 flex flex-col relative',
       )}
     >
-      <div
-        className={clsx(
-          'body1 font-bold mb-3 text-left transition-opacity duration-300',
-          isTransitioning ? 'opacity-0' : 'opacity-100'
-        )}
+      <TextTransition
+        springConfig={presets.gentle}
+        direction="down"
+        className="body1 font-bold mb-3 text-left"
       >
         {name}
-      </div>
-      <div
-        className={clsx(
-          'body3 leading-[160%] text-left transition-opacity duration-500',
-          isTransitioning ? 'opacity-0' : 'opacity-100'
-        )}
+      </TextTransition>
+      <TextTransition
+        springConfig={presets.wobbly}
+        direction="down"
+        className="body3 leading-[160%] text-left"
       >
         {description}
-      </div>
+      </TextTransition>
     </div>
   );
 };
@@ -91,28 +88,12 @@ const StatsSymbols = ({
   statsInfo: StatsInfo;
 }): ReactElement => {
   const [selectedStatName, setSelectedStatName] = useState<StatName>('tree');
-  const [isTransitioning, setIsTransitioning] = useState(false);
-  const transitionTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const pressStat = (type: StatName): void => {
-    if (transitionTimer.current) {
-      clearTimeout(transitionTimer.current);
-    }
-
-    setIsTransitioning(true);
-    transitionTimer.current = setTimeout(() => setIsTransitioning(false), 50);
     setSelectedStatName(type);
     track('Press Stat Info', {type});
   };
 
-  useEffect(() => {
-    return () => {
-      if (transitionTimer.current) {
-        clearTimeout(transitionTimer.current);
-      }
-    };
-  }, []);
-
   return (
     <div className={`flex flex-col  ${className}`} style={style}>
       <div className={clsx('max-w-[220px]', 'flex flex-row')}>
@@ -139,7 +120,6 @@ const StatsSymbols = ({
       <PluginStatsInfo
         selectedStatName={selectedStatName}
         statsInfo={statsInfo}
-        isTransitioning={isTransitioning}
       />
     </div>
   );

bun.lock

@@ -26,6 +26,7 @@
         "react-hamburger-menu": "^1.2.1",
         "react-hook-form": "^7.66.1",
         "react-hot-toast": "^2.6.0",
+        "react-text-transition": "^3.1.0",
         "server-only": "^0.0.1",
         "tiny-invariant": "^1.3.3",
         "typescript": "5.9.3",
@@ -542,6 +543,18 @@
 
     "@prisma/get-platform": ["@prisma/[email protected]", "", { "dependencies": { "@prisma/debug": "6.19.0" } }, "sha512-ym85WDO2yDhC3fIXHWYpG3kVMBA49cL1XD2GCsCF8xbwoy2OkDQY44gEbAt2X46IQ4Apq9H6g0Ex1iFfPqEkHA=="],
 
+    "@react-spring/animated": ["@react-spring/[email protected]", "", { "dependencies": { "@react-spring/shared": "~9.7.5", "@react-spring/types": "~9.7.5" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, "sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg=="],
+
+    "@react-spring/core": ["@react-spring/[email protected]", "", { "dependencies": { "@react-spring/animated": "~9.7.5", "@react-spring/shared": "~9.7.5", "@react-spring/types": "~9.7.5" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, "sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w=="],
+
+    "@react-spring/rafz": ["@react-spring/[email protected]", "", {}, "sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw=="],
+
+    "@react-spring/shared": ["@react-spring/[email protected]", "", { "dependencies": { "@react-spring/rafz": "~9.7.5", "@react-spring/types": "~9.7.5" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, "sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw=="],
+
+    "@react-spring/types": ["@react-spring/[email protected]", "", {}, "sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g=="],
+
+    "@react-spring/web": ["@react-spring/[email protected]", "", { "dependencies": { "@react-spring/animated": "~9.7.5", "@react-spring/core": "~9.7.5", "@react-spring/shared": "~9.7.5", "@react-spring/types": "~9.7.5" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, "sha512-lmvqGwpe+CSttsWNZVr+Dg62adtKhauGwLyGE/RRyZ8AAMLgb9x3NDMA5RMElXo+IMyTkPp7nxTB8ZQlmhb6JQ=="],
+
     "@rolldown/pluginutils": ["@rolldown/[email protected]", "", {}, "sha512-8QagwMH3kNCuzD8EWL8R2YPW5e4OrHNSAHRFDdmFqEwEaD/KcNKjVoumo+gP2vW5eKB2UPbM6vTYiGZX0ixLnw=="],
 
     "@rollup/plugin-babel": ["@rollup/[email protected]", "", { "dependencies": { "@babel/helper-module-imports": "^7.10.4", "@rollup/pluginutils": "^3.1.0" }, "peerDependencies": { "@babel/core": "^7.0.0", "@types/babel__core": "^7.1.9", "rollup": "^1.20.0||^2.0.0" }, "optionalPeers": ["@types/babel__core"] }, "sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q=="],
@@ -1746,6 +1759,8 @@
 
     "react-refresh": ["[email protected]", "", {}, "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw=="],
 
+    "react-text-transition": ["[email protected]", "", { "dependencies": { "@react-spring/web": "^9.7.2" }, "peerDependencies": { "react": ">=18.0.0" } }, "sha512-NtXEVAXvSh78+8JAnrVjpbftzD4kPowacv4GB2Nyq9C/8ko6fSm6M/XvKWQLCaZi68i9F28b++Sp8uVThlzLyg=="],
+
     "read-cache": ["[email protected]", "", { "dependencies": { "pify": "^2.3.0" } }, "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA=="],
 
     "read-cmd-shim": ["[email protected]", "", {}, "sha512-1zM5HuOfagXCBWMN83fuFI/x+T/UhZ7k+KIzhrHXcQoeX5+7gmaDYjELQHmmzIodumBHeByBJT4QYS7ufAgs7A=="],

package.json

@@ -43,6 +43,7 @@
     "react-hamburger-menu": "^1.2.1",
     "react-hook-form": "^7.66.1",
     "react-hot-toast": "^2.6.0",
+    "react-text-transition": "^3.1.0",
     "server-only": "^0.0.1",
     "tiny-invariant": "^1.3.3",
     "typescript": "5.9.3",

src/hooks/useSearchHistory.ts

@@ -1,38 +1,30 @@
 'use client';
 
-import {useState, useCallback, useEffect} from 'react';
+import {useState, useCallback} from 'react';
 
 const STORAGE_KEY = 'github-stats-search-history';
 const MAX_HISTORY_ITEMS = 10;
 
-const readFromStorage = (): string[] => {
+const getInitialHistory = (): string[] => {
   if (typeof window === 'undefined') return [];
 
-  const stored = localStorage.getItem(STORAGE_KEY);
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
 
-  if (stored) {
-    try {
+    if (stored) {
       const parsed = JSON.parse(stored);
 
       return Array.isArray(parsed) ? parsed : [];
-    } catch {
-      return [];
     }
+  } catch {
+    // Ignore parse errors
   }
 
   return [];
 };
 
 export function useSearchHistory() {
-  const [history, setHistory] = useState<string[]>([]);
-  const [isInitialized, setIsInitialized] = useState(false);
-
-  useEffect(() => {
-    if (!isInitialized) {
-      setHistory(readFromStorage());
-      setIsInitialized(true);
-    }
-  }, [isInitialized]);
+  const [history, setHistory] = useState<string[]>(getInitialHistory);
 
   const addToHistory = useCallback((item: string) => {
     if (!item.trim()) return;

styles/output.css

@@ -2376,10 +2376,6 @@ input[type='search']::-webkit-search-decoration,
   transition-duration: 300ms;
 }
 
-.duration-500 {
-  transition-duration: 500ms;
-}
-
 @font-face {
   font-family: 'doobooui';