WordDrum

WordDrum stacks a repeating word into rows for Framer, each one cycling through its own squeeze, tilt, and brightness wave, like a wall of tiny spinning drums instead of one circular spin.

Every other spinning-text component puts words on a single circular path or one rotating cylinder line. WordDrum stacks many rows at once, each phase-offset from its neighbors, so the whole wall ripples instead of moving as one shape.

WHAT IT DOES

Add one or more words, and WordDrum repeats them down as many rows as you choose. Each row cycles through a cosine-based squeeze and tilt, brightening and dimming, so the stack reads as a shimmering drum wall. Hover or press any row and it grows toward an accent color while the rest keeps cycling.

KEY FEATURES

• Many independently phased rows, not one circular or single-line spin

• Cosine-driven squeeze, tilt, and brightness cycle per row

• Hover or touch any row to grow it toward an accent color

• Adjustable cycle speed, drift amplitude, and hover responsiveness

• Smooth edge fade at top and bottom, blends into the background

• Resolves any color format, hex, rgba, named colors, or shared color styles

• Static-safe rendering settles rows into a clean resting pose

• Runs entirely on MotionValues, no per-frame React re-renders

• Full typography controls

• Zero third-party dependencies beyond Framer Motion

WHY IT WORKS

A single spinning circle or cylinder is familiar by now. A wall of words each cycling on its own offset drum reads as a living surface, more texture than typography, and the hover response gives visitors a reason to interact with it.

PERFECT FOR

Hero section backdrops, brand statement walls, agency landing pages, and any Framer site that wants a kinetic typographic backdrop instead of a static headline.

WHAT'S INCLUDED

A single drop-in component. Add your words, set the row count, then tune cycle speed, colors, and hover behavior through property controls.

Drop it in, add your words, and let the wall spin.