Marquee Reveal

A list of words. Hover one, and a colored panel unclips from the center, revealing an infinitely scrolling marquee of that word. The unclip animation and the marquee are two independent effects layered together. The clip-path controls visibility, the marquee provides the motion.

#Step 1: The clip-path reveal

Each row is a div with a motion.div overlay. The overlay uses clipPath: inset(50% 0 50% 0) as its initial state. This clips 50% from the top and 50% from the bottom, making the element invisible. On hover, it animates to inset(0% 0 0% 0) (fully visible). The spring with bounce: 0 gives a crisp, non-bouncy reveal.

Loading...

#Step 2: The infinite marquee

Inside the clipped container, a duplicated row of text scrolls left on an infinite linear loop. The original text plus its copy are placed side by side, and the container translates from 0% to -50%. Since the copy is identical to the original, the loop is seamless. When the first copy reaches the left edge, the second copy is in exactly the position the first started in.

Loading...

#Step 3: Hover trigger with mount/unmount

Now we wire the two pieces together. onMouseEnter and onMouseLeave toggle an active state. The marquee overlay animates its clip-path in and out based on that state. The key key="reveal" on the motion.div ensures the same element is reused across enter and exit.

Loading...

#Configuration

Tune the speed, text, and scroll direction.

Loading...