SplitType
An interactive Framer component that applies a unique text effect to each character when hovered.
Make it with Workshop
Build your own component with AI
The component offers multiple animation styles, from a classic "split" effect to more subtle transitions, making it ideal for creating engaging headlines and titles.
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.
