Image

An intelligent image component with progressive loading, hover effects, and aspect ratio management.

Preview & Interactive Laboratory

Aspect Ratios

Square (1:1)

Square

Video (16:9)

Video

Wide (21:9)

Wide

Interactive Effects

Hover Zoom Effect

Zoom

Hover over the image to see the smooth scale transition.

Feature Highlights

  • Progressive blur-to-sharp loading
  • Customizable loading placeholders
  • Hardware-accelerated transitions

Progressive Loading

Every image includes a built-in loading state with a backdrop blur and pulse animation, ensuring a premium feel even on slower connections.

Usage & Implementation

import { CustomImage } from "@/components/ui/image"

<CustomImage 
  src="/hero.jpg" 
  aspectRatio="video" 
  hoverZoom 
/>
React / Tailwind

Granular Customization

1

Container

The image viewport.

className={`className`}
2

Hover State

Scale and opacity transitions.

className={`hoverZoom={true}`}
3

Placeholder

Initial blurred state.

className={`-`}

API Reference (Props)

PropTypeDefaultDescription
srcstring-The image source URL.
aspectRatio'square' | 'video' | 'wide' | 'auto''auto'Force a specific dimension ratio.
hoverZoombooleanfalseEnable the smooth zoom transition on hover.
prioritybooleanfalseWhether to prioritize loading this image.