This is a Hover-Reactive Typography Component designed to spark user interest and provide visual delight. Standard text reacts organically to the movement of the mouse cursor, creating a dynamic, fluid-like interaction.
Key Features
Proximity-Based Scaling: Individual letters fluidly expand and significantly stretch based on the position and distance of the mouse cursor.
Color Transition: Colors can smoothly transition upon mouse hover.
Blend Mode Overlap: As the expanding letters overlap, they create a viscous effect, presenting a highly organic appearance.
Fluid Easing: By applying smooth easing effects, the letters naturally follow the mouse trajectory and seamlessly snap back to their original state once the cursor moves away.
Recommended Use Cases
It is highly suitable for hero sections of websites, creative portfolios of designers/developers, and landing pages where you want to instantly capture visitors' attention and encourage engagement. When utilized in a GNB (Global Navigation Bar), it catches the eye while adding a layer of sophisticated detail.