Delta Components

Overview

The Cambio Image component provides an enhanced image viewing experience with smooth zoom functionality and elegant lazy loading effects. Images fade in with a blur effect when they enter the viewport, and can be clicked to open in a full-screen zoom view with backdrop overlay.

Based on Cambio by Raphael Salaja.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/cambio-image.json

Usage

1.root {
2  isolation: isolate;
3}
4
5[data-state="open"] {
6  z-index: 999 !important;
7}

1import CambioImage from "@/registry/media/cambio-image"
2
3export function Component() {
4  return (
5    <CambioImage
6      src="/your-image.jpg"
7      alt="Description of image"
8      width={800}
9      height={600}
10      motion="bouncy"
11    />
12  )
13}

With Custom Motion Configuration

1<CambioImage
2  src="/your-image.jpg"
3  alt="Description of image"
4  width={800}
5  height={600}
6  motion={{
7    trigger: "snappy",
8    popup: "bouncy",
9    backdrop: "smooth",
10  }}
11  dismissible={false}
12/>

Examples

Basic Image

Grid Layout

Multiple images in a grid layout with proper z-index isolation for smooth zoom interactions.

Motion Variants

Choose from different animation presets to match your design needs:

Snappy Preset

Fast, responsive 240ms ease-out animations for quick interactions.

Bouncy Preset

Playful spring animations with overshoot effect.

Accessible Preset

Reduced motion (10ms linear) that respects user accessibility preferences.

Advanced Configuration

You can customize individual components with different motion presets:

1<CambioImage
2  src="/your-image.jpg"
3  alt="Mixed motion configuration"
4  width={800}
5  height={600}
6  motion={{
7    trigger: "snappy", // Fast trigger animation
8    popup: "bouncy", // Bouncy popup entrance
9    backdrop: "smooth", // Smooth backdrop fade
10  }}
11  dismissible={false} // Prevent dismissing by clicking outside
12/>

API Reference

CambioImageProps

Motion Types

MotionPreset

1type MotionPreset = "snappy" | "smooth" | "bouncy" | "reduced"

• "snappy" - Fast 240ms ease-out animations for responsive interactions
• "smooth" - Balanced 300ms ease-in-out animations (default)
• "bouncy" - Spring animations with playful overshoot effect
• "reduced" - Minimal 10ms linear animations for accessibility

MotionConfig

1interface MotionConfig {
2  trigger?: MotionPreset // Animation for the trigger element
3  popup?: MotionPreset // Animation for the popup/zoom view
4  backdrop?: MotionPreset // Animation for the backdrop overlay
5}

Usage Examples

Basic Usage

1<CambioImage src="/image.jpg" alt="Basic example" width={400} height={300} />

With Motion Preset

1<CambioImage
2  src="/image.jpg"
3  alt="Bouncy animation"
4  width={400}
5  height={300}
6  motion="bouncy"
7/>

Advanced Configuration

1<CambioImage
2  src="/image.jpg"
3  alt="Custom motion config"
4  width={400}
5  height={300}
6  motion={{
7    trigger: "snappy",
8    popup: "bouncy",
9    backdrop: "reduced",
10  }}
11  dismissible={false}
12  loading="eager"
13  index={5}
14/>

Features

• Intersection Observer: Images fade in with a blur effect when they enter the viewport
• Zoom Functionality: Click to open images in full-screen zoom view
• Motion Variants: Four animation presets (snappy, smooth, bouncy, reduced) for different user experiences
• Z-Index Management: Proper layering for grid layouts with multiple images
• Next.js Integration: Uses Next.js Image component for optimization
• Accessibility: Reduced motion preset respects user preferences, proper ARIA attributes and keyboard navigation
• Responsive: Adapts to different screen sizes with responsive zoom behavior