TextSplitReveal

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)