Blur Out Up

Heroes 46

About

Words lift out of a soft blur and drift upward into place, staggered 28ms apart over a 0.56s ease-out. Respects prefers-reduced-motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Blur Out Up to your project and fits it to your theme.

Code

How Blur Out Up is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import Component from "@/components/ui/blur-out-up";

export default function DemoOne() {
  return (
    <div className="flex min-h-[700px] w-full items-center justify-center bg-background p-6">
      <div className="w-full max-w-xl rounded-3xl border bg-card p-12 shadow-sm">
        <p className="font-medium text-muted-foreground text-xs uppercase tracking-[0.18em]">
          Blur Out Up
        </p>

        <h2 className="mt-8 font-semibold text-4xl text-foreground leading-[1.12] tracking-tight">
          <Component>Motion that feels intentional</Component>
        </h2>

        <p className="mt-6 text-lg text-muted-foreground leading-relaxed">
          <Component delay={220}>Words lift out of a soft blur and settle into place.</Component>
        </p>

        <dl className="mt-10 divide-y border-t">
          <div className="flex items-baseline justify-between gap-6 py-4">
            <dt className="text-muted-foreground text-sm">duration</dt>
            <dd className="font-semibold text-foreground text-xl tracking-tight">
              <Component delay={440}>0.56s</Component>
            </dd>
          </div>
          <div className="flex items-baseline justify-between gap-6 py-4">
            <dt className="text-muted-foreground text-sm">word stagger</dt>
            <dd className="font-semibold text-foreground text-xl tracking-tight">
              <Component delay={560}>28ms</Component>
            </dd>
          </div>
          <div className="flex items-baseline justify-between gap-6 py-4">
            <dt className="text-muted-foreground text-sm">animated</dt>
            <dd className="font-semibold text-foreground text-xl tracking-tight">
              <Component delay={680}>blur + y</Component>
            </dd>
          </div>
        </dl>
      </div>
    </div>
  );
}