<!-- source-hash: 95c8b5bc96c688ed1c4897e169dbdcc0 -->
A React component that renders up to three images with scroll-based and mouse-tracking parallax animations using Framer Motion, supporting three distinct layout modes.

## Key Components

### `ParallaxImageShowcaseProps`
| Prop | Type | Description |
|------|------|-------------|
| `images` | `array` | Up to 3 images with `src`, `alt`, and `position` (`left`, `center`, `right`) |
| `layout` | `'non-boxed' \| 'boxed' \| 'grid'` | Visual arrangement mode (default: `'non-boxed'`) |
| `intensity` | `number` | Animation strength multiplier (default: `1`; range: `0.1`–`10`) |
| `shadow` | `boolean` | Applies drop shadow to images (grid layout only) |
| `logoElement` | `ReactNode` | Custom logo rendered above images in boxed layout |
| `className` | `string` | Additional Tailwind classes on the root element |

### Layout Modes
- **`non-boxed`** — Overlapping layered images with z-index depth, large responsive offsets
- **`boxed`** — Two-row structure with a logo slot and two overlapping card-style images
- **`grid`** — Responsive 3-column grid with gentler vertical-only parallax

### Animation System
- **Scroll**: `useScroll` → `useTransform` drives `x`, `y`, and `rotate` based on page scroll position
- **Mouse**: Global `mousemove` listener computes cursor offset relative to the component's `DOMRect`, fed into spring-smoothed motion values
- **Combined**: Scroll and mouse transforms are summed via `useTransform` with array input

## Usage Example

```typescript
import { ParallaxImageShowcase } from './parallax-image-showcase'

const images = [
  { src: '/screens/dashboard.png', alt: 'Dashboard', position: 'left' as const },
  { src: '/screens/tickets.png',   alt: 'Tickets',   position: 'center' as const },
  { src: '/screens/reports.png',   alt: 'Reports',   position: 'right' as const },
]

// Gentle grid layout with shadows
<ParallaxImageShowcase
  images={images}
  layout="grid"
  intensity={0.5}
  shadow
/>

// Aggressive non-boxed hero section
<ParallaxImageShowcase
  images={images}
  layout="non-boxed"
  intensity={3}
  className="h-[600px]"
/>
```

> **Intensity guide:** `0.1` = nearly static · `1` = default · `5` = dramatic · `10` = extreme. Tune per layout — `grid` looks best below `1`, `non-boxed` can handle up to `3–5`.