Tailwind UI Pattern Registry for humans and agents

fade entrance motion transition fade in element on page load entrance animation from below or above animate content appearing in viewport smooth list item entrance element appears too abruptly without animation need smooth content entrance transition page load feels static without motion

Fade In

Fetch snippet JSON: curl https://webspire.de/snippets/animations/fade-in.json
Format

Hello, World

This element animates in

Stage Background
Customize

Quick Start

<div class="animate-fade-in-up">Hello World</div>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
827 bytes · 43 lines
Custom Properties
--anim-duration
Classes
.animate-fade-in.animate-fade-in-up.animate-fade-in-down
Dependencies
easing/tokens
fade entrance motion transition

Clean fade-in animations with a professional spring-like easing curve. Three variants: .animate-fade-in (simple), .animate-fade-in-up (from below), .animate-fade-in-down (from above).

Hero section with Tailwind

<section class="flex flex-col items-center text-center py-24 px-8">
  <span class="animate-fade-in rounded-full bg-white/10 px-4 py-1.5
               text-xs font-medium text-white/70 border border-white/10">
    Now in beta
  </span>
  <h1 class="animate-fade-in-up mt-6 text-5xl font-black
             tracking-tight text-white">
    Build faster UIs
  </h1>
  <p class="animate-fade-in-up mt-4 max-w-md text-lg text-white/60"
     style="animation-delay: 0.1s">
    Copy-paste CSS effects that compose with Tailwind.
  </p>
  <div class="animate-fade-in-up mt-8 flex gap-3"
       style="animation-delay: 0.2s">
    <a class="rounded-full bg-white px-6 py-3 text-sm font-semibold
              text-black hover:bg-white/90 transition-colors"
       href="#">Get started</a>
    <a class="rounded-full border border-white/20 px-6 py-3 text-sm
              text-white hover:bg-white/10 transition-colors"
       href="#">View docs</a>
  </div>
</section>