Tailwind UI Pattern Registry for humans and agents

scale zoom entrance motion pop pop-in animation for cards or badges scale entrance for tooltips and popovers notification or toast appearing with zoom element needs to grow or pop into view tooltip or popover needs an entrance animation card or badge should appear with a subtle zoom

Scale In

Fetch snippet JSON: curl https://webspire.de/snippets/animations/scale-in.json
Format
Scale in Surface emphasis
Dialog Primary surface arrives with scale

Useful for modals, popovers and emphasized UI that should feel anchored to the center.

Saved
Stage Background
Customize

Quick Start

<div class="animate-scale-in-center">Tooltip content</div>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
882 bytes · 44 lines
Custom Properties
--anim-duration
Classes
.animate-scale-in.animate-scale-in-up.animate-scale-in-center
Dependencies
easing/tokens
scale zoom entrance motion pop

Elements that grow into view. The default scale-in is subtle (90% → 100%), scale-in-up adds a slight upward motion, and scale-in-center pops from zero for tooltips and notifications.

Toast notification with Tailwind

<div class="animate-scale-in-center fixed bottom-6 right-6 z-50
            flex items-center gap-3 rounded-xl bg-zinc-900
            border border-white/10 px-5 py-3.5 shadow-2xl"
     style="transform-origin: bottom right">
  <div class="w-2 h-2 rounded-full bg-emerald-400"></div>
  <p class="text-sm text-white">Changes saved successfully.</p>
  <button class="ml-3 text-xs text-white/40 hover:text-white
                 transition-colors">Dismiss</button>
</div>

Tooltip pattern

<div class="animate-scale-in-center rounded-lg bg-zinc-800
            border border-white/10 px-3 py-2 text-xs text-white
            shadow-lg" style="transform-origin: bottom center">
  Copy to clipboard
</div>