Cinematic Image

1"use client";
2 
3import * as m from "motion/react-m";
4import type { CSSProperties, ReactNode } from "react";
5import { cinematicScale, durations, ease, viewportOnce } from "@/lib/motion";
6 
7type CinematicImageProps = {
8  children: ReactNode;
9  className?: string;
10  style?: CSSProperties;
11};
12 
13/**
14 * Cinematic scale-DOWN settle (110% → 100%) for LARGE images only.
15 * The wrapper (or a parent) MUST be `overflow-hidden` so the 1.1 scale is
16 * clipped — otherwise the oversized image overflows and shifts layout.
17 * Never apply this to titles/text; those stay a straight rise, no scale.
18 */
19export function CinematicImage({ children, className, style }: CinematicImageProps) {
20  return (
21    <m.div
22      className={className}
23      style={style}
24      initial={cinematicScale.initial}
25      whileInView={cinematicScale.animate}
26      viewport={viewportOnce}
27      transition={{ duration: durations.slow, ease: ease.out }}
28    >
29      {children}
30    </m.div>
31  );
32}