Tailwind UI Pattern Registry for humans and agents

easing timing cubic-bezier spring bounce tokens smooth spring animation timing for transitions bounce or elastic easing for playful UI professional custom easing beyond standard CSS register as Tailwind v4 theme tokens standard ease-in-out feels too mechanical need bounce or spring physics feel in CSS want professional-grade timing curves as design tokens

Easing Tokens

Fetch snippet JSON: curl https://webspire.de/snippets/easing/tokens.json
Format
spring
bounce
elastic
Stage Background
Customize

Quick Start

.btn { transition: transform 0.3s var(--ease-spring); }

Details

Tailwind
v4.x
Browser
baseline-2024
Size
428 bytes · 10 lines
Custom Properties
--ease-spring--ease-bounce--ease-elastic--ease-smooth--ease-snappy--ease-in-expo--ease-out-expo--ease-in-out-back
easing timing cubic-bezier spring bounce tokens

Professional timing functions as CSS custom properties. Drop these into :root and use them anywhere with var().

With Tailwind v4

Register them in your @theme block to use as Tailwind utilities:

@theme {
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

Then use: transition-all duration-300 ease-spring

Interactive button with Tailwind

<button class="rounded-xl bg-white px-6 py-3 text-sm font-semibold
               text-black shadow-lg
               hover:scale-105 hover:shadow-xl
               active:scale-95
               transition-all duration-300"
        style="transition-timing-function: var(--ease-spring)">
  Click me
</button>

Hover card with bounce

<a class="block rounded-xl border border-white/10 bg-white/5 p-6
          hover:-translate-y-1 hover:bg-white/10
          transition-all duration-300"
   style="transition-timing-function: var(--ease-bounce)"
   href="#">
  <h3 class="font-semibold text-white">Feature</h3>
  <p class="mt-2 text-sm text-white/60">Hover me.</p>
</a>