SpoolText

SpoolText is a 3D letter roll animation for Framer where each character flips around its horizontal axis into place, triggered on page load, hover, or both combined, with full per-character replay every time.

Set your text once and choose how it plays, once on load, every time it's hovered, or both, with the entire word replaying cleanly from scratch on each trigger instead of only animating once.

WHAT IT DOES

Type your text and pick a trigger mode. Each character flips in with a staggered 3D rotation, the outgoing face rotating up and out while the incoming face rotates in from below, with adjustable duration, stagger, and easing. A reduced-motion-safe static fallback renders plain text on the Framer canvas.

KEY FEATURES

• 3D per-character roll animation with true rotateX transforms

• Three trigger modes: on load, on hover, or both combined

• Full replay on every hover, not just a single one-time animation

• Adjustable duration, stagger, and four easing curves

• Static-safe rendering for the Framer canvas and thumbnails

• Preserves character spacing automatically, no layout shift

• Full typography and color controls

• Zero third-party dependencies beyond Framer Motion

• Lightweight, pure CSS 3D transforms, no canvas or WebGL

WHY IT WORKS

Most letter-roll effects only fire once on load or loop continuously regardless of interaction. SpoolText responds to both moments, giving designers a single component for intro animations and repeatable hover emphasis instead of picking one or the other.

PERFECT FOR

Hero headlines, navigation links, call-to-action labels, and any Framer site that wants kinetic typography with control over exactly when it plays.

WHAT'S INCLUDED

A single drop-in component. Type your text, choose a trigger mode, and tune duration, stagger, and easing through property controls.

Drop it in, set your trigger, and let the letters roll.