This button began as a name tag and somehow evolved into a multilingual glitch-performance with CRT scanlines, queued animations, and just enough drama to be worth documenting.
At rest, it shows the English version of the name with a black shadow. On hover, it rotates through multiple scripts and colors, but it does not do a plain text swap. The button uses layered text elements and timed transitions so every change feels like a tiny glitch-performance instead of a dropdown with attitude.
The effect is built around three overlapping layers: the currently visible name, the incoming name, and a scramble layer full of random glyphs. One layer glitches out, one glitches in, and the scramble layer bridges the two just long enough to make the transition feel intentional.
Refs are used to track the current language, whether an animation is busy, queued transitions, hover timers, shadow timing, and touch reset timing. That keeps the animation responsive without forcing React to re-render on every visual frame.
Every language in the `NAMES` list has its own font family, weight, size, direction, color, and shadow value. That made it possible to balance Malayalam, Arabic, Indic scripts, and Japanese inside one fixed button shape without the text feeling cramped or awkward.
The button also carries a repeating scanline layer and a rolling highlight bar. Those sit above the button background and below the text, which gives it that slightly old-monitor feel without making it unreadable. It is theatrical, but only just enough.
Hover can loop on desktop, but phones do not have the same interaction model. So a tap now triggers the effect briefly and then automatically returns the button to its original English resting state. That way it still feels playful on mobile without getting stuck halfway through a mood swing.
This is the first chapter in what should become a whole little archive of build stories. As more pieces of the site settle into place, they can each get their own origin note here.