blob: 3e60ee2d9fa34232b867c25b21491afa13e6f291 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
import { useState, useCallback, useRef } from "react";
const GLYPHS = "▒▓░█#@*+:-/[]{}<>_";
interface JapaneseHoverTextProps {
japanese: string;
english: string;
className?: string;
}
/**
* Displays Japanese text, transitions to English on hover with scramble effect
*/
export function JapaneseHoverText({
japanese,
english,
className = "",
}: JapaneseHoverTextProps) {
const [isHovered, setIsHovered] = useState(false);
const [displayText, setDisplayText] = useState(english);
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
const iterationRef = useRef(0);
const scrambleToEnglish = useCallback(() => {
setIsHovered(true);
// Clear any existing animation
if (timerRef.current) {
clearInterval(timerRef.current);
}
iterationRef.current = 0;
timerRef.current = setInterval(() => {
const text = english;
const iteration = iterationRef.current;
const display = text
.split("")
.map((char, index) => {
if (index < iteration) return char;
return GLYPHS.charAt(Math.floor(Math.random() * GLYPHS.length));
})
.join("");
setDisplayText(display);
iterationRef.current += 1;
if (iteration > text.length + 2) {
if (timerRef.current) {
clearInterval(timerRef.current);
timerRef.current = null;
}
setDisplayText(english);
}
}, 26);
}, [english]);
const resetToJapanese = useCallback(() => {
if (timerRef.current) {
clearInterval(timerRef.current);
timerRef.current = null;
}
setIsHovered(false);
setDisplayText(english);
}, [english]);
return (
<span
className={`cursor-default ${className}`}
onMouseEnter={scrambleToEnglish}
onMouseLeave={resetToJapanese}
>
{isHovered ? displayText : japanese}
</span>
);
}
|
