Text Glow Hover: Free UI Component by Jurre

Text Glow Hover for Framer – Interactive, Multi-Layered Blurred Text Shadow Animation

The Text Glow Hover component brings large, dramatic text to life with interactive, multi-layered blurred shadows and glow effects that respond to cursor or touch movement. Inspired by striking HTML/CSS/JS motion effects, this Framer component creates a dynamic depth illusion where each layer of shadow shifts, scales, and glows based on the viewer’s pointer position. Perfect for hero headers, immersive titles, event pages, and cutting-edge landing designs, it lets you create cinematic, motion-driven typography—all with no custom coding.

Immersive Interactive Motion

Cursor-responsive shadows: Mouse or touch position drives the direction and depth of each shadow copy, creating a 3D parallax-style effect.
Multi-layered blur: Up to 200 independently shifting, blurred shadow layers produce a glowing, volumetric aura behind the text.
Smooth transitions: When the cursor leaves, the animation gracefully resets to center, maintaining fluidity.
Optional animated pulse: Glow can subtly pulsate for added energy and motion, without overwhelming the design.

Advanced Visual Customization

MouseTextEffect includes deep property controls so you can fine-tune the look and feel:

Text & Font: Full support for custom fonts, including UnifrakturMaguntia by default for a bold, gothic style. Adjust size, weight, letter spacing, and line height.
Color and Glow: Set a solid shadow color or enable gradient glow, blending from one color to another for a radiant, dynamic aura.
Shadow Control: Choose the number of shadow copies (10–200) and adjust shadow scale factor to control spread and intensity.
Glow Effects: Customize blur radius, opacity, and animated pulsation for the main glow, adding subtle motion or bold, atmospheric lighting.
Background: Easily set a solid backdrop for maximum contrast and visual impact.

How It Works

The component tracks the pointer position relative to its center and calculates horizontal and vertical motion vectors. These vectors are applied via CSS transforms and variables, driving the offset and scaling of each shadow copy. Shadows can be a single color or gradient-based, interpolated between start and end colors for smooth glowing transitions. The main text features an additional multi-layered text-shadow glow that shifts dynamically, creating depth and drama.