Animate headlines on scroll with a clean clip path reveal. The component measures the rendered width of your text, wraps it into true visual lines, then animates each line as it enters view.
• On scroll reveal with enter and exit control from the viewport
• Line by line animation that respects your actual wrapping
• Direction options top bottom left right center
• Controls for duration and stagger
• Works with any font and weight
• Alignment left center rightProps
• Text: multi line input. Press Enter to create a new line.
• Font: family and weight.
• Font Size: default 72.
• Text Color: any solid color.
• Text Align: left center right.
• Line Height: default 1.1.
• Width: container width.
• Background: component background.
• Padding: inner spacing.
• Radius: corner rounding.
• Reveal Direction: top bottom left right center.
• Stagger Delay: delay between lines.
• Duration: time for each line.
1. Drop the component on your canvas.
2. Set Text and press Enter for new lines.
3. Choose Font and Font Size.
4. Pick Reveal Direction then tune Duration and Stagger.
5. Adjust Padding and Radius if you want a card look.
6. Place the frame in a scrollable section. The reveal runs when the text enters view.
• Keep a short line length for stronger rhythm.
• Try center alignment with small stagger for hero lines.
• For subtle motion use a shorter duration with a small stagger.
• The frame has a minimum height to ensure scroll space. Increase the section height if you want a later reveal.
• The component uses Framer Motion and in view detection.
• Works best with display fonts at medium to large sizes
Long Nhật
