I've been seeing this neat hover animation around lately, and wanted to break it down.
How it works is that you have two versions of your text. One is the default visible version, the other is translated out of view.
On hover, the hidden text transitions up into view, while the default text transitions out.
An offset to each characters is applied with Javascript. By iterating through the characters, you can assign a transition delay based on the character index. This effectively creates a wave effect.
I can see this logic being extracted to a custom component so that the word duplications and transitions are handled for you automatically, and you would only need to pass in the text value.