Rotating Text Reveal is a flexible, scroll-driven typography component designed for modern Framer projects. It animates text on a per-character level using a smooth 3D rotation, revealing a second “behind” text layer as the animation progresses.
The animation can be triggered when the component reaches the top, center, or bottom of the viewport, or fully controlled by scroll using scrub mode. This makes it ideal for hero sections, editorial layouts, landing pages, and motion-focused storytelling.
The component is optimized for performance and supports multiple instances on the same page without conflicts.
Text & Typography
Text content
Full font control (family, size, weight, line height, letter spacing)
Colors
Front text color (initial visible text)
Behind text color (revealed text layer)
Scroll & Animation Behavior
Trigger position: Top, Center, or Bottom of the viewport
Scrub mode (tie animation progress directly to scroll)
Play once or repeat infinitely (repeat disabled automatically when scrub is on)
Motion Details
Smooth per-character 3D rotation
Perspective-based depth for a realistic flip effect
Optimized stagger timing for clean readability
Hero headlines
Section transitions
Editorial storytelling
Interactive typography
Scroll-based motion layouts