Chroma Text Reveal

Powered by Framer Motion, Chroma Text Reveal delivers exceptional performance while giving you complete control over animation timing, easing, trigger conditions, repeat behaviour, and an extensive multi-colour gradient system.

Perfect for hero sections, landing pages, SaaS websites, AI startups, portfolios, product launches, and marketing websites.

What Makes It Stand Out

• Animated gradient sweep text reveal

• Supports single or multiple text strings

• Automatic cycling through multiple headlines

• Smooth transitions

• Up to 10 customizable gradient colour stops

• Several animation easing styles

• Trigger animation on page load or when entering the viewport

• Optional repeat mode with configurable delay

• Automatically adapts to changing text widths

• Fully responsive across all screen sizes

• Screen reader friendly and accessibility focused

• Optimized animations with efficient cleanup

Customisations

• Text Strings (Single or Multiple)

• Up to 10 Gradient Colors

• Base Text Color

• Text Font

• Duration

• Delay

• Animation Easing Functions

• Repeat Toggle

• Repeat Delay

• Animate On Load

• Animate On View

• Play Once

Usage

1. Add Chroma Text Reveal to your Framer canvas.

2. Enter one or more text strings in the Texts property.

3. Customize the gradient colors to match your brand.

4. Adjust the typography to fit your design system.

5. Configure the other properties to fit your desired look and feel.

6. That's it!