Skip to content

component

WaveText on Hover

By Louisa Young

Details

Summary

Letters ripple up on hover

Description

About Static text is invisible. Text that moves is remembered. WaveHoverText turns an ordinary word into a moment — each letter lifts in sequence when a cursor arrives, then quietly settles back. The interaction takes less than half a second. The impression lasts. It is the difference between a site that loads and a site that responds. Use Cases The effect works wherever text earns a reaction: Navigation menus — make every nav link feel like it knows the cursor is there CTA buttons — "Get Started" hits differently when it ripples Titles of clickable cards — tells visitors this card goes somewhere by answer them back Portfolio link labels — signal craft before the work loads Footer links — the part of a site most people forget; the part visitors remember when it moves Pill-shaped tags and labels — small surface, outsized personality Fits into agency sites, creative portfolios, fashion and editorial layouts, hospitality and restaurant pages, SaaS marketing sites, and any project where the brief includes the word premium. Customizable properties Content Font (family, weight, size, align etc.) Text Color Wave Height Stagger (ms between each letter's start) Transition Direction (which way the wave ripples across the letters) Padding Radius Border

Introduction

Letters ripple up on hover

Rank history

Daily rank per list, from the first snapshot — lower is better.

125015001750181288/148/228/309/79/15
  • All · #8128