// Adapted from nice-components/blur-reveal — Blur + noise reveal animation
// Integration: Landing hero entrance
// Adapted for light bg

import { cn } from "@/lib/utils";

interface BlurRevealProps {
  children: React.ReactNode;
  duration?: number;
  blur?: number;
  className?: string;
}

export function BlurReveal({
  children,
  duration = 2000,
  blur = 10,
  className,
}: BlurRevealProps) {
  const style = {
    "--duration-clip": `${duration}ms`,
    "--duration": `${duration + duration / 2}ms`,
    "--blur": `${blur}px`,
  } as React.CSSProperties;

  return (
    <div
      className={cn("relative overflow-x-clip px-8 flex", className)}
      style={style}
    >
      <div
        className="animate-[unclip_var(--duration-clip)_ease-in-out_forwards]"
        style={{
          clipPath: "inset(0 100% 0 0 round 9999px)",
        }}
      >
        {children}
      </div>
      <div className="absolute inset-0 -ml-8 grid pointer-events-none">
        <div
          aria-hidden
          className="col-start-1 row-start-1 w-full h-[calc(100%+50px)] animate-[blurSlide_var(--duration)_ease-in-out_forwards]"
          style={{
            maskImage: "linear-gradient(to left, #000 90%, transparent)",
            WebkitMaskImage: "linear-gradient(to left, #000 90%, transparent)",
            backdropFilter: `blur(var(--blur)) saturate(300%)`,
          }}
        />
      </div>
    </div>
  );
}

Prop	Type	Default	Description
children*	`ReactNode`	—	Content to reveal
duration	`number`	`0.8`	Animation duration in seconds
blur	`number`	`16`	Blur intensity in pixels
className	`string`	—	Additional CSS classes

BlurReveal

Preview

Hello World

API Reference

Hello World