Split Screen Text

NewPremium

Text that splits apart vertically on scroll, revealing content underneath. Scroll-driven with sticky positioning.

textsplitscrollrevealanimated

Installation

Terminalbash

npx motioncraft add split-screen-text

Usage

split-screen-text.tsxtsx

import { SplitScreenText } from "@/components/text/split-screen-text";

<SplitScreenText
  topText="Discover"
  bottomText="Something New"
  revealContent={<img src="/reveal.jpg" alt="" />}
/>

Props

Prop	Type	Default	Description
topText*	string	—	Top half text
bottomText*	string	—	Bottom half text
revealContent*	ReactNode	—	Content revealed between split
className	string	—	Additional CSS classes

Related Components

Text Reveal

Text that reveals word by word with scroll-driven animation.

Gradient Text

Text with animated gradient color effect.

Text Generate

Text that generates character by character with a typing cursor effect.

Morphing Nav

New

Navigation that morphs between three modes: full bar, floating pill, and fullscreen overlay. Scroll-aware with direction-aware motion.