Give your nav bar a hover state that actually feels designed. Ripple Type is a code component built around a staggered, alternating letter-slide animation — instead of the whole label sliding as one block, each character flips independently: even letters glide right, odd letters glide left, with an incremental delay per letter so the motion ripples across the word instead of firing all at once.
How it works Every letter is masked in its own reveal window holding two stacked copies of the character. On hover, the visible letter slides out (with a subtle skew for a bit of snap) while a duplicate slides in from the opposite side — so the word never just "moves," it exchanges itself letter by letter.
Fully customizable, no code required
Button text and link (with optional new-tab)
Background color + hover background color
Text color + hover text color
Corner radius, font size, font weight, padding, and height
Drop it straight into a nav bar as a Contact/Menu/CTA link, or use it anywhere you want a small interactive moment — footer links, pricing CTAs, header nav items. Because every color is exposed as a property control, it re-themes instantly to match dark, light, or brand-color nav bars without touching the code.
Give your nav bar a hover state that actually feels designed. Ripple Type is a code component built around a staggered, alternating letter-slide animation — instead of the whole label sliding as one block, each character flips independently: even letters glide right, odd letters glide left, with an incremental delay per letter so the motion ripples across the word instead of firing all at once.
How it works Every letter is masked in its own reveal window holding two stacked copies of the character. On hover, the visible letter slides out (with a subtle skew for a bit of snap) while a duplicate slides in from the opposite side — so the word never just "moves," it exchanges itself letter by letter.
Fully customizable, no code required
Button text and link (with optional new-tab)
Background color + hover background color
Text color + hover text color
Corner radius, font size, font weight, padding, and height
Drop it straight into a nav bar as a Contact/Menu/CTA link, or use it anywhere you want a small interactive moment — footer links, pricing CTAs, header nav items. Because every color is exposed as a property control, it re-themes instantly to match dark, light, or brand-color nav bars without touching the code.
