Skip to content

Primitives

Animate your content with reveals, text effects, counters, loops and scroll effects.

Use these pieces to animate content you provide: reveal it, animate its text or numbers, loop it, or link it to scrolling. Each is available in @youj/motion and the registry, and follows the shared Speed setting.

Appear

Reveal
Fade, rise, blur, scale or wipe in, on mount or in view. Exits too.
Stagger
Plays a group of children in sequence on a stagger token.

Text and numbers

TextSplit
Reveals text by character, word or measured line.
TextEffect
One text renderer: split-flap, terminal, decode, blur-in or rolling reels.
ScrambleText
Decodes toward its text through random glyphs.
Counter
An animated number that counts or rolls, and retargets mid-flight.

Loops and scroll

Marquee
A seamless loop that eases to a stop on hover.
Parallax
Maps scroll onto translate, scale, rotate and opacity.
ScrollProgress
A spring-smoothed bar or ring bound to scroll.

For pointer effects such as Tilt and Magnetic, see Visual effects in the Components sidebar.