---
title: "TextSplitReveal — Free Framer component · Best of Framer"
description: "Free Framer component · by Salome Katunzi · Text. Splits text and reveals hidden message"
canonical: "https://framer.elliotli.dev/component/textsplitreveal"
---

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

# TextSplitReveal

Splits text and reveals hidden message

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

![TextSplitReveal preview image 1](https://framer.elliotli.dev/og/component/textsplitreveal/f780544bfa35b426/1600x1200.jpg)

## Summary

Splits text and reveals hidden message

## Description

## About This Component

-   **Fully Customizable** - Easily adjust fonts, colors, backgrounds, and animation distances to match your brand or design system.
    
-   **Responsive Design** - Built with responsive font sizes that adapt across different viewports, from mobile to desktop.
    
-   **Customizable Properties** - Modify font family, text color, background color, and responsive font sizes across different breakpoints.
    

## How to Customize

The component accepts the following settings:

_Text_

-   Main Text - The primary text that splits on hover
    
-   Reveal Text - The hidden message that appears in the middle
    

_Colors_

-   Main Color - The color of the main text
    
-   Reveal Color - The text color of the reveal message
    
-   Reveal Background - The background color behind the reveal text
    

_Spacing_

-   Space Distance - The distance (in pixels) the text halves move apart on hover
    

_Fonts_

-   Main Font - The font family for the main text
    
-   Reveal Font - The font family/weight for the reveal text
    
-   Font Size - Responsive font sizes across different viewports (customize on the specific breakpoint)
    

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

-   All · #3546

## Details

- **Author**: Salome Katunzi
- **Published**: 2026-01-30
- **Updated**: 2026-01-30
- **Added**: 2026-01-22
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing