Rolling Words

A column of words that rolls upward without stopping, next to fixed text on either side. "Made" stays still while "by hand" and "to last" pass beside it, and the top and bottom of the column can fade out.

What you can change

• The list of words or phrases, and optional text before and after them, with separate fonts and colors for each of the three.

• Speed from 0.1x to 4x, the height of each row, and how many rows show, from 1 to 7.

• The edge fade and its amount, and whether the motion pauses on hover.

• Background color, padding, corner radius and alignment.

Where it fits

Hero headlines that have more than one way to end, such as a list of audiences, uses or values.

Good to know

• It runs at a constant speed and never stops on a word, so with one visible row each word is only readable briefly.

• Phrases stay on one line and don't wrap. Lower the font size on small breakpoints, because wide text runs past the frame.

• Row height doesn't follow the font size. Raise Item Height when you use a larger font.

• A list shorter than the visible rows repeats to fill them. The default item color is near white, so change it on a light section. Motion stops for visitors who ask for reduced motion.