Blur Image

1// Copyright (c) 2026 raouf.codes - Azemmur
2 
3'use client';
4 
5import { cn } from '@/lib/utils';
6import { cva, type VariantProps } from 'class-variance-authority';
7import Image, { ImageProps } from 'next/image';
8import { useState } from 'react';
9 
10const PLACEHOLDER_BLUR =
11  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAwIiBoZWlnaHQ9IjQ3NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjMjIyIi8+PC9zdmc+';
12 
13const blurImageVariants = cva('relative overflow-hidden border-2', {
14  variants: {
15    intent: {
16      primary: 'border-primary',
17      accent: 'border-accent',
18      secondary: 'border-secondary',
19      success: 'border-success',
20      info: 'border-info',
21      warning: 'border-warning',
22      error: 'border-error',
23      neutral: 'border-border',
24    },
25    visuals: {
26      solid: '',
27      dashed: 'border-dashed',
28      dotted: 'border-dotted',
29      none: 'border-none bg-transparent',
30    },
31    shape: {
32      rounded: 'rounded-xl',
33      pill: 'rounded-full',
34      sharp: 'rounded-none',
35    },
36    elevation: {
37      none: '',
38      raised: 'shadow-md',
39      floating: 'shadow-lg',
40    },
41  },
42  defaultVariants: {
43    shape: 'rounded',
44    visuals: 'none',
45    intent: 'neutral',
46    elevation: 'none',
47  },
48});
49 
50type BlurImageProps = Omit<ImageProps, 'size'> &
51  VariantProps<typeof blurImageVariants>;
52 
53const BlurImage = ({
54  className,
55  height = 210,
56  width = 400,
57  src,
58  alt,
59  blurDataURL,
60  shape,
61  visuals,
62  intent,
63  elevation,
64  ...props
65}: BlurImageProps) => {
66  const [isLoading, setLoading] = useState(true);
67 
68  return (
69    <div
70      className={cn(blurImageVariants({ shape, visuals, intent, elevation }))}
71    >
72      {isLoading && (
73        <div className="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/10 to-transparent" />
74      )}
75      <Image
76        className={cn(
77          'transition duration-300',
78          shape === 'pill'
79            ? 'rounded-full'
80            : shape === 'sharp'
81              ? 'rounded-none'
82              : 'rounded-xl',
83          isLoading ? 'blur-sm scale-105' : 'blur-0 scale-100',
84          className,
85        )}
86        aria-label={alt}
87        onLoad={() => setLoading(false)}
88        src={src as string}
89        width={width}
90        height={height}
91        loading="lazy"
92        decoding="async"
93        placeholder="blur"
94        blurDataURL={blurDataURL ?? PLACEHOLDER_BLUR}
95        alt={alt}
96// … truncated