--- /** * ParallaxHeroImages — up to eight photos placed in fixed slots around a * hero, each assigned a depth. Moving the pointer drifts every photo by an * amount proportional to its depth; photos also blur/scale/fade into view * with a staggered delay on load. Absolutely positioned, non-interactive * (pointer-events: none) — expects a `position: relative` ancestor with a * defined height. Custom element + rAF lerp loop writing --mx/--my; each * photo's offset is pure CSS calc(depth * var()), no per-image JS. */ type Position = | 'top-left' | 'top-right' | 'mid-left' | 'mid-right' | 'bottom-left' | 'bottom-right' | 'far-left' | 'far-right'; type Variant = 'default' | 'edge-focus'; interface Props { /** * Photo URLs, filled into slots in this order: top-left, top-right, * mid-left, mid-right, bottom-left, bottom-right, far-left, far-right. * Only the first 8 entries are used. */ images: string[]; /** * "default" keeps the two mid slots deep (near) and the rest shallow * (far); "edge-focus" flips that so the top/bottom slots read as near. */ variant?: Variant; /** Additional classes for the root element. */ class?: string; /** Additional classes applied to every photo. */ imageClassName?: string; } const POSITION_ORDER: Position[] = [ 'top-left', 'top-right', 'mid-left', 'mid-right', 'bottom-left', 'bottom-right', 'far-left', 'far-right', ]; const POSITION_STYLES: Record< Position, { top: string; left?: string; right?: string } > = { 'top-left': { top: '8%', left: '4%' }, 'top-right': { top: '8%', right: '4%' }, 'mid-left': { top: '38%', left: '6%' }, 'mid-right': { top: '38%', right: '6%' }, 'bottom-left': { top: '68%', left: '4%' }, 'bottom-right': { top: '68%', right: '4%' }, 'far-left': { top: '52%', left: '2%' }, 'far-right': { top: '52%', right: '2%' }, }; const DEPTH_BY_VARIANT: Record = { default: [0.3, 0.35, 0.9, 0.85, 0.4, 0.45, 0.25, 0.2], 'edge-focus': [0.85, 0.9, 0.3, 0.35, 0.8, 0.85, 0.4, 0.45], }; const { images, variant = 'default', class: className, imageClassName, } = Astro.props; const depths = DEPTH_BY_VARIANT[variant]; const slots = images.slice(0, 8).map((src, index) => { const depth = depths[index]; const pos = POSITION_STYLES[POSITION_ORDER[index]]; return { src, index, depth, zIndex: Math.round(depth * 10), top: pos.top, left: pos.left, right: pos.right, }; }); ---

Installation

Install dependencies

Add these files

Configuration

Use it