• Playground
Components
  • Custom
Surfaces
    • Animated Gradient
    • Float
    • Hover
    • Parallax
    • Pop In
    • Reveal
    • Scroll progress
    • Scroll-driven
    • Scroller
    • Shake
    • Shimmer
    • Stagger
    • Wave
  • SEO
  1. Playground
  2. Animations

Animations

Reusable motion patterns covering entrances, loops, scroll effects, and hover feedback.

Animated Gradient

A slowly drifting multi-stop gradient for backdrops, buttons, and gradient text.

Float

A gentle vertical bob for drawing soft attention to a decorative element.

Hover

Hover effects (lift, scale, glow) from plain Tailwind utilities, no custom CSS.

Parallax

A depth effect on scroll where background layers drift slower than the foreground.

Pop In

An entry animation for elements as they are inserted or shown.

Reveal

A fade-and-slide entrance that plays as an element scrolls into view.

Scroll progress

A bar that fills as the page scrolls, driven natively by scroll position.

Scroll-driven

A CSS animation whose progress is tied to scroll position.

Scroller

Seamless infinite scroll for a row of decorative content like logos, tags, or a ticker.

Shake

A short horizontal shake for error feedback, like a rejected form field.

Shimmer

A sweeping gradient highlight for loading placeholders, an alternative to the Skeleton component's pulse.

Stagger

A sequential entrance where a group of items reveals one after another.

Wave

A one-shot wave gesture, like a hand waving hello.