---
title: "SplitType — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Snoweirdo · Text. Hover effect, split text into two"
canonical: "https://framer.elliotli.dev/component/splittype"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/SplitType

# SplitType

Hover effect, split text into two

[View on Framer](https://framer.com/marketplace/components/splittype/?via=elliot-li)

![SplitType preview image 1](https://framer.elliotli.dev/og/component/splittype/40bf64922afbc67b/1600x1200.jpg)

## Summary

Hover effect, split text into two

## Description

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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #11036

## Details

- **Author**: Snoweirdo
- **Price**: $15.00
- **Published**: 2025-08-14
- **Updated**: 2026-05-07
- **Added**: 2025-08-09
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos