How is this different from Text reveal?

The crop or frame is the design. [Text reveal](/motion/text-reveal/) can be a simple stagger with no mask.

Can I combine this with a scramble?

You can. You will ask the same letters to do 2 jobs. Pick one.

Does it work on mobile?

Yes, if the frame still fits and you trigger from scroll or load, not hover.

What does reduced motion do?

Show the finished title in the frame. No crop animation.

Cinematic text

Cinematic text reveals a line through a crop, a mask, or a slow rise, with more theatre than a product heading usually wants.

TextBuild difficulty: MediumSplitText mask

Also called Title card text, Masked title, Film type, Cropped heading.

Here it is working.

The quiet partcomes first

The line rises into view. Play again to watch it twice.

For designers

Think of a title sitting in a frame, not a setting in a form. One line, one view, a little air around it. If the words have to work as a UI heading, Text reveal will get you there with less wait. If the words have to work as a paragraph, show the paragraph. Slow is the point and also the risk. Past about 1 second people have scrolled on. Pair it with stillness, not with a second flourish on the same line. Reduced motion shows the finished title in its frame.

Use this when

The line is a title, and the crop is part of the layout.
You have one of these on screen, with space around it.
The reveal can finish before anyone needs the next action.
Reduced motion can show the title already in place.

Reach for something else when

The heading is a normal product line. Use Text reveal.
The crop is a hard rectangle you designed as a block. Use Rectangle text reveal.
The line should fold open in 3D. Use Folding text.
A whole section should arrive. Use Element reveal or Mask reveal.
Letters should pop or type. Use Popping text or Typewriter.

How to build it

Set the title as real text. SplitText can mask the lines, or you can clip a frame you have already drawn. Move the words up through the crop, or open the mask, on a single ease. Split by lines, not characters. Keep the move small. A few percent of the cap height is enough. ScrollTrigger can start it when the title enters. If it is the first thing on load, play it then. On reduced motion, show the title at rest in the same frame. Re-measure the mask if the type wraps.

Official GSAP

SplitText with mask: 'lines'.

const split = SplitText.create('.title', { type: 'lines', mask: 'lines' });
gsap.from(split.lines, { yPercent: 110, duration: 1.1, ease: 'power3.out', stagger: 0.12 });

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

How is this different from Text reveal?: The crop or frame is the design. Text reveal can be a simple stagger with no mask.
How slow can I go?: Until about 1 second.
Can I combine this with a scramble?: You can. You will ask the same letters to do 2 jobs. Pick one.
Does it work on mobile?: Yes, if the frame still fits and you trigger from scroll or load, not hover.
What about more than one title?: One per view.
What does reduced motion do?: Show the finished title in the frame. No crop animation.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Folding text