Tailwind UI Pattern Registry for humans and agents

blur entrance motion cinematic focus cinematic focus-in effect for hero headlines blur-to-sharp reveal for modals or overlays dramatic content entrance animation need a cinematic reveal for attention-grabbing elements hero headline should materialize dramatically content reveal that feels premium and polished

Blur In

Fetch snippet JSON: curl https://webspire.de/snippets/animations/blur-in.json
Format
Blur to sharp

The future of design

A soft blur and slight offset resolve into a crisp headline once the motion finishes.

Stage Background
Customize

Quick Start

<h1 class="animate-blur-in text-5xl font-bold tracking-tight">
  Sharp headline
</h1>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
599 bytes · 31 lines
Custom Properties
--anim-duration
Classes
.animate-blur-in.animate-blur-in-up
Dependencies
easing/tokens
blur entrance motion cinematic focus

A cinematic entrance — elements start blurred and come into focus. Pairs beautifully with hero sections and image reveals.

Cinematic hero with Tailwind

<section class="relative overflow-hidden py-32 px-8">
  <div class="mx-auto max-w-3xl text-center">
    <h1 class="animate-blur-in text-6xl font-black tracking-tight
               text-white">
      The future of design
    </h1>
    <p class="animate-blur-in-up mt-6 text-xl text-white/60
              max-w-xl mx-auto leading-relaxed"
       style="animation-delay: 0.15s">
      A new way to build beautiful interfaces
      with zero JavaScript overhead.
    </p>
    <div class="animate-blur-in-up mt-10"
         style="animation-delay: 0.3s">
      <a class="inline-flex items-center gap-2 rounded-full
                bg-white px-8 py-4 text-sm font-semibold text-black
                shadow-lg shadow-white/20 hover:bg-white/90
                transition-colors"
         href="#">
        Start building →
      </a>
    </div>
  </div>
</section>