3D Rotating Text

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.

What you can control

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

Best use cases

• Hero headlines

• Section transitions

• Editorial storytelling

• Interactive typography

• Scroll-based motion layouts