Tailimations
Browse categorized motion snippets, preview each pattern in place, and copy the markup plus any required Tailwind CSS.
Entrance
Fade Rise
A compact entrance for cards, menus, and inline panels.
animate-fade-rise
Scale Pop
A snappy scale-in motion for selected or newly inserted UI.
animate-scale-pop
Attention
Soft Pulse
A restrained pulse for pending states and gentle emphasis.
animate-soft-pulse
Wobble
A short correction cue for invalid fields or interrupted actions.
animate-wobble
Loaders
Orbit Loader
A small loading indicator for buttons or compact empty states.
animate-orbit
Bar Loader
A copy-paste progress shimmer that fits table and form rows.
animate-bar-sweep
Text
Text Reveal
A masked title reveal for headings and empty-state labels.
animate-text-reveal
Letter Float
A looped text accent for small badges or feature labels.
animate-letter-float
Hover
Hover Lift
A durable card hover effect using only transition utilities.
transition-transform duration-300 hover:-translate-y-1
Hover Glow
A focusable hover state for call-to-action controls.
transition-shadow duration-300 ease-out hover:border-sky-300 hover:shadow-[0_18px_44px_rgb(56_189_248_/_0.34),0_0_0_1px_rgb(125_211_252_/_0.45)] dark:hover:border-sky-400 dark:hover:shadow-[0_18px_48px_rgb(14_165_233_/_0.52),0_0_0_1px_rgb(56_189_248_/_0.5)]