SplitType

Hover effect, split text into two

The component offers multiple animation styles, from a classic "split" effect to more subtle transitions, making it ideal for creating engaging headlines and titles. Showcase Customization Options Text & Typography: Text : The string of text to be displayed. Text Color : The color of the text. Font : Full typographic controls, including font family, size, and weight. Text Transform : Sets the text to uppercase, lowercase, or none. Stroke Color : The color of the text outline. Stroke Width : The thickness of the text outline. Shadow Color : The color of the text drop shadow. Shadow Blur : The blur radius of the text shadow. Shadow X Offset : The horizontal position of the shadow. Shadow Y Offset : The vertical position of the shadow. Animation & Effects Animation Type : A crucial control that lets you choose the animation style on hover: Split : The classic effect where text characters split apart. Fade : Characters fade in or out on hover. Slide : Characters slide up or down. Scale : Characters grow or shrink. Rotate : Characters rotate on their axis. Blur : Characters blur on hover. Split Style : The direction of the split (vertical, horizontal, or diagonal). This is only visible when the Split animation type is selected. Effect Distance : The distance the text characters move during the animation. Animation Speed : The duration of the animation in milliseconds. Easing Function : The animation's easing curve, with options including ease, ease-in, ease-out, and a custom Bouncy effect. Neighbor Effect : A toggle that applies a smaller, secondary effect to the characters directly next to the hovered one. Neighbor Distance : The distance for the secondary "neighbor" effect. This is only visible when Neighbor Effect is turned on. Show Scissors : A toggle to show or hide a scissors icon that appears when a character is hovered over. This is only available for the Split animation type. Scissors Color : The color of the scissors icon. Scissors Size : The size of the scissors icon.

Hover effect, split text into two