Add to your project: npx @webspire/cli add animations/blur-in

The future of design

Elements materialize from blur into sharp focus

BG:

Quick Start

<h1 class="animate-blur-in">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>